【JavaEE】JavaScript（基础语法）注意事项

1. JavaScript 是什么

JavaScript (简称 JS)

• 是世界上最流行的编程语言之一
• 是一个脚本语言, 通过解释器运行
• 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行.

JavaScript 的能做的事情:

• 网页开发(更复杂的特效和用户交互)
• 网页游戏开发
• 服务器开发(node.js)
• 桌面程序开发(Electron, VSCode 就是这么来的)
• 手机 app 开发

2. JavaScript 和 HTML 和 CSS 之间的关系

• HTML: 网页的结构(骨)
• CSS: 网页的表现(皮)
• JavaScript: 网页的行为(魂).

3. 基本数据类型

JS 中内置的几种类型

• number: 数字. 不区分整数和小数.：JS 中不区分整数和浮点数, 统一都使用 “数字类型” 来表示.
• boolean: true 真, false 假.
• string: 字符串类型.
• undefined: 只有唯一的值 undefined. 表示未定义的值.
• null: 只有唯一的值 null. 表示空值.

特殊的数字值：

• Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
• -Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
• NaN: 表示当前的结果不是一个数字.

4.运算符 条件 循环

JavaScript 中的运算符 条件 循环和 Java 用法基本相同

5. 数组

创建数组：
使用 new 关键字创建

// Array 的 A 要大写
var arr = new Array();

使用字面量方式创建 [常用]

var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

注意: JS 的数组不要求元素是相同类型.

• 这一点和 C, C++, Java 等静态类型的语言差别很大. 但是 Python, PHP 等动态类型语言也是如此.

6. 函数

语法格式

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}
// 函数调用
函数名(实参列表)           // 不考虑返回值
返回值 = 函数名(实参列表)   // 考虑返回值

• 函数定义并不会执行函数体内容, 必须要调用才会执行. 调用几次就会执行几次.

function hello() {
    console.log("hello");
}
// 如果不调用函数, 则没有执行打印语句
hello();

• 调用函数的时候进入函数内部执行, 函数结束时回到调用位置继续执行. 可以借助调试器来观察.
• 函数的定义和调用的先后顺序没有要求. (这一点和变量不同, 变量必须先定义再使用)

// 调用函数
hello();
// 定义函数
function hello() {
    console.log("hello");
}

关于参数个数：
实参和形参之间的个数可以不匹配. 但是实际开发一般要求形参和实参个数要匹配

• 如果实参个数比形参个数多, 则多出的参数不参与函数运算
• 如果实参个数比形参个数少, 则此时多出来的形参值为 undefined
• 如果实参个数比形参个数少, 则此时多出来的形参值为 undefined

函数表达式：
另外一种函数的定义方式

var add = function() {
 var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
   }
    return sum;
}
console.log(add(10, 20));            // 30
console.log(add(1, 2, 3, 4));        // 10
console.log(typeof add);             // function

此时形如 function() { } 这样的写法定义了一个匿名函数, 然后将这个匿名函数用一个变量来表示.
后面就可以通过这个 add 变量来调用函数了

• JS 中函数是一等公民, 可以用变量保存, 也可以作为其他函数的参数或者返回值.

7. 对象

对象是指一个具体的事物
在 JS 中, 字符串, 数值, 数组, 函数都是对象.
每个对象中包含若干的属性和方法.

• JavaScript 的对象 和 Java 的对象概念上基本一致. 只是具体的语法表项形式差别较大.

1. 使用 字面量 创建对象 [常用]
   使用 { } 创建对象

var a = {};  // 创建了一个空的对象
var student = {
    name: '蔡徐坤',
    height: 175,
    weight: 170,
    sayHello: function() {
        console.log("hello");
   }
};

• 使用 { } 创建对象
• 属性和方法使用键值对的形式来组织.
• 键值对之间使用 , 分割. 最后一个属性后面的 , 可有可无
• 键和值之间使用 : 分割.
• 方法的值是一个匿名函数.

使用对象的属性和方法:

// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法, 别忘记加上 () 
student.sayHello();

2. 使用 new Object 创建对象

var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
    console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();

注意, 使用 { } 创建的对象也可以随时使用 student.name = “蔡徐坤”; 这样的方式来新增属性.

3. 使用 构造函数 创建对象
   前面的创建对象方式只能创建一个对象. 而使用构造函数可以很方便 的创建 多个对象.

var mimi = {
    name: "咪咪",
    type: "中华田园喵",
    miao: function () {
        console.log("喵");
   }
};
var xiaohei = {
    name: "小黑",
    type: "波斯喵",
    miao: function () {
        console.log("猫呜");
   }
}
var ciqiu = {
    name: "刺球",
    type: "金渐层",
    miao: function () {
        console.log("咕噜噜");
   }
}

此时写起来就比较麻烦. 使用构造函数可以把相同的属性和方法的创建提取出来, 简化开发过程
基本语法

function 构造函数名(形参) {
    this.属性 = 值;
    this.方法 = function...
}
    
var obj = new 构造函数名(实参);

注意:

• 在构造函数内部使用 this 关键字来表示当前正在构建的对象. （this相当于我）
• 构造函数的函数名首字母一般是大写的.
• 构造函数的函数名可以是名词.
• 构造函数不需要 return
• 创建对象的时候必须使用 new 关键字.

使用构造函数重新创建猫咪对象

function Cat(name, type, sound) {
    this.name = name;
    this.type = type;
    this.miao = function () {
        console.log(sound); // 别忘了作用域的链式访问规则
   }
}
var mimi = new Cat('咪咪', '中华田园喵', '喵');
var xiaohei = new Cat('小黑', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '金渐层', '咕噜噜');
console.log(mimi);
mimi.miao();

理解 new 关键字：
new 的执行过程:

1. 先在内存中创建一个空的对象 { }
2. this 指向刚才的空对象(将上一步的对象作为 this 的上下文)
3. 执行构造函数的代码, 给对象创建属性和方法
4. 返回这个对象 (构造函数本身不需要 return, 由 new 代劳了)

• 本篇文章主要重点介绍了JavaScript基础语法与Java的特别不同之处，实际上大部分的都是相似的，理解了JavaSE也就很容易上手JavaScript的 over~ ✨