Eccentric's Note
首页 分类 标签 归档 pdf 友链 关于
Eccentric's Note

目录

JavaScript基础语法

 收录于 前端
   约 3119 字   预计阅读 7 分钟    次阅读  

快速入门

数据类型与变量

实际上，JavaScript允许对任意数据类型做比较：

1
2

false == 0; // true
false === 0; // false

要特别注意相等运算符==。JavaScript在设计时，有两种比较运算符：

第一种是 == 比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

第二种是 === 比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。

另一个例外是NaN这个特殊的Number与所有其他值都不相等，包括它自己：

1

NaN === NaN; // false

唯一能判断NaN的方法是通过isNaN()函数：

1

isNaN(NaN); // true

最后要注意浮点数的相等比较：

1

1 / 3 === (1 - 2 / 3); // false

这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：

1

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
BigInt

要精确表示比253还大的整数，可以使用内置的BigInt类型，它的表示方法是在整数后加一个n，例如9223372036854775808n，也可以使用BigInt()把Number和字符串转换成BigInt：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var bi1 = 9223372036854775807n;
var bi2 = BigInt(12345);
var bi3 = BigInt("0x7fffffffffffffff");
console.log(bi1 === bi2); // false
console.log(bi1 === bi3); // true
console.log(bi1 + bi2);

false
true
9223372036854788152
null和undefined

null表示一个“空”的值，它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。

在其他语言中，也有类似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，还有一个和null类似的undefined，它表示“未定义”。

JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。

true or false

JavaScript把null、undefined、0、NaN和空字符串''视为false，其他值一概视为true

for(var i in arr) for(var i of arr)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

var inArray = ['a','dfg','sdvfd','ryt','234'];
for(var i in inArray){
	console.log(i);
	console.log(inArray[i]);
}

0
a
1
dfg
2
sdvfd
3
ryt
4
234

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var inArray = ['a','dfg','sdvfd','ryt','234'];
for(var i of inArray){
	console.log(i);
}

a
dfg
sdvfd
ryt
234

函数

函数的定义
1
2
3
4
5
6
7

function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

由于JavaScript的函数也是一个对象，上述定义的abs()函数实际上是一个函数对象，而函数名abs可以视为指向该函数的变量。

1
2
3
4
5
6
7

var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};

在这种方式下，function (x) { ... }是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量abs，所以，通过变量abs就可以调用该函数。

上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个;，表示赋值语句结束。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function foo(x) {
    console.log('x = ' + x); // 10
    for (var i=0; i<arguments.length; i++) {
        console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
    }
}
foo(10, 20, 30);

//
x = 10
arg 0 = 10
arg 1 = 20
arg 2 = 30
rest参数

由于JavaScript函数允许接收任意个参数，于是我们就不得不用arguments来获取所有参数：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function foo(a, b) {
    var i, rest = [];
    if (arguments.length > 2) {
        for (i = 2; i<arguments.length; i++) {
            rest.push(arguments[i]);
        }
    }
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

为了获取除了已定义参数a、b之外的参数，我们不得不用arguments，并且循环要从索引2开始以便排除前两个参数，这种写法很别扭，只是为了获得额外的rest参数，有没有更好的方法？

ES6标准引入了rest参数，上面的函数可以改写为：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

rest参数只能写在最后，前面用...标识，从运行结果可知，传入的参数先绑定a、b，多余的参数以数组形式交给变量rest，所以，不再需要arguments我们就获取了全部参数。

如果传入的参数连正常定义的参数都没填满，也不要紧，rest参数会接收一个空数组（注意不是undefined）。

因为rest参数是ES6新标准，所以你需要测试一下浏览器是否支持。

变量提升

JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：

1
2
3
4
5
6
7
8
9

'use strict';

function foo() {
    var x = 'Hello, ' + y;
    console.log(x);
    var y = 'Bob';
}

foo();

虽然是strict模式，但语句var x = 'Hello, ' + y;并不报错，原因是变量y在稍后申明了。但是console.log显示Hello, undefined，说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明，但不会提升变量y的赋值。

对于上述foo()函数，JavaScript引擎看到的代码相当于：

1
2
3
4
5
6

function foo() {
    var y; // 提升变量y的申明，此时y为undefined
    var x = 'Hello, ' + y;
    console.log(x);
    y = 'Bob';
}

由于JavaScript的这一怪异的“特性”，我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量。

全局作用域

不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性：

1
2
3
4
5

'use strict';

var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'

因此，直接访问全局变量course和访问window.course是完全一样的。

你可能猜到了，由于函数定义有两种方式，以变量方式var foo = function () {}定义的函数实际上也是一个全局变量，因此，顶层函数的定义也被视为一个全局变量，并绑定到window对象：

1
2
3
4
5
6
7
8

'use strict';

function foo() {
    alert('foo');
}

foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用
名字空间

全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
    return 'foo';
};
局部作用域

由于JavaScript的变量作用域实际上是函数内部，我们在for循环等语句块中是无法定义具有局部作用域的变量的：

1
2
3
4
5
6
7
8

'use strict';

function foo() {
    for (var i=0; i<100; i++) {
        //
    }
    i += 100; // 仍然可以引用变量i
}

为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

'use strict';

function foo() {
    var sum = 0;
    for (let i=0; i<100; i++) {
        sum += i;
    }
    // SyntaxError:
    i += 1;
}

ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域：

1
2
3
4
5

'use strict';

const PI = 3.14;
PI = 3; // 某些浏览器不报错，但是无效果！
PI; // 3.14
解构赋值

从ES6开始，JavaScript引入了解构赋值，可以同时对一组变量进行赋值。

什么是解构赋值？我们先看看传统的做法，如何把一个数组的元素分别赋值给几个变量：

1
2
3
4

var array = ['hello', 'JavaScript', 'ES6'];
var x = array[0];
var y = array[1];
var z = array[2];

现在，在ES6中，可以使用解构赋值，直接对多个变量同时赋值：

1
2
3
4

'use strict';

// 如果浏览器支持解构赋值就不会报错:
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];

注意，对数组元素进行解构赋值时，多个变量要用[...]括起来。

1
2
3
4
5
6
7

// x, y, z分别被赋值为数组对应元素:
var arr = ['hello', 'JavaScript', 'ES6'];
var [x, y, z] =  [...arr]

// x, y, z分别被赋值为数组对应元素:
var arr = ['hello', 'JavaScript', 'ES6'];
var [x, y, z] =  arr

更多详细教程，请查看： https://www.liaoxuefeng.com/wiki/1022910821149312

更新于 2023-12-25
返回 | 主页