2.png 0
8i98

家事,国事,天下事,事事关心

2022-03-13

js笔记09-es6新特性1

2022-05-29 0 85 web前端社区

2.png 0 8i98

ES6教程

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

ECMAScript 和 JavaScript 的关系

一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?

1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。

因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 JScript 和 ActionScript)。日常场合,这两个词是可以互换的。

ES6 与 ECMAScript 2015 的关系

ECMAScript 2015(简称 ES2015)这个词,也是经常可以看到的。它与 ES6 是什么关系呢?

2011 年,ECMAScript 5.1 版发布后,就开始制定 6.0 版了。因此,ES6 这个词的原意,就是指 JavaScript 语言的下一个版本。

但是,因为这个版本引入的语法功能太多,而且制定过程当中,还有很多组织和个人不断提交新功能。事情很快就变得清楚了,不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布 6.0 版,过一段时间再发 6.1 版,然后是 6.2 版、6.3 版等等。

但是,标准的制定者不想这样做。他们想让标准的升级成为常规流程:任何人在任何时候,都可以向标准委员会提交新语法的提案,然后标准委员会每个月开一次会,评估这些提案是否可以接受,需要哪些改进。如果经过多次会议以后,一个提案足够成熟了,就可以正式进入标准了。这就是说,标准的版本升级成为了一个不断滚动的流程,每个月都会有变动。

标准委员会最终决定,标准在每年的 6 月份正式发布一次,作为当年的正式版本。接下来的时间,就在这个版本的基础上做改动,直到下一年的 6 月份,草案就自然变成了新一年的版本。这样一来,就不需要以前的版本号了,只要用年份标记就可以了。

ES6 的第一个版本,就这样在 2015 年 6 月发布了,正式名称就是《ECMAScript 2015 标准》(简称 ES2015)。2016 年 6 月,小幅修订的《ECMAScript 2016 标准》(简称 ES2016)如期发布,这个版本可以看作是 ES6.1 版,因为两者的差异非常小(只新增了数组实例的includes方法和指数运算符),基本上是同一个标准。根据计划,2017 年 6 月发布 ES2017 标准。

因此,ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。

Babel 转码器

现在使用的js语法,基本是ES5的规范 ,15年出的ES6的规范增加了很多其他语法,要看浏览器的支持情况,如果浏览器不支持那么就会报错

ES6 块级作用域 关键字let, 常量const,对象字面量的属性赋值简写,赋值解构,函数参数 - 默认值、参数打包、 数组展开(Default 、Rest 、Spread),箭头函数 Arrow functions,字符串模板 Template strings,Iterators(迭代器)+ for..of,生成器 (Generators),class,Modules,Map + Set + WeakMap + WeakSet,Promises是处理异步操作的对象,Symbol是一种基本类型通过调用symbol函数产生,Symbol是一种基本类型。Symbol 通过调用symbol函数产生 等

一、桌面端浏览器对ES2015的支持情况

Chrome:51 版起便可以支持 97% 的 ES6 新特性。
Firefox:53 版起便可以支持 97% 的 ES6 新特性。
Safari:10 版起便可以支持 99% 的 ES6 新特性。
IE:Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。(IE7~11 基本不支持 ES6)

二、移动端浏览器对ES2015的支持情况

iOS:10.0 版起便可以支持 99% 的 ES6 新特性。
Android:基本不支持 ES6 新特性(5.1 仅支持 25%)

三、服务器对ES2015的支持情况

Node.js:6.5 版起便可以支持 97% 的 ES6 新特性。(6.0 支持 92%)

Babel 转码器

Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。

Babel 也可以用于浏览器环境,使用@babel/standalone模块提供的浏览器版本,将其插入网页。

  1. <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  2. <script type="text/babel">
  3. // Your ES6 code
  4. </script>

一、let 和 const 命令

let 命令

基本用法

ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

  1. {
  2. let a = 10;
  3. var b = 1;
  4. }
  5. a // ReferenceError: a is not defined.
  6. b // 1

上面代码在代码块之中,分别用letvar声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。

for循环的计数器,就很合适使用let命令。

  1. for (let i = 0; i < 10; i++) {
  2. // ...
  3. }
  4. console.log(i);
  5. // ReferenceError: i is not defined

上面代码中,计数器i只在for循环体内有效,在循环体外引用就会报错。

for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。

  1. for (let i = 0; i < 3; i++) {
  2. let i = 'abc';
  3. console.log(i);
  4. }
  5. // abc
  6. // abc
  7. // abc

上面代码正确运行,输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域,有各自单独的作用域(同一个作用域不可使用 let 重复声明同一个变量)。

不存在变量提升

var命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。

为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

  1. // var 的情况
  2. console.log(foo); // 输出undefined
  3. var foo = 2;
  4. // let 的情况
  5. console.log(bar); // 报错ReferenceError
  6. let bar = 2;

上面代码中,变量foovar命令声明,会发生变量提升,即脚本开始运行时,变量foo已经存在了,但是没有值,所以会输出undefined。变量barlet命令声明,不会发生变量提升。这表示在声明它之前,变量bar是不存在的,这时如果用到它,就会抛出一个错误。

暂时性死区

只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

  1. var tmp = 123;
  2. if (true) {
  3. tmp = 'abc'; // ReferenceError
  4. let tmp;
  5. }

上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

ES6 明确规定,如果区块中存在letconst命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

  1. if (true) {
  2. // TDZ开始
  3. tmp = 'abc'; // ReferenceError
  4. console.log(tmp); // ReferenceError
  5. let tmp; // TDZ结束
  6. console.log(tmp); // undefined
  7. tmp = 123;
  8. console.log(tmp); // 123
  9. }

上面代码中,在let命令声明变量tmp之前,都属于变量tmp的“死区”。

“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

  1. typeof x; // ReferenceError
  2. let x;

上面代码中,变量x使用let命令声明,所以在声明之前,都属于x的“死区”,只要用到该变量就会报错。因此,typeof运行时就会抛出一个ReferenceError

作为比较,如果一个变量根本没有被声明,使用typeof反而不会报错。

  1. typeof undeclared_variable // "undefined"

ES6 规定暂时性死区和letconst语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。这样的错误在 ES5 是很常见的,现在有了这种规定,避免此类错误就很容易了。

总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

不允许重复声明

let不允许在相同作用域内,重复声明同一个变量。

  1. // 报错
  2. function func() {
  3. let a = 10;
  4. var a = 1;
  5. }
  6. // 报错
  7. function func() {
  8. let a = 10;
  9. let a = 1;
  10. }

因此,不能在函数内部重新声明参数。

  1. function func(arg) {
  2. let arg;
  3. }
  4. func() // 报错
  5. function func(arg) {
  6. {
  7. let arg;
  8. }
  9. }
  10. func() // 不报错

块级作用域

为什么需要块级作用域?

ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

第一种场景,内层变量可能会覆盖外层变量。

  1. var tmp = new Date();
  2. function f() {
  3. console.log(tmp);
  4. if (false) {
  5. var tmp = 'hello world';
  6. }
  7. }
  8. f(); // undefined

上面代码的原意是,if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量。但是,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景,用来计数的循环变量泄露为全局变量。

  1. var s = 'hello';
  2. for (var i = 0; i < s.length; i++) {
  3. console.log(s[i]);
  4. }
  5. console.log(i); // 5

上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。

ES6 的块级作用域

let实际上为 JavaScript 新增了块级作用域。

  1. function f1() {
  2. let n = 5;
  3. if (true) {
  4. let n = 10;
  5. }
  6. console.log(n); // 5
  7. }

上面的函数有两个代码块,都声明了变量n,运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n,最后输出的值才是 10。

ES6 允许块级作用域的任意嵌套。

  1. {{{{
  2. {let insane = 'Hello World'}
  3. console.log(insane); // 报错
  4. }}}};

上面代码使用了一个五层的块级作用域,每一层都是一个单独的作用域。第四层作用域无法读取第五层作用域的内部变量。

内层作用域可以定义外层作用域的同名变量。

  1. {{{{
  2. let insane = 'Hello World';
  3. {let insane = 'Hello World'}
  4. }}}};

块级作用域的出现,实际上使得获得广泛应用的匿名立即执行函数表达式(匿名 IIFE)不再必要了。

  1. // IIFE 写法
  2. (function () {
  3. var tmp = ...;
  4. ...
  5. }());
  6. // 块级作用域写法
  7. {
  8. let tmp = ...;
  9. ...
  10. }

块级作用域与函数声明

函数能不能在块级作用域之中声明?这是一个相当令人混淆的问题。

ES5 规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。

  1. // 情况一
  2. if (true) {
  3. function f() {}
  4. }
  5. // 情况二
  6. try {
  7. function f() {}
  8. } catch(e) {
  9. // ...
  10. }

上面两种函数声明,根据 ES5 的规定都是非法的。

但是,浏览器没有遵守这个规定,为了兼容以前的旧代码,还是支持在块级作用域之中声明函数,因此上面两种情况实际都能运行,不会报错。

还有一个需要注意的地方。ES6 的块级作用域必须有大括号,如果没有大括号,JavaScript 引擎就认为不存在块级作用域。

  1. // 第一种写法,报错
  2. if (true) let x = 1;
  3. // 第二种写法,不报错
  4. if (true) {
  5. let x = 1;
  6. }

上面代码中,第一种写法没有大括号,所以不存在块级作用域,而let只能出现在当前作用域的顶层,所以报错。第二种写法有大括号,所以块级作用域成立。

函数声明也是如此,严格模式下,函数只能声明在当前作用域的顶层。

  1. // 不报错
  2. 'use strict';
  3. if (true) {
  4. function f() {}
  5. }
  6. // 报错
  7. 'use strict';
  8. if (true)
  9. function f() {}

const 命令

基本用法

const声明一个只读的常量。一旦声明,常量的值就不能改变。

  1. const PI = 3.1415;
  2. PI // 3.1415
  3. PI = 3;
  4. // TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

  1. const foo;
  2. // SyntaxError: Missing initializer in const declaration

上面代码表示,对于const来说,只声明不赋值,就会报错。

const的作用域与let命令相同:只在声明所在的块级作用域内有效。

  1. if (true) {
  2. const MAX = 5;
  3. }
  4. MAX // Uncaught ReferenceError: MAX is not defined

const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。

  1. if (true) {
  2. console.log(MAX); // ReferenceError
  3. const MAX = 5;
  4. }

上面代码在常量MAX声明之前就调用,结果报错。

const声明的常量,也与let一样不可重复声明。

  1. var message = "Hello!";
  2. let age = 25;
  3. // 以下两行都会报错
  4. const message = "Goodbye!";
  5. const age = 30;

const 本质

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。

  1. const foo = {};
  2. // 为 foo 添加一个属性,可以成功
  3. foo.prop = 123;
  4. foo.prop // 123
  5. // 将 foo 指向另一个对象,就会报错
  6. foo = {}; // TypeError: "foo" is read-only

上面代码中,常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

顶层对象的属性

顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象。ES5 之中,顶层对象的属性与全局变量是等价的。

  1. window.a = 1;
  2. a // 1
  3. a = 2;
  4. window.a // 2

上面代码中,顶层对象的属性赋值与全局变量的赋值,是同一件事。

顶层对象的属性与全局变量挂钩,被认为是 JavaScript 语言最大的设计败笔之一。这样的设计带来了几个很大的问题,首先是没法在编译时就报出变量未声明的错误,只有运行时才能知道(因为全局变量可能是顶层对象的属性创造的,而属性的创造是动态的);其次,程序员很容易不知不觉地就创建了全局变量(比如打字出错);最后,顶层对象的属性是到处可以读写的,这非常不利于模块化编程。另一方面,window对象有实体含义,指的是浏览器的窗口对象,顶层对象是一个有实体含义的对象,也是不合适的。

ES6 为了改变这一点,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。也就是说,从 ES6 开始,全局变量将逐步与顶层对象的属性脱钩。

  1. var a = 1;
  2. // 如果在 Node 的 REPL 环境,可以写成 global.a
  3. // 或者采用通用方法,写成 this.a
  4. window.a // 1
  5. let b = 1;
  6. window.b // undefined

上面代码中,全局变量avar命令声明,所以它是顶层对象的属性;全局变量blet命令声明,所以它不是顶层对象的属性,返回undefined

二、变量的解构赋值

数组的解构赋值

基本用法

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

以前,为变量赋值,只能直接指定值。

  1. let a = 1;
  2. let b = 2;
  3. let c = 3;

ES6 允许写成下面这样。

  1. let [a, b, c] = [1, 2, 3];

上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

  1. let [foo, [[bar], baz]] = [1, [[2], 3]];
  2. foo // 1
  3. bar // 2
  4. baz // 3
  5. let [ , , third] = ["foo", "bar", "baz"];
  6. third // "baz"
  7. let [x, , y] = [1, 2, 3];
  8. x // 1
  9. y // 3
  10. let [head, ...tail] = [1, 2, 3, 4];
  11. head // 1
  12. tail // [2, 3, 4]
  13. let [x, y, ...z] = ['a'];
  14. x // "a"
  15. y // undefined
  16. z // []

如果解构不成功,变量的值就等于undefined

  1. let [foo] = [];
  2. let [bar, foo] = [1];

以上两种情况都属于解构不成功,foo的值都会等于undefined

另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

  1. let [x, y] = [1, 2, 3];
  2. x // 1
  3. y // 2
  4. let [a, [b], d] = [1, [2, 3], 4];
  5. a // 1
  6. b // 2
  7. d // 4

上面两个例子,都属于不完全解构,但是可以成功。

如果等号的右边不是数组(或者严格地说,不是可遍历的结构),那么将会报错。

  1. // 报错
  2. let [foo] = 1;
  3. let [foo] = false;
  4. let [foo] = NaN;
  5. let [foo] = undefined;
  6. let [foo] = null;
  7. let [foo] = {};

默认值

解构赋值允许指定默认值。

  1. let [foo = true] = [];
  2. foo // true
  3. let [x, y = 'b'] = ['a']; // x='a', y='b'
  4. let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。

  1. let [x = 1] = [undefined];
  2. x // 1
  3. let [x = 1] = [null];
  4. x // null

上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined

对象的解构赋值

简介

解构不仅可以用于数组,还可以用于对象。

  1. let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
  2. foo // "aaa"
  3. bar // "bbb"

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

  1. let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
  2. foo // "aaa"
  3. bar // "bbb"
  4. let { baz } = { foo: 'aaa', bar: 'bbb' };
  5. baz // undefined

上面代码的第一个例子,等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined

如果解构失败,变量的值等于undefined

  1. let {foo} = {bar: 'baz'};
  2. foo // undefined

上面代码中,等号右边的对象没有foo属性,所以变量foo取不到值,所以等于undefined

对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。

  1. // 例一
  2. let { floor, ceil } = Math;
  3. // 例二
  4. const { log } = console;
  5. log('hello') // hello

如果变量名与属性名不一致,必须写成下面这样。

  1. let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
  2. baz // "aaa"
  3. let obj = { first: 'hello', last: 'world' };
  4. let { first: f, last: l } = obj;
  5. f // 'hello'
  6. l // 'world'

这实际上说明,对象的解构赋值是下面形式的简写

  1. let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };

也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

  1. let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
  2. baz // "aaa"
  3. foo // error: foo is not defined

默认值

对象的解构也可以指定默认值。

  1. var {x = 3} = {};
  2. x // 3
  3. var {x, y = 5} = {x: 1};
  4. x // 1
  5. y // 5
  6. var {x: y = 3} = {};
  7. y // 3
  8. var {x: y = 3} = {x: 5};
  9. y // 5
  10. var { message: msg = 'Something went wrong' } = {};
  11. msg // "Something went wrong"

默认值生效的条件是,对象的属性值严格等于undefined

  1. var {x = 3} = {x: undefined};
  2. x // 3
  3. var {x = 3} = {x: null};
  4. x // null

上面代码中,属性x等于null,因为nullundefined不严格相等,所以是个有效的赋值,导致默认值3不会生效。

注意点

(1)如果要将一个已经声明的变量用于解构赋值,必须非常小心。

  1. // 错误的写法
  2. let x;
  3. {x} = {x: 1};
  4. // SyntaxError: syntax error

上面代码的写法会报错,因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。

  1. // 正确的写法
  2. let x;
  3. ({x} = {x: 1});

上面代码将整个解构赋值语句,放在一个圆括号里面,就可以正确执行。关于圆括号与解构赋值的关系,参见下文。

(2)解构赋值允许等号左边的模式之中,不放置任何变量名。因此,可以写出非常古怪的赋值表达式。

  1. ({} = [true, false]);
  2. ({} = 'abc');
  3. ({} = []);

上面的表达式虽然毫无意义,但是语法是合法的,可以执行。

(3)由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。

  1. let arr = [1, 2, 3];
  2. let {0 : first, [arr.length - 1] : last} = arr;
  3. first // 1
  4. last // 3

上面代码对数组进行对象解构。数组arr0键对应的值是1[arr.length - 1]就是2键,对应的值是3。方括号这种写法,属于“属性名表达式”(参见《对象的扩展》一章)。

字符串的解构赋值

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

  1. const [a, b, c, d, e] = 'hello';
  2. a // "h"
  3. b // "e"
  4. c // "l"
  5. d // "l"
  6. e // "o"

类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。

  1. let {length : len} = 'hello';
  2. len // 5

函数参数的解构赋值

函数的参数也可以使用解构赋值。

  1. function add([x, y]){
  2. return x + y;
  3. }
  4. add([1, 2]); // 3

上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量xy。对于函数内部的代码来说,它们能感受到的参数就是xy

下面是另一个例子。

  1. [[1, 2], [3, 4]].map(([a, b]) => a + b);
  2. // [ 3, 7 ]

函数参数的解构也可以使用默认值。

  1. function move({x = 0, y = 0} = {}) {
  2. return [x, y];
  3. }
  4. move({x: 3, y: 8}); // [3, 8]
  5. move({x: 3}); // [3, 0]
  6. move({}); // [0, 0]
  7. move(); // [0, 0]

上面代码中,函数move的参数是一个对象,通过对这个对象进行解构,得到变量xy的值。如果解构失败,xy等于默认值。

圆括号问题

解构赋值虽然很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式,还是表达式,没有办法从一开始就知道,必须解析到(或解析不到)等号才能知道。

由此带来的问题是,如果模式中出现圆括号怎么处理。ES6 的规则是,只要有可能导致解构的歧义,就不得使用圆括号。

但是,这条规则实际上不那么容易辨别,处理起来相当麻烦。因此,建议只要有可能,就不要在模式中放置圆括号。

不能使用圆括号的情况

以下三种解构赋值不得使用圆括号。

(1)变量声明语句

  1. // 全部报错
  2. let [(a)] = [1];
  3. let {x: (c)} = {};
  4. let ({x: c}) = {};
  5. let {(x: c)} = {};
  6. let {(x): c} = {};
  7. let { o: ({ p: p }) } = { o: { p: 2 } };

上面 6 个语句都会报错,因为它们都是变量声明语句,模式不能使用圆括号。

(2)函数参数

函数参数也属于变量声明,因此不能带有圆括号。

  1. // 报错
  2. function f([(z)]) { return z; }
  3. // 报错
  4. function f([z,(x)]) { return x; }

(3)赋值语句的模式

  1. // 全部报错
  2. ({ p: a }) = { p: 42 };
  3. ([a]) = [5];

上面代码将整个模式放在圆括号之中,导致报错。

  1. // 报错
  2. [({ p: a }), { x: c }] = [{}, {}];

上面代码将一部分模式放在圆括号之中,导致报错。

可以使用圆括号的情况

可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号。

  1. [(b)] = [3]; // 正确
  2. ({ p: (d) } = {}); // 正确
  3. [(parseInt.prop)] = [3]; // 正确

上面三行语句都可以正确执行,因为首先它们都是赋值语句,而不是声明语句;其次它们的圆括号都不属于模式的一部分。第一行语句中,模式是取数组的第一个成员,跟圆括号无关;第二行语句中,模式是p,而不是d;第三行语句与第一行语句的性质一致。

用途

变量的解构赋值用途很多。

(1)交换变量的值

  1. let x = 1;
  2. let y = 2;
  3. [x, y] = [y, x];

上面代码交换变量xy的值,这样的写法不仅简洁,而且易读,语义非常清晰。

(2)从函数返回多个值

函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

  1. // 返回一个数组
  2. function example() {
  3. return [1, 2, 3];
  4. }
  5. let [a, b, c] = example();
  6. // 返回一个对象
  7. function example() {
  8. return {
  9. foo: 1,
  10. bar: 2
  11. };
  12. }
  13. let { foo, bar } = example();

(3)函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

  1. // 参数是一组有次序的值
  2. function f([x, y, z]) { ... }
  3. f([1, 2, 3]);
  4. // 参数是一组无次序的值
  5. function f({x, y, z}) { ... }
  6. f({z: 3, y: 2, x: 1});

(4)提取 JSON 数据

解构赋值对提取 JSON 对象中的数据,尤其有用。

  1. let jsonData = {
  2. id: 42,
  3. status: "OK",
  4. data: [867, 5309]
  5. };
  6. let { id, status, data: number } = jsonData;
  7. console.log(id, status, number);
  8. // 42, "OK", [867, 5309]

上面代码可以快速提取 JSON 数据的值。

三、字符串的扩展

模板字符串

传统的 JavaScript 语言,输出模板通常是这样写的。

  1. var str=
  2. 'There are <b>' + basket.count + '</b> ' +
  3. 'items in your basket, ' +
  4. '<em>' + basket.onSale +
  5. '</em> are on sale!'
  6. ;

上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。

  1. var str=`
  2. There are <b>${basket.count}</b> items
  3. in your basket, <em>${basket.onSale}</em>
  4. are on sale!
  5. `;

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

实例方法:includes(), startsWith(), endsWith()

传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
  1. let s = 'Hello world!';
  2. s.startsWith('Hello') // true
  3. s.endsWith('!') // true
  4. s.includes('o') // true

实例方法:repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次。

  1. 'x'.repeat(3) // "xxx"
  2. 'hello'.repeat(2) // "hellohello"
  3. 'na'.repeat(0) // ""

参数如果是小数,会被取整。

  1. 'na'.repeat(2.9) // "nana"

实例方法:padStart(),padEnd()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。

  1. 'x'.padStart(5, 'ab') // 'ababx'
  2. 'x'.padStart(4, 'ab') // 'abax'
  3. 'x'.padEnd(5, 'ab') // 'xabab'
  4. 'x'.padEnd(4, 'ab') // 'xaba'

上面代码中,padStart()padEnd()一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。

如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。

  1. 'xxx'.padStart(2, 'ab') // 'xxx'
  2. 'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。

  1. 'abc'.padStart(10, '0123456789')
  2. // '0123456abc'

如果省略第二个参数,默认使用空格补全长度。

  1. 'x'.padStart(4) // ' x'
  2. 'x'.padEnd(4) // 'x '

padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

  1. '1'.padStart(10, '0') // "0000000001"
  2. '12'.padStart(10, '0') // "0000000012"
  3. '123456'.padStart(10, '0') // "0000123456"

另一个用途是提示字符串格式。

  1. '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
  2. '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

实例方法:trimStart(),trimEnd()

ES2019 对字符串实例新增了trimStart()trimEnd()这两个方法。它们的行为与trim()一致,trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。

  1. const s = ' abc ';
  2. s.trim() // "abc"
  3. s.trimStart() // "abc "
  4. s.trimEnd() // " abc"

上面代码中,trimStart()只消除头部的空格,保留尾部的空格。trimEnd()也是类似行为。

除了空格键,这两个方法对字符串头部(或尾部)的 tab 键、换行符等不可见的空白符号也有效。

实例方法:matchAll()

matchAll()方法返回一个正则表达式在当前字符串的所有匹配。

实例方法:replaceAll()

历史上,字符串的实例方法replace()只能替换第一个匹配。

  1. 'aabbcc'.replace('b', '_')
  2. // 'aa_bcc'

上面例子中,replace()只将第一个b替换成了下划线。

如果要替换所有的匹配,不得不使用正则表达式的g修饰符。

  1. 'aabbcc'.replace(/b/g, '_')
  2. // 'aa__cc'

正则表达式毕竟不是那么方便和直观,ES2021 引入了replaceAll()方法,可以一次性替换所有匹配。

  1. 'aabbcc'.replaceAll('b', '_')
  2. // 'aa__cc'

它的用法与replace()相同,返回一个新字符串,不会改变原字符串。

  1. String.prototype.replaceAll(searchValue, replacement)

实例方法:at()

at()方法接受一个整数作为参数,返回参数指定位置的字符,支持负索引(即倒数的位置)。

  1. const str = 'hello';
  2. str.at(1) // "e"
  3. str.at(-1) // "o"

如果参数位置超出了字符串范围,at()返回undefined

该方法来自数组添加的at()方法。

四、数值的扩展

Number.isFinite(), Number.isNaN()

ES6 在Number对象上,新提供了Number.isFinite()Number.isNaN()两个方法。

Number.isFinite()用来检查一个数值是否为有限的(finite),即不是Infinity

  1. Number.isFinite(15); // true
  2. Number.isFinite(0.8); // true
  3. Number.isFinite(NaN); // false
  4. Number.isFinite(Infinity); // false
  5. Number.isFinite(-Infinity); // false
  6. Number.isFinite('foo'); // false
  7. Number.isFinite('15'); // false
  8. Number.isFinite(true); // false

注意,如果参数类型不是数值,Number.isFinite一律返回false

Number.isNaN()用来检查一个值是否为NaN

  1. Number.isNaN(NaN) // true
  2. Number.isNaN(15) // false
  3. Number.isNaN('15') // false
  4. Number.isNaN(true) // false
  5. Number.isNaN(9/NaN) // true
  6. Number.isNaN('true' / 0) // true
  7. Number.isNaN('true' / 'true') // true

如果参数类型不是NaNNumber.isNaN一律返回false

它们与传统的全局方法isFinite()isNaN()的区别在于,传统方法先调用Number()将非数值的值转为数值,再进行判断,而这两个新方法只对数值有效,Number.isFinite()对于非数值一律返回false, Number.isNaN()只有对于NaN才返回true,非NaN一律返回false

  1. isFinite(25) // true
  2. isFinite("25") // true
  3. Number.isFinite(25) // true
  4. Number.isFinite("25") // false
  5. isNaN(NaN) // true
  6. isNaN("NaN") // true
  7. Number.isNaN(NaN) // true
  8. Number.isNaN("NaN") // false
  9. Number.isNaN(1) // false

Number.parseInt(), Number.parseFloat()

ES6 将全局方法parseInt()parseFloat(),移植到Number对象上面,行为完全保持不变。

  1. // ES5的写法
  2. parseInt('12.34') // 12
  3. parseFloat('123.45#') // 123.45
  4. // ES6的写法
  5. Number.parseInt('12.34') // 12
  6. Number.parseFloat('123.45#') // 123.45

这样做的目的,是逐步减少全局性方法,使得语言逐步模块化。

  1. Number.parseInt === parseInt // true
  2. Number.parseFloat === parseFloat // true

Math 对象的扩展

ES6 在 Math 对象上新增了 17 个与数学相关的方法。所有这些方法都是静态方法,只能在 Math 对象上调用。

Math.trunc()

Math.trunc方法用于去除一个数的小数部分,返回整数部分。

  1. Math.trunc(4.1) // 4
  2. Math.trunc(4.9) // 4
  3. Math.trunc(-4.1) // -4
  4. Math.trunc(-4.9) // -4
  5. Math.trunc(-0.1234) // -0

对于非数值,Math.trunc内部使用Number方法将其先转为数值。

  1. Math.trunc('123.456') // 123
  2. Math.trunc(true) //1
  3. Math.trunc(false) // 0
  4. Math.trunc(null) // 0

对于空值和无法截取整数的值,返回NaN

  1. Math.trunc(NaN); // NaN
  2. Math.trunc('foo'); // NaN
  3. Math.trunc(); // NaN
  4. Math.trunc(undefined) // NaN

Math.sign()

Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。

它会返回五种值。

  • 参数为正数,返回+1
  • 参数为负数,返回-1
  • 参数为 0,返回+0
  • 参数为-0,返回-0;
  • 其他值,返回NaN
  1. Math.sign(-5) // -1
  2. Math.sign(5) // +1
  3. Math.sign(0) // +0
  4. Math.sign(-0) // -0
  5. Math.sign(NaN) // NaN

如果参数是非数值,会自动转为数值。对于那些无法转为数值的值,会返回NaN

  1. Math.sign('') // 0
  2. Math.sign(true) // +1
  3. Math.sign(false) // 0
  4. Math.sign(null) // 0
  5. Math.sign('9') // +1
  6. Math.sign('foo') // NaN
  7. Math.sign() // NaN
  8. Math.sign(undefined) // NaN

BigInt 数据类型

简介

JavaScript 所有数字都保存成 64 位浮点数,这给数值的表示带来了两大限制。一是数值的精度只能到 53 个二进制位(相当于 16 个十进制位),大于这个范围的整数,JavaScript 是无法精确表示,这使得 JavaScript 不适合进行科学和金融方面的精确计算。二是大于或等于2的1024次方的数值,JavaScript 无法表示,会返回Infinity

  1. // 超过 53 个二进制位的数值,无法保持精度
  2. Math.pow(2, 53) === Math.pow(2, 53) + 1 // true
  3. // 超过 2 的 1024 次方的数值,无法表示
  4. Math.pow(2, 1024) // Infinity

ES2020 引入了一种新的数据类型 BigInt(大整数),来解决这个问题,这是 ECMAScript 的第八种数据类型。BigInt 只用来表示整数,没有位数的限制,任何位数的整数都可以精确表示。

  1. const a = 2172141653n;
  2. const b = 15346349309n;
  3. // BigInt 可以保持精度
  4. a * b // 33334444555566667777n
  5. // 普通整数无法保持精度
  6. Number(a) * Number(b) // 33334444555566670000

为了与 Number 类型区别,BigInt 类型的数据必须添加后缀n

  1. 1234 // 普通整数
  2. 1234n // BigInt
  3. // BigInt 的运算
  4. 1n + 2n // 3n

BigInt 同样可以使用各种进制表示,都要加上后缀n

  1. 0b1101n // 二进制
  2. 0o777n // 八进制
  3. 0xFFn // 十六进制

BigInt 与普通整数是两种值,它们之间并不相等。

  1. 42n === 42 // false

typeof运算符对于 BigInt 类型的数据返回bigint

  1. typeof 123n // 'bigint'

BigInt 可以使用负号(-),但是不能使用正号(+),因为会与 asm.js 冲突。

  1. -42n // 正确
  2. +42n // 报错

BigInt 函数

JavaScript 原生提供BigInt函数,可以用它生成 BigInt 类型的数值。转换规则基本与Number()一致,将其他类型的值转为 BigInt。

  1. BigInt(123) // 123n
  2. BigInt('123') // 123n
  3. BigInt(false) // 0n
  4. BigInt(true) // 1n

BigInt()函数必须有参数,而且参数必须可以正常转为数值,下面的用法都会报错。

  1. new BigInt() // TypeError
  2. BigInt(undefined) //TypeError
  3. BigInt(null) // TypeError
  4. BigInt('123n') // SyntaxError
  5. BigInt('abc') // SyntaxError

可以使用Boolean()Number()String()这三个方法,将 BigInt 可以转为布尔值、数值和字符串类型。

  1. Boolean(0n) // false
  2. Boolean(1n) // true
  3. Number(1n) // 1
  4. String(1n) // "1"

上面代码中,注意最后一个例子,转为字符串时后缀n会消失。

另外,取反运算符(!)也可以将 BigInt 转为布尔值。

  1. !0n // true
  2. !1n // false

数学运算

数学运算方面,BigInt 类型的+-***这四个二元运算符,与 Number 类型的行为一致。除法运算/会舍去小数部分,返回一个整数。

  1. 9n / 5n
  2. // 1n

五、函数扩展

rest 参数

ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

  1. function add(...values) {
  2. let sum = 0;
  3. for (var val of values) {
  4. sum += val;
  5. }
  6. return sum;
  7. }
  8. add(2, 5, 3) // 10

上面代码的add函数是一个求和函数,利用 rest 参数,可以向该函数传入任意数目的参数。

箭头函数

基本用法

ES6 允许使用“箭头”(=>)定义函数。

  1. var f = v => v;
  2. // 等同于
  3. var f = function (v) {
  4. return v;
  5. };

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

  1. var f = () => 5;
  2. // 等同于
  3. var f = function () { return 5 };
  4. var sum = (num1, num2) => num1 + num2;
  5. // 等同于
  6. var sum = function(num1, num2) {
  7. return num1 + num2;
  8. };

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

  1. var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。

  1. // 报错
  2. let getTempItem = id => { id: id, name: "Temp" };
  3. // 不报错
  4. let getTempItem = id => ({ id: id, name: "Temp" });

使用注意点

箭头函数有几个使用注意点。

(1)箭头函数没有自己的this对象。

(2)不可以当作构造函数,也就是说,不可以对箭头函数使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

上面四点中,最重要的是第一点。对于普通函数来说,内部的this指向函数运行时所在的对象,但是这一点对箭头函数不成立。它没有自己的this对象,内部的this就是定义时上层作用域中的this。也就是说,箭头函数内部的this指向是固定的,相比之下,普通函数的this指向是可变的。

  1. function foo() {
  2. setTimeout(() => {
  3. console.log('id:', this.id);
  4. }, 100);
  5. }
  6. var id = 21;
  7. foo.call({ id: 42 });
  8. // id: 42

上面代码中,setTimeout()的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象({id: 42}),所以打印出来的是42

不适用场合

由于箭头函数使得this从“动态”变成“静态”,下面两个场合不应该使用箭头函数。

第一个场合是定义对象的方法,且该方法内部包括this

  1. const cat = {
  2. lives: 9,
  3. jumps: () => {
  4. this.lives--;
  5. }
  6. }

上面代码中,cat.jumps()方法是一个箭头函数,这是错误的。调用cat.jumps()时,如果是普通函数,该方法内部的this指向cat;如果写成上面那样的箭头函数,使得this指向全局对象,因此不会得到预期结果。这是因为对象不构成单独的作用域,导致jumps箭头函数定义时的作用域就是全局作用域。

第二个场合是需要动态this的时候,也不应使用箭头函数。

  1. var button = document.getElementById('press');
  2. button.addEventListener('click', () => {
  3. this.classList.toggle('on');
  4. });

上面代码运行时,点击按钮会报错,因为button的监听函数是一个箭头函数,导致里面的this就是全局对象。如果改成普通函数,this就会动态指向被点击的按钮对象。

另外,如果函数体很复杂,有许多行,或者函数内部有大量的读写操作,不单纯是为了计算值,这时也不应该使用箭头函数,而是要使用普通函数,这样可以提高代码可读性。

尾调用优化

什么是尾调用?

尾调用(Tail Call)是函数式编程的一个重要概念,本身非常简单,一句话就能说清楚,就是指某个函数的最后一步是调用另一个函数。

  1. function f(x){
  2. return g(x);
  3. }

上面代码中,函数f的最后一步是调用函数g,这就叫尾调用。

以下三种情况,都不属于尾调用。

  1. // 情况一
  2. function f(x){
  3. let y = g(x);
  4. return y;
  5. }
  6. // 情况二
  7. function f(x){
  8. return g(x) + 1;
  9. }
  10. // 情况三
  11. function f(x){
  12. g(x);
  13. }

上面代码中,情况一是调用函数g之后,还有赋值操作,所以不属于尾调用,即使语义完全一样。情况二也属于调用后还有操作,即使写在一行内。情况三等同于下面的代码。

  1. function f(x){
  2. g(x);
  3. return undefined;
  4. }

尾调用不一定出现在函数尾部,只要是最后一步操作即可。

  1. function f(x) {
  2. if (x > 0) {
  3. return m(x)
  4. }
  5. return n(x);
  6. }

上面代码中,函数mn都属于尾调用,因为它们都是函数f的最后一步操作。

尾调用优化

尾调用之所以与其他调用不同,就在于它的特殊的调用位置。

我们知道,函数调用会在内存形成一个“调用记录”,又称“调用帧”(call frame),保存调用位置和内部变量等信息。如果在函数A的内部调用函数B,那么在A的调用帧上方,还会形成一个B的调用帧。等到B运行结束,将结果返回到AB的调用帧才会消失。如果函数B内部还调用函数C,那就还有一个C的调用帧,以此类推。所有的调用帧,就形成一个“调用栈”(call stack)。

尾调用由于是函数的最后一步操作,所以不需要保留外层函数的调用帧,因为调用位置、内部变量等信息都不会再用到了,只要直接用内层函数的调用帧,取代外层函数的调用帧就可以了。

  1. function f() {
  2. let m = 1;
  3. let n = 2;
  4. return g(m + n);
  5. }
  6. f();
  7. // 等同于
  8. function f() {
  9. return g(3);
  10. }
  11. f();
  12. // 等同于
  13. g(3);

上面代码中,如果函数g不是尾调用,函数f就需要保存内部变量mn的值、g的调用位置等信息。但由于调用g之后,函数f就结束了,所以执行到最后一步,完全可以删除f(x)的调用帧,只保留g(3)的调用帧。

这就叫做“尾调用优化”(Tail call optimization),即只保留内层函数的调用帧。如果所有函数都是尾调用,那么完全可以做到每次执行时,调用帧只有一项,这将大大节省内存。这就是“尾调用优化”的意义。

注意,只有不再用到外层函数的内部变量,内层函数的调用帧才会取代外层函数的调用帧,否则就无法进行“尾调用优化”。

  1. function addOne(a){
  2. var one = 1;
  3. function inner(b){
  4. return b + one;
  5. }
  6. return inner(a);
  7. }

上面的函数不会进行尾调用优化,因为内层函数inner用到了外层函数addOne的内部变量one

注意,目前只有 Safari 浏览器支持尾调用优化,Chrome 和 Firefox 都不支持。

尾递归

函数调用自身,称为递归。如果尾调用自身,就称为尾递归。

递归非常耗费内存,因为需要同时保存成千上百个调用帧,很容易发生“栈溢出”错误(stack overflow)。但对于尾递归来说,由于只存在一个调用帧,所以永远不会发生“栈溢出”错误。

  1. function factorial(n) {
  2. if (n === 1) return 1;
  3. return n * factorial(n - 1);
  4. }
  5. factorial(5) // 120

上面代码是一个阶乘函数,计算n的阶乘,最多需要保存n个调用记录,复杂度 O(n) 。

如果改写成尾递归,只保留一个调用记录,复杂度 O(1) 。

  1. function factorial(n, total) {
  2. if (n === 1) return total;
  3. return factorial(n - 1, n * total);
  4. }
  5. factorial(5, 1) // 120

还有一个比较著名的例子,就是计算 Fibonacci 数列,也能充分说明尾递归优化的重要性。

非尾递归的 Fibonacci 数列实现如下。

  1. function Fibonacci (n) {
  2. if ( n <= 1 ) {return 1};
  3. return Fibonacci(n - 1) + Fibonacci(n - 2);
  4. }
  5. Fibonacci(10) // 89
  6. Fibonacci(100) // 超时
  7. Fibonacci(500) // 超时

尾递归优化过的 Fibonacci 数列实现如下。

  1. function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
  2. if( n <= 1 ) {return ac2};
  3. return Fibonacci2 (n - 1, ac2, ac1 + ac2);
  4. }
  5. Fibonacci2(100) // 573147844013817200000
  6. Fibonacci2(1000) // 7.0330367711422765e+208
  7. Fibonacci2(10000) // Infinity

由此可见,“尾调用优化”对递归操作意义重大,所以一些函数式编程语言将其写入了语言规格。ES6 亦是如此,第一次明确规定,所有 ECMAScript 的实现,都必须部署“尾调用优化”。这就是说,ES6 中只要使用尾递归,就不会发生栈溢出(或者层层递归造成的超时),相对节省内存。

数组的扩展

扩展运算符

含义

扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

  1. console.log(...[1, 2, 3])
  2. // 1 2 3
  3. console.log(1, ...[2, 3, 4], 5)
  4. // 1 2 3 4 5
  5. [...document.querySelectorAll('div')]
  6. // [<div>, <div>, <div>]

该运算符主要用于函数调用。

  1. function push(array, ...items) {
  2. array.push(...items);
  3. }
  4. function add(x, y) {
  5. return x + y;
  6. }
  7. const numbers = [4, 38];
  8. add(...numbers) // 42

上面代码中,array.push(...items)add(...numbers)这两行,都是函数的调用,它们都使用了扩展运算符。该运算符将一个数组,变为参数序列。

扩展运算符与正常的函数参数可以结合使用,非常灵活。

  1. function f(v, w, x, y, z) { }
  2. const args = [0, 1];
  3. f(-1, ...args, 2, ...[3]);

扩展运算符后面还可以放置表达式。

  1. const arr = [
  2. ...(x > 0 ? ['a'] : []),
  3. 'b',
  4. ];

如果扩展运算符后面是一个空数组,则不产生任何效果。

  1. [...[], 1]
  2. // [1]

注意,只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错。

  1. (...[1, 2])
  2. // Uncaught SyntaxError: Unexpected number
  3. console.log((...[1, 2]))
  4. // Uncaught SyntaxError: Unexpected number
  5. console.log(...[1, 2])
  6. // 1 2

上面三种情况,扩展运算符都放在圆括号里面,但是前两种情况会报错,因为扩展运算符所在的括号不是函数调用。

替代函数的 apply() 方法

由于扩展运算符可以展开数组,所以不再需要apply()方法将数组转为函数的参数了。

  1. // ES5 的写法
  2. function f(x, y, z) {
  3. // ...
  4. }
  5. var args = [0, 1, 2];
  6. f.apply(null, args);
  7. // ES6 的写法
  8. function f(x, y, z) {
  9. // ...
  10. }
  11. let args = [0, 1, 2];
  12. f(...args);

下面是扩展运算符取代apply()方法的一个实际的例子,应用Math.max()方法,简化求出一个数组最大元素的写法。

  1. // ES5 的写法
  2. Math.max.apply(null, [14, 3, 77])
  3. // ES6 的写法
  4. Math.max(...[14, 3, 77])
  5. // 等同于
  6. Math.max(14, 3, 77);

上面代码中,由于 JavaScript 不提供求数组最大元素的函数,所以只能套用Math.max()函数,将数组转为一个参数序列,然后求最大值。有了扩展运算符以后,就可以直接用Math.max()了。

扩展运算符的应用

(1)复制数组

数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。

  1. const a1 = [1, 2];
  2. const a2 = a1;
  3. a2[0] = 2;
  4. a1 // [2, 2]

上面代码中,a2并不是a1的克隆,而是指向同一份数据的另一个指针。修改a2,会直接导致a1的变化。

ES5 只能用变通方法来复制数组。

  1. const a1 = [1, 2];
  2. const a2 = a1.concat();
  3. a2[0] = 2;
  4. a1 // [1, 2]

上面代码中,a1会返回原数组的克隆,再修改a2就不会对a1产生影响。

扩展运算符提供了复制数组的简便写法。

  1. const a1 = [1, 2];
  2. // 写法一
  3. const a2 = [...a1];
  4. // 写法二
  5. const [...a2] = a1;

上面的两种写法,a2都是a1的克隆。

(2)合并数组

扩展运算符提供了数组合并的新写法。

  1. const arr1 = ['a', 'b'];
  2. const arr2 = ['c'];
  3. const arr3 = ['d', 'e'];
  4. // ES5 的合并数组
  5. arr1.concat(arr2, arr3);
  6. // [ 'a', 'b', 'c', 'd', 'e' ]
  7. // ES6 的合并数组
  8. [...arr1, ...arr2, ...arr3]
  9. // [ 'a', 'b', 'c', 'd', 'e' ]

(3)与解构赋值结合

  1. const [first, ...rest] = [1, 2, 3, 4, 5];
  2. first // 1
  3. rest // [2, 3, 4, 5]
  4. const [first, ...rest] = [];
  5. first // undefined
  6. rest // []
  7. const [first, ...rest] = ["foo"];
  8. first // "foo"
  9. rest // []

(4)字符串

扩展运算符还可以将字符串转为真正的数组。

  1. [...'hello']
  2. // [ "h", "e", "l", "l", "o" ]

(5)实现了 Iterator 接口的对象

任何定义了遍历器(Iterator)接口的对象。

  1. let nodeList = document.querySelectorAll('div');
  2. let array = [...nodeList];

上面代码中,querySelectorAll()方法返回的是一个NodeList对象。它不是数组,而是一个类似数组的对象。这时,扩展运算符可以将其转为真正的数组,原因就在于NodeList对象实现了 Iterator。

上面代码中,先定义了Number对象的遍历器接口,扩展运算符将5自动转成Number实例以后,就会调用这个接口,就会返回自定义的结果。

对于那些没有部署 Iterator 接口的类似数组的对象,扩展运算符就无法将其转为真正的数组。

  1. let arrayLike = {
  2. '0': 'a',
  3. '1': 'b',
  4. '2': 'c',
  5. length: 3
  6. };
  7. // TypeError: Cannot spread non-iterable object.
  8. let arr = [...arrayLike];

上面代码中,arrayLike是一个类似数组的对象,但是没有部署 Iterator 接口,扩展运算符就会报错。这时,可以改为使用Array.from方法将arrayLike转为真正的数组。

扩展运算符内部调用的是数据结构的 Iterator 接口,因此只要具有 Iterator 接口的对象,都可以使用扩展运算符,比如 Map 结构。

  1. let map = new Map([
  2. [1, 'one'],
  3. [2, 'two'],
  4. [3, 'three'],
  5. ]);
  6. let arr = [...map.keys()]; // [1, 2, 3]

Generator 函数运行后,返回一个遍历器对象,因此也可以使用扩展运算符。

Array.from()

Array.from()方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

下面是一个类似数组的对象,Array.from()将它转为真正的数组。

  1. let arrayLike = {
  2. '0': 'a',
  3. '1': 'b',
  4. '2': 'c',
  5. length: 3
  6. };
  7. // ES5 的写法
  8. var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
  9. // ES6 的写法
  10. let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

实际应用中,常见的类似数组的对象是 DOM 操作返回的 NodeList 集合,以及函数内部的arguments对象。Array.from()都可以将它们转为真正的数组。

  1. // NodeList 对象
  2. let ps = document.querySelectorAll('p');
  3. Array.from(ps).filter(p => {
  4. return p.textContent.length > 100;
  5. });
  6. // arguments 对象
  7. function foo() {
  8. var args = Array.from(arguments);
  9. // ...
  10. }

上面代码中,querySelectorAll()方法返回的是一个类似数组的对象,可以将这个对象转为真正的数组,再使用filter()方法。

只要是部署了 Iterator 接口的数据结构,Array.from()都能将其转为数组。

  1. Array.from('hello')
  2. // ['h', 'e', 'l', 'l', 'o']
  3. let namesSet = new Set(['a', 'b'])
  4. Array.from(namesSet) // ['a', 'b']

上面代码中,字符串和 Set 结构都具有 Iterator 接口,因此可以被Array.from()转为真正的数组。

如果参数是一个真正的数组,Array.from()会返回一个一模一样的新数组。

  1. Array.from([1, 2, 3])
  2. // [1, 2, 3]

值得提醒的是,扩展运算符(...)也可以将某些数据结构转为数组。

  1. // arguments对象
  2. function foo() {
  3. const args = [...arguments];
  4. }
  5. // NodeList对象
  6. [...document.querySelectorAll('div')]

扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。Array.from()方法还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from()方法转为数组,而此时扩展运算符就无法转换。

  1. Array.from({ length: 3 });
  2. // [ undefined, undefined, undefined ]

Array.from()还可以接受一个函数作为第二个参数,作用类似于数组的map()方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

  1. Array.from(arrayLike, x => x * x);
  2. // 等同于
  3. Array.from(arrayLike).map(x => x * x);
  4. Array.from([1, 2, 3], (x) => x * x)
  5. // [1, 4, 9]

如果map()函数里面用到了this关键字,还可以传入Array.from()的第三个参数,用来绑定this

Array.from()可以将各种值转为真正的数组,并且还提供map功能。这实际上意味着,只要有一个原始的数据结构,你就可以先对它的值进行处理,然后转成规范的数组结构,进而就可以使用数量众多的数组方法。

  1. Array.from({ length: 2 }, () => 'jack')
  2. // ['jack', 'jack']

Array.of()

Array.of()方法用于将一组值,转换为数组。

  1. Array.of(3, 11, 8) // [3,11,8]
  2. Array.of(3) // [3]
  3. Array.of(3).length // 1

这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。

  1. Array() // []
  2. Array(3) // [, , ,]
  3. Array(3, 11, 8) // [3, 11, 8]

上面代码中,Array()方法没有参数、一个参数、三个参数时,返回的结果都不一样。只有当参数个数不少于 2 个时,Array()才会返回由参数组成的新数组。参数只有一个正整数时,实际上是指定数组的长度。

Array.of()基本上可以用来替代Array()new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。

  1. Array.of() // []
  2. Array.of(undefined) // [undefined]
  3. Array.of(1) // [1]
  4. Array.of(1, 2) // [1, 2]

Array.of()总是返回参数值组成的数组。如果没有参数,就返回一个空数组。

实例方法:copyWithin()

数组实例的copyWithin()方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

  1. Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数。

  • target(必需):从该位置开始替换数据。如果为负值,表示倒数。
  • start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
  • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。

这三个参数都应该是数值,如果不是,会自动转为数值。

  1. [1, 2, 3, 4, 5].copyWithin(0, 3)
  2. // [4, 5, 3, 4, 5]

上面代码表示将从 3 号位直到数组结束的成员(4 和 5),复制到从 0 号位开始的位置,结果覆盖了原来的 1 和 2。

实例方法:find() 和 findIndex()

数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined

  1. [1, 4, -5, 10].find((n) => n < 0)
  2. // -5

上面代码找出数组中第一个小于 0 的成员。

  1. [1, 5, 10, 15].find(function(value, index, arr) {
  2. return value > 9;
  3. }) // 10

上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。

数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

  1. [1, 5, 10, 15].findIndex(function(value, index, arr) {
  2. return value > 9;
  3. }) // 2

实例方法:fill()

fill方法使用给定值,填充一个数组。

  1. ['a', 'b', 'c'].fill(7)
  2. // [7, 7, 7]
  3. new Array(3).fill(7)
  4. // [7, 7, 7]

上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。

fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

  1. ['a', 'b', 'c'].fill(7, 1, 2)
  2. // ['a', 7, 'c']

上面代码表示,fill方法从 1 号位开始,向原数组填充 7,到 2 号位之前结束。

实例方法:entries(),keys() 和 values()

ES6 提供三个新的方法——entries()keys()values()——用于遍历数组。它们都返回一个遍历器对象可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

  1. for (let index of ['a', 'b'].keys()) {
  2. console.log(index);
  3. }
  4. // 0
  5. // 1
  6. for (let elem of ['a', 'b'].values()) {
  7. console.log(elem);
  8. }
  9. // 'a'
  10. // 'b'
  11. for (let [index, elem] of ['a', 'b'].entries()) {
  12. console.log(index, elem);
  13. }
  14. // 0 "a"
  15. // 1 "b"

实例方法:includes()

Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。

  1. [1, 2, 3].includes(2) // true
  2. [1, 2, 3].includes(4) // false
  3. [1, 2, NaN].includes(NaN) // true

另外,Map 和 Set 数据结构有一个has方法,需要注意与includes区分。

  • Map 结构的has方法,是用来查找键名的,比如Map.prototype.has(key)WeakMap.prototype.has(key)Reflect.has(target, propertyKey)
  • Set 结构的has方法,是用来查找值的,比如Set.prototype.has(value)WeakSet.prototype.has(value)

实例方法:flat(),flatMap()

数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。

  1. [1, 2, [3, 4]].flat()
  2. // [1, 2, 3, 4]

上面代码中,原数组的成员里面有一个数组,flat()方法将子数组的成员取出来,添加在原来的位置。

flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。

  1. [1, 2, [3, [4, 5]]].flat()
  2. // [1, 2, 3, [4, 5]]
  3. [1, 2, [3, [4, 5]]].flat(2)
  4. // [1, 2, 3, 4, 5]

上面代码中,flat()的参数为2,表示要“拉平”两层的嵌套数组。

如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。

  1. [1, [2, [3]]].flat(Infinity)
  2. // [1, 2, 3]

如果原数组有空位,flat()方法会跳过空位。

  1. [1, 2, , 4, 5].flat()
  2. // [1, 2, 4, 5]

flatMap()方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。

  1. // 相当于 [[2, 4], [3, 6], [4, 8]].flat()
  2. [2, 3, 4].flatMap((x) => [x, x * 2])
  3. // [2, 4, 3, 6, 4, 8]

实例方法:at()

长久以来,JavaScript 不支持数组的负索引,如果要引用数组的最后一个成员,不能写成arr[-1],只能使用arr[arr.length - 1]

这是因为方括号运算符[]在 JavaScript 语言里面,不仅用于数组,还用于对象。对于对象来说,方括号里面就是键名,比如obj[1]引用的是键名为字符串1的键,同理obj[-1]引用的是键名为字符串-1的键。由于 JavaScript 的数组是特殊的对象,所以方括号里面的负数无法再有其他语义了,也就是说,不可能添加新语法来支持负索引。

为了解决这个问题,现在有一个提案,为数组实例增加了at()方法,接受一个整数作为参数,返回对应位置的成员,支持负索引。这个方法不仅可用于数组,也可用于字符串和类型数组(TypedArray)。

  1. const arr = [5, 12, 8, 130, 44];
  2. arr.at(2) // 8
  3. arr.at(-2) // 130

如果参数位置超出了数组范围,at()返回undefined

对象的扩展

属性的简洁表示法

ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。

  1. const foo = 'bar';
  2. const baz = {foo};
  3. baz // {foo: "bar"}
  4. // 等同于
  5. const baz = {foo: foo};

除了属性简写,方法也可以简写。

  1. const o = {
  2. method() {
  3. return "Hello!";
  4. }
  5. };
  6. // 等同于
  7. const o = {
  8. method: function() {
  9. return "Hello!";
  10. }
  11. };

属性名表达式

JavaScript 定义对象的属性,有两种方法。

  1. // 方法一
  2. obj.foo = true;
  3. // 方法二
  4. obj['a' + 'bc'] = 123;

上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号之内。

但是,如果使用字面量方式定义对象(使用大括号),在 ES5 中只能使用方法一(标识符)定义属性。

  1. var obj = {
  2. foo: true,
  3. abc: 123
  4. };

ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。

  1. let propKey = 'foo';
  2. let obj = {
  3. [propKey]: true,
  4. ['a' + 'bc']: 123
  5. };

属性的遍历

ES6 一共有 5 种方法可以遍历对象的属性。

(1)for…in

for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

(2)Object.keys(obj)

Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

(3)Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。

(4)Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性的键名。

(5)Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。

以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。

  • 首先遍历所有数值键,按照数值升序排列。
  • 其次遍历所有字符串键,按照加入时间升序排列。
  • 最后遍历所有 Symbol 键,按照加入时间升序排列。
  1. Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
  2. // ['2', '10', 'b', 'a', Symbol()]

上面代码中,Reflect.ownKeys方法返回一个数组,包含了参数对象的所有属性。这个数组的属性次序是这样的,首先是数值属性210,其次是字符串属性ba,最后是 Symbol 属性。

super 关键字

我们知道,this关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象。

  1. const proto = {
  2. foo: 'hello'
  3. };
  4. const obj = {
  5. foo: 'world',
  6. find() {
  7. return super.foo;
  8. }
  9. };
  10. Object.setPrototypeOf(obj, proto);
  11. obj.find() // "hello"

对象的扩展运算符

解构赋值

对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。

  1. let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
  2. x // 1
  3. y // 2
  4. z // { a: 3, b: 4 }

扩展运算符

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。

  1. let z = { a: 3, b: 4 };
  2. let n = { ...z };
  3. n // { a: 3, b: 4 }

由于数组是特殊的对象,所以对象的扩展运算符也可以用于数组。

  1. let foo = { ...['a', 'b', 'c'] };
  2. foo
  3. // {0: "a", 1: "b", 2: "c"}

如果扩展运算符后面是一个空对象,则没有任何效果。

  1. {...{}, a: 1}
  2. // { a: 1 }

Object.assign()

基本用法

Object.assign()方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

  1. const target = { a: 1 };
  2. const source1 = { b: 2 };
  3. const source2 = { c: 3 };
  4. Object.assign(target, source1, source2);
  5. target // {a:1, b:2, c:3}

Object.assign()方法的第一个参数是目标对象,后面的参数都是源对象。

注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性

Object.keys(),Object.values(),Object.entries()

Object.keys()

ES5 引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。

  1. var obj = { foo: 'bar', baz: 42 };
  2. Object.keys(obj)
  3. // ["foo", "baz"]

Object.values()

Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。

  1. const obj = { foo: 'bar', baz: 42 };
  2. Object.values(obj)
  3. // ["bar", 42]

Object.entries()

Object.entries()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。

  1. const obj = { foo: 'bar', baz: 42 };
  2. Object.entries(obj)
  3. // [ ["foo", "bar"], ["baz", 42] ]

除了返回值不一样,该方法的行为与Object.values基本一致。

Object.fromEntries()

Object.fromEntries()方法是Object.entries()的逆操作,用于将一个键值对数组转为对象。

  1. Object.fromEntries([
  2. ['foo', 'bar'],
  3. ['baz', 42]
  4. ])
  5. // { foo: "bar", baz: 42 }

该方法的主要目的,是将键值对的数据结构还原为对象,因此特别适合将 Map 结构转为对象。

链判断运算符

编程实务中,如果读取对象内部的某个属性,往往需要判断一下,属性的上层对象是否存在。比如,读取message.body.user.firstName这个属性,安全的写法是写成下面这样。

  1. // 错误的写法
  2. const firstName = message.body.user.firstName || 'default';
  3. // 正确的写法
  4. const firstName = (message
  5. && message.body
  6. && message.body.user
  7. && message.body.user.firstName) || 'default';

上面例子中,firstName属性在对象的第四层,所以需要判断四次,每一层是否有值。

三元运算符?:也常用于判断对象是否存在。

  1. const fooInput = myForm.querySelector('input[name=foo]')
  2. const fooValue = fooInput ? fooInput.value : undefined

上面例子中,必须先判断fooInput是否存在,才能读取fooInput.value

这样的层层判断非常麻烦,因此 ES2020 引入了“链判断运算符”(optional chaining operator)?.,简化上面的写法。

  1. const firstName = message?.body?.user?.firstName || 'default';
  2. const fooValue = myForm.querySelector('input[name=foo]')?.value

上面代码使用了?.运算符,直接在链式调用的时候判断,左侧的对象是否为nullundefined。如果是的,就不再往下运算,而是返回undefined

下面是判断对象方法是否存在,如果存在就立即执行的例子。

  1. iterator.return?.()

上面代码中,iterator.return如果有定义,就会调用该方法,否则iterator.return直接返回undefined,不再执行?.后面的部分。

对于那些可能没有实现的方法,这个运算符尤其有用。

  1. if (myForm.checkValidity?.() === false) {
  2. // 表单校验失败
  3. return;
  4. }
  1. a?.b
  2. // 等同于
  3. a == null ? undefined : a.b
  4. a?.[x]
  5. // 等同于
  6. a == null ? undefined : a[x]
  7. a?.b()
  8. // 等同于
  9. a == null ? undefined : a.b()
  10. a?.()
  11. // 等同于
  12. a == null ? undefined : a()

Symbol

ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它属于 JavaScript 语言的数据类型之一,其他数据类型是:undefinednull、布尔值(Boolean)、字符串(String)、数值(Number)、大整数(BigInt)、对象(Object)。

Symbol 值通过Symbol()函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。

  1. let s = Symbol();
  2. typeof s
  3. // "symbol"

上面代码中,变量s就是一个独一无二的值。typeof运算符的结果,表明变量s是 Symbol 数据类型,而不是字符串之类的其他类型。

作为属性名的 Symbol

由于每一个 Symbol 值都是不相等的,这意味着 Symbol 值可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖。

  1. let mySymbol = Symbol();
  2. // 第一种写法
  3. let a = {};
  4. a[mySymbol] = 'Hello!';
  5. // 第二种写法
  6. let a = {
  7. [mySymbol]: 'Hello!'
  8. };
  9. // 第三种写法
  10. let a = {};
  11. Object.defineProperty(a, mySymbol, { value: 'Hello!' });
  12. // 以上写法都得到同样结果
  13. a[mySymbol] // "Hello!"

Set 和 Map 数据结构

Set

基本用法

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set本身是一个构造函数,用来生成 Set 数据结构。

  1. const s = new Set();
  2. [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
  3. for (let i of s) {
  4. console.log(i);
  5. }
  6. // 2 3 5 4

上面代码通过add()方法向 Set 结构加入成员,结果表明 Set 结构不会添加重复的值。

Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。

  1. // 例一
  2. const set = new Set([1, 2, 3, 4, 4]);
  3. [...set]
  4. // [1, 2, 3, 4]
  5. // 例二
  6. const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
  7. items.size // 5
  8. // 例三
  9. const set = new Set(document.querySelectorAll('div'));
  10. set.size // 56
  11. // 类似于
  12. const set = new Set();
  13. document
  14. .querySelectorAll('div')
  15. .forEach(div => set.add(div));
  16. set.size // 56

上面代码中,例一和例二都是Set函数接受数组作为参数,例三是接受类似数组的对象作为参数。

上面代码也展示了一种去除数组重复成员的方法。

  1. // 去除数组的重复成员
  2. [...new Set(array)]

上面的方法也可以用于,去除字符串里面的重复字符。

  1. [...new Set('ababbc')].join('')
  2. // "abc"

向 Set 加入值的时候,不会发生类型转换,所以5"5"是两个不同的值。Set 内部判断两个值是否不同,使用的算法叫做“Same-value-zero equality”,它类似于精确相等运算符(===),主要的区别是向 Set 加入值时认为NaN等于自身,而精确相等运算符认为NaN不等于自身。

  1. let set = new Set();
  2. let a = NaN;
  3. let b = NaN;
  4. set.add(a);
  5. set.add(b);
  6. set // Set {NaN}

上面代码向 Set 实例添加了两次NaN,但是只会加入一个。这表明,在 Set 内部,两个NaN是相等的。

另外,两个对象总是不相等的。

  1. let set = new Set();
  2. set.add({});
  3. set.size // 1
  4. set.add({});
  5. set.size // 2

上面代码表示,由于两个空对象不相等,所以它们被视为两个值。

Set 实例的属性和方法

Set 结构的实例有以下属性。

  • Set.prototype.constructor:构造函数,默认就是Set函数。
  • Set.prototype.size:返回Set实例的成员总数。

Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。

  • Set.prototype.add(value):添加某个值,返回 Set 结构本身。
  • Set.prototype.delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • Set.prototype.has(value):返回一个布尔值,表示该值是否为Set的成员。
  • Set.prototype.clear():清除所有成员,没有返回值。

上面这些属性和方法的实例如下。

  1. s.add(1).add(2).add(2);
  2. // 注意2被加入了两次
  3. s.size // 2
  4. s.has(1) // true
  5. s.has(2) // true
  6. s.has(3) // false
  7. s.delete(2);
  8. s.has(2) // false

Map

含义和基本用法

JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

  1. const data = {};
  2. const element = document.getElementById('myDiv');
  3. data[element] = 'metadata';
  4. data['[object HTMLDivElement]'] // "metadata"

上面代码原意是将一个 DOM 节点作为对象data的键,但是由于对象只接受字符串作为键名,所以element被自动转为字符串[object HTMLDivElement]

为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。

  1. const m = new Map();
  2. const o = {p: 'Hello World'};
  3. m.set(o, 'content')
  4. m.get(o) // "content"
  5. m.has(o) // true
  6. m.delete(o) // true
  7. m.has(o) // false

上面代码使用 Map 结构的set方法,将对象o当作m的一个键,然后又使用get方法读取这个键,接着使用delete方法删除了这个键。

上面的例子展示了如何向 Map 添加成员。作为构造函数,Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

  1. const map = new Map([
  2. ['name', '张三'],
  3. ['title', 'Author']
  4. ]);
  5. map.size // 2
  6. map.has('name') // true
  7. map.get('name') // "张三"
  8. map.has('title') // true
  9. map.get('title') // "Author"

上面代码在新建 Map 实例时,就指定了两个键nametitle

Map构造函数接受数组作为参数,实际上执行的是下面的算法。

  1. const items = [
  2. ['name', '张三'],
  3. ['title', 'Author']
  4. ];
  5. const map = new Map();
  6. items.forEach(
  7. ([key, value]) => map.set(key, value)
  8. );

事实上,不仅仅是数组,任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构,都可以当作Map构造函数的参数。这就是说,SetMap都可以用来生成新的 Map。

  1. const set = new Set([
  2. ['foo', 1],
  3. ['bar', 2]
  4. ]);
  5. const m1 = new Map(set);
  6. m1.get('foo') // 1
  7. const m2 = new Map([['baz', 3]]);
  8. const m3 = new Map(m2);
  9. m3.get('baz') // 3

上面代码中,我们分别使用 Set 对象和 Map 对象,当作Map构造函数的参数,结果都生成了新的 Map 对象。

实例的属性和操作方法

Map 结构的实例有以下属性和操作方法。

(1)size 属性

size属性返回 Map 结构的成员总数。

  1. const map = new Map();
  2. map.set('foo', true);
  3. map.set('bar', false);
  4. map.size // 2

(2)Map.prototype.set(key, value)

set方法设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。

  1. const m = new Map();
  2. m.set('edition', 6) // 键是字符串
  3. m.set(262, 'standard') // 键是数值
  4. m.set(undefined, 'nah') // 键是 undefined

set方法返回的是当前的Map对象,因此可以采用链式写法。

  1. let map = new Map()
  2. .set(1, 'a')
  3. .set(2, 'b')
  4. .set(3, 'c');

(3)Map.prototype.get(key)

get方法读取key对应的键值,如果找不到key,返回undefined

  1. const m = new Map();
  2. const hello = function() {console.log('hello');};
  3. m.set(hello, 'Hello ES6!') // 键是函数
  4. m.get(hello) // Hello ES6!

(4)Map.prototype.has(key)

has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。

  1. const m = new Map();
  2. m.set('edition', 6);
  3. m.set(262, 'standard');
  4. m.set(undefined, 'nah');
  5. m.has('edition') // true
  6. m.has('years') // false
  7. m.has(262) // true
  8. m.has(undefined) // true

(5)Map.prototype.delete(key)

delete方法删除某个键,返回true。如果删除失败,返回false

  1. const m = new Map();
  2. m.set(undefined, 'nah');
  3. m.has(undefined) // true
  4. m.delete(undefined)
  5. m.has(undefined) // false

(6)Map.prototype.clear()

clear方法清除所有成员,没有返回值。

  1. let map = new Map();
  2. map.set('foo', true);
  3. map.set('bar', false);
  4. map.size // 2
  5. map.clear()
  6. map.size // 0

遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

  • Map.prototype.keys():返回键名的遍历器。
  • Map.prototype.values():返回键值的遍历器。
  • Map.prototype.entries():返回所有成员的遍历器。
  • Map.prototype.forEach():遍历 Map 的所有成员。

需要特别注意的是,Map 的遍历顺序就是插入顺序。

Map 结构转为数组结构,比较快速的方法是使用扩展运算符(...)。

  1. const map = new Map([
  2. [1, 'one'],
  3. [2, 'two'],
  4. [3, 'three'],
  5. ]);
  6. [...map.keys()]
  7. // [1, 2, 3]
  8. [...map.values()]
  9. // ['one', 'two', 'three']
  10. [...map.entries()]
  11. // [[1,'one'], [2, 'two'], [3, 'three']]
  12. [...map]
  13. // [[1,'one'], [2, 'two'], [3, 'three']]

Proxy

Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。

Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”

Proxy 实例的方法

get()

get方法用于拦截某个属性的读取操作,可以接受三个参数,依次为目标对象、属性名和 proxy 实例本身(严格地说,是操作行为所针对的对象),其中最后一个参数可选。

get方法的用法,上文已经有一个例子,下面是另一个拦截读取操作的例子。

  1. var person = {
  2. name: "张三"
  3. };
  4. var proxy = new Proxy(person, {
  5. get: function(target, propKey) {
  6. if (propKey in target) {
  7. return target[propKey];
  8. } else {
  9. throw new ReferenceError("Prop name \"" + propKey + "\" does not exist.");
  10. }
  11. }
  12. });
  13. proxy.name // "张三"
  14. proxy.age // 抛出一个错误

上面代码表示,如果访问目标对象不存在的属性,会抛出一个错误。如果没有这个拦截函数,访问不存在的属性,只会返回undefined

set()

set方法用来拦截某个属性的赋值操作,可以接受四个参数,依次为目标对象、属性名、属性值和 Proxy 实例本身,其中最后一个参数可选。

假定Person对象有一个age属性,该属性应该是一个不大于 200 的整数,那么可以使用Proxy保证age的属性值符合要求。

  1. let validator = {
  2. set: function(obj, prop, value) {
  3. if (prop === 'age') {
  4. if (!Number.isInteger(value)) {
  5. throw new TypeError('The age is not an integer');
  6. }
  7. if (value > 200) {
  8. throw new RangeError('The age seems invalid');
  9. }
  10. }
  11. // 对于满足条件的 age 属性以及其他属性,直接保存
  12. obj[prop] = value;
  13. return true;
  14. }
  15. };
  16. let person = new Proxy({}, validator);
  17. person.age = 100;
  18. person.age // 100
  19. person.age = 'young' // 报错
  20. person.age = 300 // 报错

Promise 对象

Promise 的含义

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

Promise对象有以下两个特点。

(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。

(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

注意,为了行文方便,本章后面的resolved统一只指fulfilled状态,不包含rejected状态。

有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。

Promise也有一些缺点。首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。第三,当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

如果某些事件不断地反复发生,一般来说,使用 Stream 模式是比部署Promise更好的选择。

基本用法

ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。

下面代码创造了一个Promise实例。

  1. const promise = new Promise(function(resolve, reject) {
  2. // ... some code
  3. if (/* 异步操作成功 */){
  4. resolve(value);
  5. } else {
  6. reject(error);
  7. }
  8. });

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。

resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

  1. promise.then(function(value) {
  2. // success
  3. }, function(error) {
  4. // failure
  5. });

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的,不一定要提供。它们都接受Promise对象传出的值作为参数。

下面是一个Promise对象的简单例子。

  1. function timeout(ms) {
  2. return new Promise((resolve, reject) => {
  3. setTimeout(resolve, ms, 'done');
  4. });
  5. }
  6. timeout(100).then((value) => {
  7. console.log(value);
  8. });

上面代码中,timeout方法返回一个Promise实例,表示一段时间以后才会发生的结果。过了指定的时间(ms参数)以后,Promise实例的状态变为resolved,就会触发then方法绑定的回调函数。

Promise.prototype.then()

Promise 实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过,then方法的第一个参数是resolved状态的回调函数,第二个参数是rejected状态的回调函数,它们都是可选的。

then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

  1. getJSON("/posts.json").then(function(json) {
  2. return json.post;
  3. }).then(function(post) {
  4. // ...
  5. });

Promise.prototype.catch()

Promise.prototype.catch()方法是.then(null, rejection).then(undefined, rejection)的别名,用于指定发生错误时的回调函数。

  1. getJSON('/posts.json').then(function(posts) {
  2. // ...
  3. }).catch(function(error) {
  4. // 处理 getJSON 和 前一个回调函数运行时发生的错误
  5. console.log('发生错误!', error);
  6. });

上面代码中,getJSON()方法返回一个 Promise 对象,如果该对象状态变为resolved,则会调用then()方法指定的回调函数;如果异步操作抛出错误,状态就会变为rejected,就会调用catch()方法指定的回调函数,处理这个错误。另外,then()方法指定的回调函数,如果运行中抛出错误,也会被catch()方法捕获。

  1. p.then((val) => console.log('fulfilled:', val))
  2. .catch((err) => console.log('rejected', err));
  3. // 等同于
  4. p.then((val) => console.log('fulfilled:', val))
  5. .then(null, (err) => console.log("rejected:", err));

Promise.prototype.finally()

finally()方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。

  1. promise
  2. .then(result => {···})
  3. .catch(error => {···})
  4. .finally(() => {···});

上面代码中,不管promise最后的状态,在执行完thencatch指定的回调函数以后,都会执行finally方法指定的回调函数。

下面是一个例子,服务器使用 Promise 处理请求,然后使用finally方法关掉服务器。

  1. server.listen(port)
  2. .then(function () {
  3. // ...
  4. })
  5. .finally(server.stop);

finally方法的回调函数不接受任何参数,这意味着没有办法知道,前面的 Promise 状态到底是fulfilled还是rejected。这表明,finally方法里面的操作,应该是与状态无关的,不依赖于 Promise 的执行结果。

Promise.all()

Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

  1. const p = Promise.all([p1, p2, p3]);

上面代码中,Promise.all()方法接受一个数组作为参数,p1p2p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。另外,Promise.all()方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。

p的状态由p1p2p3决定,分成两种情况。

(1)只有p1p2p3的状态都变成fulfilledp的状态才会变成fulfilled,此时p1p2p3的返回值组成一个数组,传递给p的回调函数。

(2)只要p1p2p3之中有一个被rejectedp的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

  1. const databasePromise = connectDatabase();
  2. const booksPromise = databasePromise
  3. .then(findAllBooks);
  4. const userPromise = databasePromise
  5. .then(getCurrentUser);
  6. Promise.all([
  7. booksPromise,
  8. userPromise
  9. ])
  10. .then(([books, user]) => pickTopRecommendations(books, user));
0

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3