17-前端核心技术-ES6高级特征

第17章-前端核心技术-ES6高级特征

学习目标

1. 掌握ES6的新语法格式
2. 掌握let、var、const的区别 重点
3. 掌握ES6 集合的特征
4. 掌握异步操作的实现原理 重点 难点

ES6概述

参考文档地址：https://wangdoc.com/es6/

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

目前各大浏览器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。

以下是各大浏览器支持情况及开始时间:

Chrome 58	Edge 14	Firefox 54	Safari 10	Opera 55
2017 年 1 月	2016 年 8 月	2017 年 3 月	2016 年 7 月	2018 年 8 月

关于浏览器是否支持的详细内容可以参考：http://kangax.github.io/compat-table/es6/

ES6语法

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

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

• let 声明的变量只在 let 命令所在的代码块内有效。

const 常量

const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错

基本用法:

1
2
3
4
const PI = "3.1415926";
PI  // 3.1415926
const MY_AGE;  // 报错：SyntaxError: Missing initializer in const declaration  

暂时性死区:

ES6 明确规定，代码块内如果存在 let 或者 const，会从块的开始就形成一个封闭作用域（闭包）。代码块内，在声明变量 PI 之前使用它会报错。

1
2
3
4
5
var PI = "a";
if(true){
  console.log(PI);  // 报错：ReferenceError: PI is not defined
  const PI = "3.1415926";
}

const 如何做到变量在声明初始化之后不允许改变的？其实 const 其实保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改动。

对于简单类型（数值 number、字符串 string 、布尔值 boolean）,值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量。

对于复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了，所以使用 const 声明复杂类型对象时要慎重。

let 和 var 的区别

1、代码块内有效

let 是在代码块内有效，var 是在全局范围内有效:

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

2、不能重复声明

let 只能声明一次 ，var 可以声明多次:

1
2
3
4
5
6
let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

3、for 循环计数器适合用 let

let 每次循环都是独立的一个新变量，var每次循环是同一个变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 变量 i 是用 var 声明的，在全局范围内有效，所以全局中只有一个变量 i
for (var i = 0; i < 10; i++) {
  setTimeout(function(){
    console.log(i);
  })
}
// 输出十个 10
// 变量 j 是用 let 声明的，当前的 j 只在本轮循环中有效，每次循环的 j 其实都是一个新的变量，

// 所以 setTimeout 定时器里面的 j 其实是不同的变量，即最后输出 12345。

// JavaScript 引擎内部会自动记住前一个循环的值，相当于有一个 var 10 个let

for (let j = 0; j < 10; j++) {

setTimeout(function(){

console.log(j);

})

}

// 输出 0123456789

4、不存在变量提升

let 不存在变量提升，var 会变量提升

1
2
3
4
5
6
7
8
// 变量 a 用 let 声明不存在变量提升，在声明变量 a 之前，a 不存在，所以会报错。
console.log(a);  //ReferenceError: a is not defined
let a = "apple";
// 变量 b 用 var 声明存在变量提升，所以当脚本开始运行的时候，

// b 已经存在了，但是还没有赋值，所以会输出 undefined。

console.log(b);  //undefined

var b = "banana";

let 解构赋值

解构赋值是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

1、数组模型解构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// 1、基本
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3
// 2、可嵌套

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

// a = 1

// b = 2

// c = 3
// 3、可忽略

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

// a = 1

// b = 3
// 4、不完全解构

let [a = 1, b] = []; // a = 1, b = undefined
// 5、剩余运算符

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

//a = 1

//b = [2, 3]
// 6、字符串等

// 在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。

let [a, b, c, d, e] = 'hello';

// a = 'h'

// b = 'e'

// c = 'l'

// d = 'l'

// e = 'o'
// 7、解构默认值

let [a = 2] = [undefined]; // a = 2

// 当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。

let [a = 3, b = a] = [];     // a = 3, b = 3

let [a = 3, b = a] = [1];    // a = 1, b = 1

let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

2、对象模型解构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 基本
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'
// 可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] };

let {p: [x, { y }] } = obj;

// x = 'hello'

// y = 'world'

let obj = {p: ['hello', {y: 'world'}] };

let {p: [x, {  }] } = obj;

// x = 'hello'
// 不完全解构

let obj = {p: [{y: 'world'}] };

let {p: [{ y }, x ] } = obj;

// x = undefined

// y = 'world'
// 剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};

// a = 10

// b = 20

// rest = {c: 30, d: 40}
// 解构默认值

let {a = 10, b = 5} = {a: 3};

// a = 3; b = 5;

let {a: aa = 10, b: bb = 5} = {a: 3};

// aa = 3; bb = 5;

Symbol新数据类型

ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol 。ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，为新创建的 Symbol 提供描述，用来显示在控制台或者作为字符串的时候使用，便于区分。

如：

1
2
3
4
5
6
7
8
let sy = Symbol("KK");
console.log(sy);   // Symbol(KK)
console.log(sy.description);   // "KK"
typeof(sy);        // "symbol"
// 相同参数 Symbol() 返回的值不相等

let sy1 = Symbol("kk");

sy === sy1;       // false

1、定义绝对不相等的常量

因为 Symbol 类型绝对唯一不重复，所以用于定义常量非常好

1
2
3
const COLOR_RED = Symbol("red");
const COLOR_YELLOW = Symbol("yellow");
const COLOR_BLUE = Symbol("blue");

2、作为对象属性的键

因为 Symbol 类型绝对唯一不重复，所以可以保证对象的属性不会重复、不会被覆盖。

Symbol 作为对象属性名时不能用.运算符，要用方括号。因为.运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let sy = Symbol("key1");
// 写法1

let syObject = {};

syObject[sy] = "kk";

console.log(syObject);    // {Symbol(key1): "kk"}
// 写法2

let syObject = {

[sy]: "kk"

};

console.log(syObject);    // {Symbol(key1): "kk"}
// 写法3

let syObject = {};

Object.defineProperty(syObject, sy, {value: "kk"});

console.log(syObject);   // {Symbol(key1): "kk"}

注：

Symbol 值作为属性名时，该属性是公有属性不是私有属性，可以在类的外部访问。但是不会出现在 for…in 、 for…of 的循环中，也不会被 Object.keys() 、 Object.getOwnPropertyNames() 返回。如果要读取到一个对象的 Symbol 属性，可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

3、Symbol.for(“key”)

Symbol.for() 类似单例模式，根据字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值，若没有则新建并返回一个以该字符串参数为名称的 Symbol 值。

1
2
3
4
5
6
let yellow = Symbol("Yellow");
let yellow1 = Symbol.for("Yellow");
yellow === yellow1;      // false
let yellow2 = Symbol.for("Yellow");

yellow1 === yellow2;     // true

4、Symbol.keyFor()

Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 字符串参数key ，用来检测该字符串参数作否已存在

1
2
let yellow1 = Symbol.for("Yellow");
Symbol.keyFor(yellow1);    // "Yellow"

运算符扩展

指数运算符

ES2016 新增了一个指数运算符（**）。

1
2
2 ** 2 // 4
2 ** 3 // 8

这个运算符的一个特点是右结合，而不是常见的左结合。多个指数运算符连用时，是从最右边开始计算的。

1
2
3
// 相当于 2 ** (3 ** 2)
2 ** 3 ** 2
// 512

上面代码中，首先计算的是第二个指数运算符，而不是第一个。

指数运算符可以与等号结合，形成一个新的赋值运算符（**=）。

1
2
3
4
5
6
7
let a = 1.5;
a **= 2;
// 等同于 a = a * a;
let b = 4;

b **= 3;

// 等同于 b = b * b * b;

链判断运算符

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

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

const firstName = (message

&& message.body

&& message.body.user

&& message.body.user.firstName) || 'default';

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

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

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

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

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

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

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

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

iterator.return?.()

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

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

1
2
3
4
if (myForm.checkValidity?.() === false) {
  // 表单校验失败
  return;
}

上面代码中，老式浏览器的表单对象可能没有checkValidity()这个方法，这时?.运算符就会返回undefined，判断语句就变成了undefined === false，所以就会跳过下面的代码。

链判断运算符?.有三种写法。

• obj?.prop // 对象属性是否存在
• obj?.[expr] // 同上
• func?.(...args) // 函数或对象方法是否存在

下面是obj?.[expr]用法的一个例子。

let hex = "#C0FFEE".match(/#([A-Z]+)/i)?.[1];

上面例子中，字符串的match()方法，如果没有发现匹配会返回null，如果发现匹配会返回一个数组，?.运算符起到了判断作用。

下面是?.运算符常见形式，以及不使用该运算符时的等价形式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a?.b
// 等同于
a == null ? undefined : a.b
a?.[x]

// 等同于

a == null ? undefined : a[x]
a?.b()

// 等同于

a == null ? undefined : a.b()
a?.()

// 等同于

a == null ? undefined : a()

上面代码中，特别注意后两种形式，如果a?.b()和a?.()。如果a?.b()里面的a.b有值，但不是函数，不可调用，那么a?.b()是会报错的。a?.()也是如此，如果a不是null或undefined，但也不是函数，那么a?.()会报错。

使用这个运算符，有几个注意点。

（1）短路机制

本质上，?.运算符相当于一种短路机制，只要不满足条件，就不再往下执行。

1
2
3
a?.[++x]
// 等同于
a == null ? undefined : a[++x]

上面代码中，如果a是undefined或null，那么x不会进行递增运算。也就是说，链判断运算符一旦为真，右侧的表达式就不再求值。

（2）括号的影响

如果属性链有圆括号，链判断运算符对圆括号外部没有影响，只对圆括号内部有影响。

1
2
3
(a?.b).c
// 等价于
(a == null ? undefined : a.b).c

上面代码中，?.对圆括号外部没有影响，不管a对象是否存在，圆括号后面的.c总是会执行。

一般来说，使用?.运算符的场合，不应该使用圆括号。

（3）报错场合

以下写法是禁止的，会报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 构造函数
new a?.()
new a?.b()
// 链判断运算符的右侧有模板字符串

a?.{b}

a?.b{c}
// 链判断运算符的左侧是 super

super?.()

super?.foo
// 链运算符用于赋值运算符左侧

a?.b = c

（4）右侧不得为十进制数值

为了保证兼容以前的代码，允许foo?.3:0被解析成foo ? .3 : 0，因此规定如果?.后面紧跟一个十进制数字，那么?.不再被看成是一个完整的运算符，而会按照三元运算符进行处理，也就是说，那个小数点会归属于后面的十进制数字，形成一个小数。

Null 判断运算符

读取对象属性的时候，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值。

1
2
3
const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;
const showSplashScreen = response.settings.showSplashScreen || true;

上面的三行代码都通过||运算符指定默认值，但是这样写是错的。开发者的原意是，只要属性的值为null或undefined，默认值就会生效，但是属性的值如果为空字符串或false或0，默认值也会生效。

为了避免这种情况，ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值。

1
2
3
const headerText = response.settings.headerText ?? 'Hello, world!';
const animationDuration = response.settings.animationDuration ?? 300;
const showSplashScreen = response.settings.showSplashScreen ?? true;

上面代码中，默认值只有在左侧属性值为null或undefined时，才会生效。

这个运算符的一个目的，就是跟链判断运算符?.配合使用，为null或undefined的值设置默认值。

const animationDuration = response.settings?.animationDuration ?? 300;

上面代码中，如果response.settings是null或undefined，或者response.settings.animationDuration是null或undefined，就会返回默认值300。也就是说，这一行代码包括了两级属性的判断。

这个运算符很适合判断函数参数是否赋值。

1
2
3
4
function Component(props) {
  const enable = props.enabled ?? true;
  // …
}

上面代码判断props参数的enabled属性是否赋值，基本等同于下面的写法。

1
2
3
4
5
6
function Component(props) {
  const {
    enabled: enable = true,
  } = props;
  // …
}

??本质上是逻辑运算，它与其他两个逻辑运算符&&和||有一个优先级问题，它们之间的优先级到底孰高孰低。优先级的不同，往往会导致逻辑运算的结果不同。

现在的规则是，如果多个逻辑运算符一起使用，必须用括号表明优先级，否则会报错。

1
2
3
4
5
// 报错
lhs && middle ?? rhs
lhs ?? middle && rhs
lhs || middle ?? rhs
lhs ?? middle || rhs

上面四个表达式都会报错，必须加入表明优先级的括号。

1
2
3
4
5
6
7
8
9
10
11
(lhs && middle) ?? rhs;
lhs && (middle ?? rhs);
(lhs ?? middle) && rhs;

lhs ?? (middle && rhs);
(lhs || middle) ?? rhs;

lhs || (middle ?? rhs);
(lhs ?? middle) || rhs;

lhs ?? (middle || rhs);

逻辑赋值运算符

ES2021 引入了三个新的逻辑赋值运算符（logical assignment operators），将逻辑运算符与赋值运算符进行结合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 或赋值运算符
x ||= y
// 等同于
x || (x = y)
// 与赋值运算符

x &&= y

// 等同于

x && (x = y)
// Null 赋值运算符

x ??= y

// 等同于

x ?? (x = y)

这三个运算符||=、&&=、??=相当于先进行逻辑运算，然后根据运算结果，再视情况进行赋值运算。

它们的一个用途是，为变量或属性设置默认值。

1
2
3
4
5
// 老的写法
user.id = user.id || 1;
// 新的写法

user.id ||= 1;

上面示例中，user.id属性如果不存在，则设为1，新的写法比老的写法更紧凑一些。

下面是另一个例子。

1
2
3
4
function example(opts) {
  opts.foo = opts.foo ?? 'bar';
  opts.baz ?? (opts.baz = 'qux');
}

上面示例中，参数对象opts如果不存在属性foo和属性baz，则为这两个属性设置默认值。有了“Null 赋值运算符”以后，就可以统一写成下面这样。

1
2
3
4
function example(opts) {
  opts.foo ??= 'bar';
  opts.baz ??= 'qux';
}

扩展运算符

对象扩展运算符

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

如：

1
2
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

上述方法实际上等价于:

1
2
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }

如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。

1
2
let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}

数组扩展运算符

扩展运算符同样可以运用在对数组的操作中。

• 可以将数组转换为参数序列

1
2
3
4
5
6
function add(x, y) {
  return x + y;
}
const numbers = [4, 38];

add(...numbers) // 42

• 可以复制数组

如果直接通过下列的方式进行数组复制是不可取的：

1
2
3
4
const arr1 = [1, 2];
const arr2 = arr1;
arr2[0] = 2;
arr1 // [2, 2]

应该使用扩展运算符

1
2
const arr1 = [1, 2];
const arr2 = [...arr1];

• 扩展运算符可以与解构赋值结合起来，用于生成数组

1
2
3
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

1
2
3
4
const [...rest, last] = [1, 2, 3, 4, 5];
// 报错
const [first, ...rest, last] = [1, 2, 3, 4, 5];
// 报错

字符串扩展运算符

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

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

JavaScript Object对象

在JavaScript中，几乎所有的对象都是Object类型的实例，它们都会从Object.prototype继承属性和方法。Object 构造函数为给定值创建一个对象包装器。Object构造函数，会根据给定的参数创建对象。

• 如果给定值是 null 或 undefined，将会创建并返回一个空对象
• 如果传进去的是一个基本类型的值，则会构造其包装类型的对象
• 如果传进去的是引用类型的值，仍然会返回这个值，经他们复制的变量保有和源对象相同的引用地址

参考地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object

Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

语法

Object.assign(target, ...sources)

参数

• target

目标对象。

• sources

源对象。

返回值

• 目标对象。

例子

1
2
3
4
5
6
7
8
9
10
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);

// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);

// expected output: Object { a: 1, b: 4, c: 5 }

Object.create()

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

语法

Object.create(proto,[propertiesObject])

参数

• proto

新创建对象的原型对象。

• propertiesObject

可选。需要传入一个对象，该对象的属性类型参照Object.defineProperties()的第二个参数。如果该参数被指定且不为 undefined，该传入对象的自有可枚举属性(即其自身定义的属性，而不是其原型链上的枚举属性)将为新创建的对象添加指定的属性值和对应的属性描述符。

返回值

• 一个新对象，带着指定的原型对象和属性。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const person = {
  isHuman: false,
  printIntroduction: function() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};
const me = Object.create(person);
me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"

me.isHuman = true; // inherited properties can be overwritten
me.printIntroduction();

// expected output: "My name is Matthew. Am I human? true"

Object.values()

Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

语法

Object.values(obj)

参数

• obj

被返回可枚举属性值的对象。

返回值

• 一个包含对象自身的所有可枚举属性值的数组。

描述

Object.values()返回一个数组，其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
// array like object

var obj = { 0: 'a', 1: 'b', 2: 'c' };

console.log(Object.values(obj)); // ['a', 'b', 'c']
// array like object with random key ordering

// when we use numeric keys, the value returned in a numerical order according to the keys

var an_obj = { 100: 'a', 2: 'b', 7: 'c' };

console.log(Object.values(an_obj)); // ['b', 'c', 'a']
// getFoo is property which isn't enumerable

var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });

my_obj.foo = 'bar';

console.log(Object.values(my_obj)); // ['bar']
// non-object argument will be coerced to an object

console.log(Object.values('foo')); // ['f', 'o', 'o']

Object.entries()

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）。

语法

Object.entries(obj)

参数

• obj

可以返回其可枚举属性的键值对的对象。

返回值

• 无

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
// array like object

const obj = { 0: 'a', 1: 'b', 2: 'c' };

console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
// array like object with random key ordering

const anObj = { 100: 'a', 2: 'b', 7: 'c' };

console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
// getFoo is property which isn't enumerable

const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });

myObj.foo = 'bar';

console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]
// non-object argument will be coerced to an object

console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
// iterate through key-value gracefully

const obj = { a: 5, b: 7, c: 9 };

for (const [key, value] of Object.entries(obj)) {

console.log(${key} ${value}); // "a 5", "b 7", "c 9"

}
// Or, using array extras

Object.entries(obj).forEach(([key, value]) => {

console.log(${key} ${value}); // "a 5", "b 7", "c 9"

});

例子

1
2
3
4
5
6
7
8
9
10
11
12
const object1 = {
  a: 'somestring',
  b: 42
};
for (const [key, value] of Object.entries(object1)) {

console.log(${key}: ${value});

}
// expected output:

// "a: somestring"

// "b: 42"

Object.freeze()

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

语法

Object.freeze(obj)

参数

• obj

要被冻结的对象。

返回值

• 被冻结的对象。

例子

冻结对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var obj = {
  prop: function() {},
  foo: 'bar'
};
// 新的属性会被添加, 已存在的属性可能

// 会被修改或移除

obj.foo = 'baz';

obj.lumpy = 'woof';

delete obj.prop;
// 作为参数传递的对象与返回的对象都被冻结

// 所以不必保存返回的对象（因为两个对象全等）

var o = Object.freeze(obj);
o === obj; // true

Object.isFrozen(obj); // === true
// 现在任何改变都会失效

obj.foo = 'quux'; // 静默地不做任何事

// 静默地不添加此属性

obj.quaxxor = 'the friendly duck';
// 在严格模式，如此行为将抛出 TypeErrors

function fail(){

  'use strict';

obj.foo = 'sparky'; // throws a TypeError

delete obj.quaxxor; // 返回true，因为quaxxor属性从来未被添加

obj.sparky = 'arf'; // throws a TypeError

}
fail();
// 试图通过 Object.defineProperty 更改属性

// 下面两个语句都会抛出 TypeError.

Object.defineProperty(obj, 'ohai', { value: 17 });

Object.defineProperty(obj, 'foo', { value: 'eit' });
// 也不能更改原型

// 下面两个语句都会抛出 TypeError.

Object.setPrototypeOf(obj, { x: 20 })

obj.proto = { x: 20 }

冻结数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let a = [0];
Object.freeze(a); // 现在数组不能被修改了.
a[0]=1; // fails silently

a.push(2); // fails silently
// In strict mode such attempts will throw TypeErrors

function fail() {

  "use strict"

a[0] = 1;

a.push(2);

}
fail();

被冻结的对象是不可变的。但也不总是这样。下例展示了冻结对象不是常量对象（浅冻结）。

1
2
3
4
5
6
7
8
obj1 = {
  internal: {}
};
Object.freeze(obj1);

obj1.internal.a = 'aValue';
obj1.internal.a // 'aValue'

对于一个常量对象，整个引用图（直接和间接引用其他对象）只能引用不可变的冻结对象。冻结的对象被认为是不可变的，因为整个对象中的整个对象状态（对其他对象的值和引用）是固定的。注意，字符串，数字和布尔总是不可变的，而函数和数组是对象。

要使对象不可变，需要递归冻结每个类型为对象的属性（深冻结）。当你知道对象在引用图中不包含任何 环 (循环引用)时，将根据你的设计逐个使用该模式，否则将触发无限循环。对 deepFreeze() 的增强将是具有接收路径（例如Array）参数的内部函数，以便当对象进入不变时，可以递归地调用 deepFreeze() 。你仍然有冻结不应冻结的对象的风险，例如[window]。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 深冻结函数.
function deepFreeze(obj) {
// 取回定义在obj上的属性名

var propNames = Object.getOwnPropertyNames(obj);
// 在冻结自身之前冻结属性

propNames.forEach(function(name) {

var prop = obj[name];
<span class="hljs-comment">// 如果prop是个对象，冻结它</span>
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> prop == <span class="hljs-string">'object'</span> &amp;&amp; prop !== <span class="hljs-literal">null</span>)
  deepFreeze(prop);

});
// 冻结自身(no-op if already frozen)

return Object.freeze(obj);

}
obj2 = {

internal: {}

};
deepFreeze(obj2);

obj2.internal.a = 'anotherValue';

obj2.internal.a; // undefined

Object.fromEntries()

Object.fromEntries() 方法把键值对列表转换为一个对象。

语法

Object.fromEntries(iterable);

参数

• iterable

类似 Array 、 Map 或者其它实现了可迭代协议的可迭代对象。

返回值

• 一个由该迭代对象条目提供对应属性的新对象。

示例

Map 转化为 Object

通过 Object.fromEntries， 可以将 Map 转换为 Object:

1
2
3
const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }

Array 转化为 Object

通过 Object.fromEntries， 可以将 Array 转换为 Object:

1
2
3
const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }

对象转换

Object.fromEntries 是与 Object.entries() 相反的方法，用 数组处理函数 可以像下面这样转换对象：

1
2
3
4
5
6
7
8
9
const object1 = { a: 1, b: 2, c: 3 };
const object2 = Object.fromEntries(

Object.entries(object1)

.map(([ key, val ]) => [ key, val * 2 ])

);
console.log(object2);

// { a: 2, b: 4, c: 6 }

Object.is()

Object.is() 方法判断两个值是否为同一个值。

语法

Object.is(value1, value2);

参数

• value1

被比较的第一个值。

• value2

被比较的第二个值。

返回值

• 一个 Boolean 类型标示两个参数是否是同一个值。

例子

1
2
3
4
5
6
7
8
9
10
11
// Object.is() 方法判断两个值是否为同一个值。如果满足以下条件则两个值相等:
	// 都是 undefined
	// 都是 null
	// 都是 true 或 false
	// 都是相同长度的字符串且相同字符按相同顺序排列
	// 都是相同对象（意味着每个对象有同一个引用）
	// 都是数字且
	// 都是 +0
	// 都是 -0
	// 都是 NaN
	// 或都是非零而且非 NaN 且为同一个值

Object.keys()

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

语法

Object.keys(obj)

参数

• obj

要返回其枚举自身属性的对象。

返回值

• 一个表示给定对象的所有可枚举属性的字符串数组。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
// array like object

var obj = { 0: 'a', 1: 'b', 2: 'c' };

console.log(Object.keys(obj)); // console: ['0', '1', '2']
// array like object with random key ordering

var anObj = { 100: 'a', 2: 'b', 7: 'c' };

console.log(Object.keys(anObj)); // console: ['2', '7', '100']
// getFoo is a property which isn't enumerable

var myObj = Object.create({}, {

getFoo: {

value: function () { return this.foo; }

}

});

myObj.foo = 1;

console.log(Object.keys(myObj)); // console: ['foo']

如果你想获取一个对象的所有属性,，甚至包括不可枚举的，请查看Object.getOwnPropertyNames。

Object.values()

Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

语法

Object.values(obj)

参数

• obj

被返回可枚举属性值的对象。

返回值

• 一个包含对象自身的所有可枚举属性值的数组。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
// array like object

var obj = { 0: 'a', 1: 'b', 2: 'c' };

console.log(Object.values(obj)); // ['a', 'b', 'c']
// array like object with random key ordering

// when we use numeric keys, the value returned in a numerical order according to the keys

var an_obj = { 100: 'a', 2: 'b', 7: 'c' };

console.log(Object.values(an_obj)); // ['b', 'c', 'a']
// getFoo is property which isn't enumerable

var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });

my_obj.foo = 'bar';

console.log(Object.values(my_obj)); // ['bar']
// non-object argument will be coerced to an object

console.log(Object.values('foo')); // ['f', 'o', 'o']

Object.seal()

Object.seal()方法封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要原来是可写的就可以改变。

语法

Object.seal(obj)

参数

• obj

将要被密封的对象。

返回值

• 被密封的对象。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var obj = {
  prop: function() {},
  foo: 'bar'
};
// 可以添加新的属性

// 可以更改或删除现有的属性

obj.foo = 'baz';

obj.lumpy = 'woof';

delete obj.prop;
var o = Object.seal(obj);
o === obj; // true

Object.isSealed(obj); // === true
// 仍然可以修改密封对象的属性值

obj.foo = 'quux';
// 但是你不能将属性重新定义成为访问器属性

// 反之亦然

Object.defineProperty(obj, 'foo', {

get: function() { return 'g'; }

}); // throws a TypeError
// 除了属性值以外的任何变化，都会失败.

obj.quaxxor = 'the friendly duck';

// 添加属性将会失败

delete obj.foo;

// 删除属性将会失败
// 在严格模式下，这样的尝试将会抛出错误

function fail() {

  'use strict';

delete obj.foo; // throws a TypeError

obj.sparky = 'arf'; // throws a TypeError

}

fail();
// 通过Object.defineProperty添加属性将会报错

Object.defineProperty(obj, 'ohai', {

value: 17

}); // throws a TypeError

Object.defineProperty(obj, 'foo', {

value: 'eit'

}); // 通过Object.defineProperty修改属性值

Object.defineProperties()

Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

语法

Object.defineProperties(obj, props)

参数

• obj

在其上定义或修改属性的对象。

• props

要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种：数据描述符和访问器描述符（更多详情，请参阅Object.defineProperty()）。描述符具有以下键：

configurable``true 只有该属性描述符的类型可以被改变并且该属性可以从对应对象中删除。 默认为 false``enumerable``true 只有在枚举相应对象上的属性时该属性显现。 默认为 false``value与属性关联的值。可以是任何有效的JavaScript值（数字，对象，函数等）。 默认为 undefined.writable``true只有与该属性相关联的值被assignment operator (en-US)改变时。 默认为 false``get作为该属性的 getter 函数，如果没有 getter 则为undefined。函数返回值将被用作属性的值。 默认为 undefined``set作为属性的 setter 函数，如果没有 setter 则为undefined。函数将仅接受参数赋值给该属性的新值。 默认为 undefined

返回值

• 传递给函数的对象。

例子

1
2
3
4
5
6
7
8
9
10
11
12
var obj = {};
Object.defineProperties(obj, {
  'property1': {
    value: true,
    writable: true
  },
  'property2': {
    value: 'Hello',
    writable: false
  }
  // etc. etc.
});

Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

语法

Object.defineProperty(obj, prop, descriptor)

参数

• obj

要定义属性的对象。

• prop

要定义或修改的属性的名称或 Symbol 。

• descriptor

要定义或修改的属性描述符。

返回值

• 被传递给函数的对象。

例子

1
2
3
4
5
6
7
8
9
10
11
12
const object1 = {};
Object.defineProperty(object1, 'property1', {

value: 42,

writable: false

});
object1.property1 = 77;

// throws an error in strict mode
console.log(object1.property1);

// expected output: 42

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

语法

Object.getOwnPropertyDescriptor(obj, prop)

参数

• obj

需要查找的目标对象

• prop

目标对象内属性名称

返回值

• 如果指定的属性存在于对象上，则返回其属性描述符对象（property descriptor），否则返回 undefined。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var o, d;
o = { get foo() { return 17; } };

d = Object.getOwnPropertyDescriptor(o, "foo");

// d {

//   configurable: true,

//   enumerable: true,

//   get: /the getter function/,

//   set: undefined

// }
o = { bar: 42 };

d = Object.getOwnPropertyDescriptor(o, "bar");

// d {

//   configurable: true,

//   enumerable: true,

//   value: 42,

//   writable: true

// }
o = {};

Object.defineProperty(o, "baz", {

value: 8675309,

writable: false,

enumerable: false

});

d = Object.getOwnPropertyDescriptor(o, "baz");

// d {

//   value: 8675309,

//   writable: false,

//   enumerable: false,

//   configurable: false

// }

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。

语法

Object.getOwnPropertyDescriptors(obj)

参数

• obj

任意对象

返回值

• 所指定对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象。

例子

浅拷贝一个对象

Object.assign() 方法只能拷贝源对象的可枚举的自身属性，同时拷贝时无法拷贝属性的特性们，而且访问器属性会被转换成数据属性，也无法拷贝源对象的原型，该方法配合 Object.create() 方法可以实现上面说的这些。

1
2
3
4
Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
);

创建子类

创建子类的典型方法是定义子类，将其原型设置为超类的实例，然后在该实例上定义属性。这么写很不优雅，特别是对于 getters 和 setter 而言。 相反，您可以使用此代码设置原型：

1
2
3
4
5
6
7
8
function superclass() {}
superclass.prototype = {
  // 在这里定义方法和属性
};
function subclass() {}
subclass.prototype = Object.create(superclass.prototype, Object.getOwnPropertyDescriptors({
  // 在这里定义方法和属性
}));

Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。

语法

Object.getOwnPropertyNames(obj)

参数

• obj

一个对象，其自身的可枚举和不可枚举属性的名称被返回。

返回值

• 在给定对象上找到的自身属性对应的字符串数组。

例子

使用 Object.getOwnPropertyNames()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]
// 类数组对象

var obj = { 0: "a", 1: "b", 2: "c"};

console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]
// 使用Array.forEach输出属性名和属性值

Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {

console.log(val + " -> " + obj[val]);

});

// 输出

// 0 -> a

// 1 -> b

// 2 -> c
//不可枚举属性

var my_obj = Object.create({}, {

getFoo: {

value: function() { return this.foo; },

enumerable: false

}

});

my_obj.foo = 1;
console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]

如果你只要获取到可枚举属性，查看Object.keys或用for...in循环（还会获取到原型链上的可枚举属性，不过可以使用hasOwnProperty()方法过滤掉）。

下面的例子演示了该方法不会获取到原型链上的属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ParentClass() {}
ParentClass.prototype.inheritedMethod = function() {};
function ChildClass() {

this.prop = 5;

this.method = function() {};

}
ChildClass.prototype = new ParentClass;

ChildClass.prototype.prototypeMethod = function() {};
console.log(

Object.getOwnPropertyNames(

new ChildClass()  // ["prop", "method"]

)

);

只获取不可枚举的属性

下面的例子使用了 Array.prototype.filter() 方法，从所有的属性名数组（使用Object.getOwnPropertyNames()方法获得）中去除可枚举的属性（使用Object.keys()方法获得），剩余的属性便是不可枚举的属性了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var target = myObject;
var enum_and_nonenum = Object.getOwnPropertyNames(target);
var enum_only = Object.keys(target);
var nonenum_only = enum_and_nonenum.filter(function(key) {
    var indexInEnum = enum_only.indexOf(key);
    if (indexInEnum == -1) {
        // 没有发现在enum_only健集中意味着这个健是不可枚举的,
        // 因此返回true 以便让它保持在过滤结果中
        return true;
    } else {
        return false;
    }
});
console.log(nonenum_only);

注：Array.filter(filt_func)方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols() 方法返回一个给定对象自身的所有 Symbol 属性的数组。

语法

Object.getOwnPropertySymbols(obj)

参数

• obj

要返回 Symbol 属性的对象。

返回值

• 在给定对象自身上找到的所有 Symbol 属性的数组。

例子

1
2
3
4
5
6
7
8
9
10
11
12
var obj = {};
var a = Symbol("a");
var b = Symbol.for("b");
obj[a] = "localSymbol";

obj[b] = "globalSymbol";
var objectSymbols = Object.getOwnPropertySymbols(obj);
console.log(objectSymbols.length); // 2

console.log(objectSymbols)         // [Symbol(a), Symbol(b)]

console.log(objectSymbols[0])      // Symbol(a)

Object.getPrototypeOf()

Object.getPrototypeOf() 方法返回指定对象的原型（内部[[Prototype]]属性的值）。

语法

Object.getPrototypeOf(object)

参数

• obj

要返回其原型的对象。

返回值

• 给定对象的原型。如果没有继承属性，则返回 null 。

例子

1
2
3
4
5
const prototype1 = {};
const object1 = Object.create(prototype1);
console.log(Object.getPrototypeOf(object1) === prototype1);

// expected output: true

ES6 集合

Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。

1、Set 属性方法

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

• Set.prototype.add(value)：添加某个值，返回 Set 结构本身。

• Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
• Set.prototype.clear()：清除所有成员，没有返回值。

如：

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

s.has(2) // true

s.has(3) // false
s.delete(2);

s.has(2) // false

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 例一
const set = new Set([1, 2, 3, 4, 4]);
// [1, 2, 3, 4]
// 例二

const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);

items.size // 5
// 例三

const set = new Set(document.querySelectorAll('div'));

set.size // 56
// 类似于

const set = new Set();

document

.querySelectorAll('div')

.forEach(div => set.add(div));

set.size // 56
// 去除数组的重复成员

console.log([...new Set([1, 1, 1, 2, 2, 5, 6, 4])])

// 去除重复字符，变数组

console.log([...new Set('ababbc')])

// 去除重复字符，转字符串

console.log([...new Set('ababbc')].join(""))
// Array.from方法可以将 Set 结构转为数组。

const items = new Set([1, 2, 3, 4, 5]);

const array = Array.from(items);

注：Set 添加两次NaN，但是只会加入一个。表明，在 Set 内部，两个NaN是相等的。两个空对象{}永远不相等

2、Set 遍历

• Set.prototype.keys()：返回键名的遍历器
• Set.prototype.values()：返回键值的遍历器
• Set.prototype.entries()：返回键值对的遍历器
• Set.prototype.forEach()：使用回调函数遍历每个成员

注：需要特别指出的是，Set的遍历顺序就是插入顺序。这个特性有时非常有用，比如使用 Set 保存一个回调函数列表，调用时就能保证按照添加顺序调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {

console.log(item);

}

// red

// green

// blue
for (let item of set.values()) {

console.log(item);

}

// red

// green

// blue
for (let item of set.entries()) {

console.log(item);

}

// ["red", "red"]

// ["green", "green"]

// ["blue", "blue"]
// Set 结构的实例与数组一样，也拥有forEach方法

let set = new Set([1, 4, 9]);

set.forEach((value, key) => console.log(key + ' : ' + value))

// 1 : 1

// 4 : 4

// 9 : 9

3、Set 集合操作

数组去重

1
2
var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]

并集

1
2
3
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

交集

1
2
3
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

差集

1
2
3
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

4、WeakSet

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。

• WeakSet 的成员只能是对象，而不能是其他类型的值。
• WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

1
2
3
4
const ws = new WeakSet();
// 向 WeakSet 添加一个数值和Symbol值，结果报错
ws.add(1) // TypeError: Invalid value used in weak set
ws.add(Symbol()) // TypeError: invalid value used in weak set

数组可以转成 WeakSet ，但是数组中的元素必须是对象类型，不是基本数据类型

1
2
3
4
5
const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a); // WeakSet {[1, 2], [3, 4]}
const b = [3, 4];

const ws = new WeakSet(b); // Uncaught TypeError: Invalid value used in weak set(…)

Map

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

为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

如：

1
2
3
4
5
6
7
8
9
const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')

m.get(o) // "content"
m.has(o) // true

m.delete(o) // true

m.has(o) // false

数组、任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作Map构造函数的参数。

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

const m3 = new Map(m2);

m3.get('baz') // 3

1、size 属性

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

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

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

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

1
2
3
4
5
const m = new Map();
m.set('edition', 6)        // 键是字符串

m.set(262, 'standard')     // 键是数值

m.set(undefined, 'nah')    // 键是 undefined

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

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

3、Map.prototype.get(key)

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

1
2
3
4
5
6
const m = new Map();
const hello = function() {console.log('hello');};

m.set(hello, 'Hello ES6!') // 键是函数
m.get(hello)  // Hello ES6!

4、Map.prototype.has(key)

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

1
2
3
4
5
6
7
8
9
10
const m = new Map();
m.set('edition', 6);

m.set(262, 'standard');

m.set(undefined, 'nah');
m.has('edition')     // true

m.has('years')       // false

m.has(262)           // true

m.has(undefined)     // true

5、Map.prototype.delete(key)

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

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

m.has(undefined)       // false

6、Map.prototype.clear()

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

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

map.clear()

map.size // 0

7、Map遍历

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
for (let key of map.keys()) {

console.log(key);

}

// "F"

// "T"
for (let value of map.values()) {

console.log(value);

}

// "no"

// "yes"
for (let item of map.entries()) {

console.log(item[0], item[1]);

}

// "F" "no"

// "T" "yes"
// 或者

for (let [key, value] of map.entries()) {

console.log(key, value);

}

// "F" "no"

// "T" "yes"
// 等同于使用map.entries()

for (let [key, value] of map) {

console.log(key, value);

}

// "F" "no"

// "T" "yes"

8、Map转换

（1）Map 转为数组

前面已经提过，Map 转为数组最方便的方法，就是使用扩展运算符（...）。

1
2
3
4
5
const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

（2）数组 转为 Map

将数组传入 Map 构造函数，就可以转为 Map。

1
2
3
4
5
6
7
8
new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])
// Map {
//   true => 7,
//   Object {foo: 3} => ['abc']
// }

（3）Map 转为对象

如果所有 Map 的键都是字符串，它可以无损地转为对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}
const myMap = new Map()

.set('yes', true)

.set('no', false);

strMapToObj(myMap)

// { yes: true, no: false }

如果有非字符串的键名，那么这个键名会被转成字符串，再作为对象的键名。

（4）对象转为 Map

对象转为 Map 可以通过Object.entries()。

1
2
let obj = {"a":1, "b":2};
let map = new Map(Object.entries(obj));

此外，也可以自己实现一个转换函数。

1
2
3
4
5
6
7
8
9
10
function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}
objToStrMap({yes: true, no: false})

// Map {"yes" => true, "no" => false}

（5）Map 转为 JSON

Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。

1
2
3
4
5
6
7
function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}
let myMap = new Map().set('yes', true).set('no', false);

strMapToJson(myMap)

// '{"yes":true,"no":false}'

另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON。

1
2
3
4
5
6
7
function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);

mapToArrayJson(myMap)

// '[[true,7],[{"foo":3},["abc"]]]'

（6）JSON 转为 Map

JSON 转为 Map，正常情况下，所有键名都是字符串。

1
2
3
4
5
6
function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes": true, "no": false}')

// Map {'yes' => true, 'no' => false}

但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。

1
2
3
4
5
6
function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')

// Map {true => 7, Object {foo: 3} => ['abc']}

9、WeakMap

WeakMap结构与Map结构类似，也是用于生成键值对的集合。

1
2
3
4
5
6
7
8
9
10
11
12
// WeakMap 可以使用 set 方法添加成员
const wm1 = new WeakMap();
const key = {foo: 1};
wm1.set(key, 2);
wm1.get(key) // 2
// WeakMap 也可以接受一个数组，

// 作为构造函数的参数

const k1 = [1, 2, 3];

const k2 = [4, 5, 6];

const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);

wm2.get(k2) // "bar"

WeakMap与Map的区别有两点。

• WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。
• WeakMap的键名所指向的对象，不计入垃圾回收机制。

如：

1
2
3
4
5
6
7
const map = new WeakMap();
map.set(1, 2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
map.set(null, 2)
// TypeError: Invalid value used as weak map key

上面代码中，如果将数值1和Symbol值作为 WeakMap 的键名，都会报错。

WeakMap的设计目的在于，有时我们想在某个对象上面存放一些数据，但是这会形成对于这个对象的引用。

如：

1
2
3
4
5
6
const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
  [e1, 'foo 元素'],
  [e2, 'bar 元素'],
];

上面代码中，e1和e2是两个对象，我们通过arr数组对这两个对象添加一些文字说明。这就形成了arr对e1和e2的引用。

一旦不再需要这两个对象，我们就必须手动删除这个引用，否则垃圾回收机制就不会释放e1和e2占用的内存。

1
2
3
4
// 不需要 e1 和 e2 的时候
// 必须手动删除引用
arr [0] = null;
arr [1] = null;

上面这样的写法显然很不方便。一旦忘了写，就会造成内存泄露。

WeakMap 就是为了解决这个问题而诞生的，它的键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内。因此，只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。

ES6 Iterator 迭代器

JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。

Iterator是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

Iterator 的作用有三个：

• 一是为各种数据结构，提供一个统一的、简便的访问接口；
• 二是使得数据结构的成员能够按某种次序排列；
• 三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。

Iterator 的遍历过程是这样的。

（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

案例：模拟next方法返回值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var it = makeIterator(['a', 'b']);
it.next() // { value: "a", done: false }

it.next() // { value: "b", done: false }

it.next() // { value: undefined, done: true }
function makeIterator(array) {

var nextIndex = 0;

return {

next: function() {

return nextIndex < array.length ?

{value: array[nextIndex++], done: false} :

{value: undefined, done: true};

}

};

}

上面代码定义了一个makeIterator函数，它是一个遍历器生成函数，作用就是返回一个遍历器对象。对数组['a', 'b']执行这个函数，就会返回该数组的遍历器对象（即指针对象）it。

指针对象的next方法，用来移动指针。开始时，指针指向数组的开始位置。然后，每次调用next方法，指针就会指向数组的下一个成员。第一次调用，指向a；第二次调用，指向b。

next方法返回一个对象，表示当前数据成员的信息。这个对象具有value和done两个属性，value属性返回当前位置的成员，done属性是一个布尔值，表示遍历是否结束，即是否还有必要再一次调用next方法。

默认 Iterator 接口

ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。

Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。

至于属性名Symbol.iterator，它是一个表达式，返回Symbol对象的iterator属性，这是一个预定义好的、类型为 Symbol 的特殊值，所以要放在方括号内

如：

1
2
3
4
5
6
7
8
9
10
11
12
const obj = {
  [Symbol.iterator] : function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};

上面代码中，对象obj是可遍历的（iterable），因为具有Symbol.iterator属性。执行这个属性，会返回一个遍历器对象。该对象的根本特征就是具有next方法。每次调用next方法，都会返回一个代表当前成员的信息对象，具有value和done两个属性。

ES6 的有些数据结构原生具备 Iterator 接口（比如数组），即不用任何处理，就可以被for...of循环遍历。原因在于，这些数据结构原生部署了Symbol.iterator属性。

原生具备 Iterator 接口的数据结构如下：

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

下面的例子是数组的Symbol.iterator属性。

1
2
3
4
5
6
7
let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();
iter.next() // { value: 'a', done: false }

iter.next() // { value: 'b', done: false }

iter.next() // { value: 'c', done: false }

iter.next() // { value: undefined, done: true }

上面代码中，变量arr是一个数组，原生就具有遍历器接口，部署在arr的Symbol.iterator属性上面。所以，调用这个属性，就得到遍历器对象。

一个对象如果要具备可被for...of循环调用的 Iterator 接口，就必须在Symbol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class RangeIterator {
  constructor(start, stop) {
    this.value = start;
    this.stop = stop;
  }
Symbol.iterator { return this; }
next() {

var value = this.value;

if (value < this.stop) {

this.value++;

return {done: false, value: value};

}

return {done: true, value: undefined};

}

}
function range(start, stop) {

return new RangeIterator(start, stop);

}
for (var value of range(0, 3)) {

console.log(value); // 0, 1, 2

}

上面代码是一个类部署 Iterator 接口的写法。Symbol.iterator属性对应一个函数，执行后返回当前对象的遍历器对象。

下面是通过遍历器实现指针结构的例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function Obj(value) {
  this.value = value;
  this.next = null;
}
Obj.prototype[Symbol.iterator] = function() {

var iterator = { next: next };
var current = this;
function next() {

if (current) {

var value = current.value;

current = current.next;

return { done: false, value: value };

}

return { done: true };

}

return iterator;

}
var one = new Obj(1);

var two = new Obj(2);

var three = new Obj(3);
one.next = two;

two.next = three;
for (var i of one){

console.log(i); // 1, 2, 3

}

上面代码首先在构造函数的原型链上部署Symbol.iterator方法，调用该方法会返回遍历器对象iterator，调用该对象的next方法，在返回一个值的同时，自动将内部指针移到下一个实例。

ES6 Promise 对象

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

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

Promise对象有以下两个特点。

• （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
• （2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Promise也有一些缺点。

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

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

基本用法

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

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数

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

创造语法如下：

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

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。then方法可以接受两个回调函数作为参数。

• 第一个回调函数是Promise对象的状态变为resolved时调用，
• 第二个回调函数是Promise对象的状态变为rejected时调用。

这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数。

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

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

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

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

下面代码中，不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。

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

如：

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

console.log(value);

});

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

Promise 新建后就会立即执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});
promise.then(function() {

console.log('resolved.');

});
console.log('Hi!');
// Promise

// Hi!

// resolved

上面代码中，Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。

调用resolve或reject并不会终结 Promise 的参数函数的执行。

1
2
3
4
5
6
7
8
new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1

上面代码中，调用resolve(1)以后，后面的console.log(2)还是会执行，并且会首先打印出来。这是因为立即 resolved 的 Promise 是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务。

一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。所以，最好在它们前面加上return语句，这样就不会有意外。

1
2
3
4
5
new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
})

案例：异步加载图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();
image.onload = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  resolve(image);
};

image.onerror = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  reject(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">'Could not load image at '</span> + url));
};

image.src = url;

});

}

上面代码中，使用Promise包装了一个图片加载的异步操作。如果加载成功，就调用resolve方法，否则就调用reject方法。

案例：实现的 Ajax 操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
});
return promise;

};
getJSON("/posts.json").then(function(json) {

console.log('Contents: ' + json);

}, function(error) {

console.error('出错了', error);

});

上面代码中，getJSON是对 XMLHttpRequest 对象的封装，用于发出一个针对 JSON 数据的 HTTP 请求，并且返回一个Promise对象。需要注意的是，在getJSON内部，resolve函数和reject函数调用时，都带有参数。

resolve嵌套Promise

如果调用resolve函数和reject函数时带有参数，那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例，表示抛出的错误；resolve函数的参数除了正常的值以外，还可能是另一个 Promise 实例，比如像下面这样。

1
2
3
4
5
6
7
8
const p1 = new Promise(function (resolve, reject) {
  // ...
});
const p2 = new Promise(function (resolve, reject) {

// ...

resolve(p1);

})

上面代码中，p1和p2都是 Promise 的实例，但是p2的resolve方法将p1作为参数，即一个异步操作的结果是返回另一个异步操作。

注意：这时p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态。如果p1的状态是pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是resolved或者rejected，那么p2的回调函数将会立刻执行。

如：

1
2
3
4
5
6
7
8
9
10
11
12
const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})
const p2 = new Promise(function (resolve, reject) {

setTimeout(() => resolve(p1), 1000)

})
p2

.then(result => console.log(result))

.catch(error => console.log(error))

// Error: fail

上面代码中，p1是一个 Promise，3 秒之后变为rejected。p2的状态在 1 秒之后改变，resolve方法返回的是p1。由于p2返回的是另一个 Promise，导致p2自己的状态无效了，由p1的状态决定p2的状态。所以，后面的then语句都变成针对后者（p1）。又过了 2 秒，p1变为rejected，导致触发catch方法指定的回调函数。

Promise.all()

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

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

上面代码中，Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用Promise.resolve`方法，将参数转为 Promise 实例，再进一步处理。

p的状态由p1、p2、p3决定，分成两种情况。

• （1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
• （2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

下面是一个具体的例子。

1
2
3
4
5
6
7
8
9
10
// 生成一个Promise对象的数组
const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
  return getJSON('/post/' + id + ".json");
});
Promise.all(promises).then(function (posts) {

// ...

}).catch(function(reason){

// ...

});

上面代码中，promises是包含 6 个 Promise 实例的数组，只有这 6 个实例的状态都变成fulfilled，或者其中有一个变为rejected，才会调用Promise.all方法后面的回调函数。

Promise.race()

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

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

上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

Promise.race()方法的参数与Promise.all()方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resolve()方法，将参数转为 Promise 实例，再进一步处理。

下面是一个例子，如果指定时间内没有获得结果，就将 Promise 的状态变为reject，否则变为resolve。

1
2
3
4
5
6
7
8
9
10
const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);
p

.then(console.log)

.catch(console.error);

上面代码中，如果 5 秒之内fetch方法无法返回结果，变量p的状态就会变为rejected，从而触发catch方法指定的回调函数。

Promise.allSettled()

有时候，我们希望等到一组异步操作都结束了，不管每一个操作是成功还是失败，再进行下一步操作。但是，现有的 Promise 方法很难实现这个要求。

Promise.all()方法只适合所有异步操作都成功的情况，如果有一个操作失败，就无法满足要求。

1
2
3
4
5
6
7
8
9
const urls = [url_1, url_2, url_3];
const requests = urls.map(x => fetch(x));
try {

await Promise.all(requests);

console.log('所有请求都成功。');

} catch {

console.log('至少一个请求失败，其他请求可能还没结束。');

}

上面示例中，Promise.all()可以确定所有请求都成功了，但是只要有一个请求失败，它就会报错，而不管另外的请求是否结束。

为了解决这个问题，ES2020 引入了Promise.allSettled()方法，用来确定一组异步操作是否都结束了（不管成功或失败）。所以，它的名字叫做”Settled“，包含了”fulfilled“和”rejected“两种情况。

Promise.allSettled()方法接受一个数组作为参数，数组的每个成员都是一个 Promise 对象，并返回一个新的 Promise 对象。只有等到参数数组的所有 Promise 对象都发生状态变更（不管是fulfilled还是rejected），返回的 Promise 对象才会发生状态变更。

1
2
3
4
5
6
7
8
const promises = [
  fetch('/api-1'),
  fetch('/api-2'),
  fetch('/api-3'),
];
await Promise.allSettled(promises);

removeLoadingIndicator();

上面示例中，数组promises包含了三个请求，只有等到这三个请求都结束了（不管请求成功还是失败），removeLoadingIndicator()才会执行。

该方法返回的新的 Promise 实例，一旦发生状态变更，状态总是fulfilled，不会变成rejected。状态变成fulfilled后，它的回调函数会接收到一个数组作为参数，该数组的每个成员对应前面数组的每个 Promise 对象。

1
2
3
4
5
6
7
8
9
10
11
12
const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);
const allSettledPromise = Promise.allSettled([resolved, rejected]);
allSettledPromise.then(function (results) {

console.log(results);

});

// [

//    { status: 'fulfilled', value: 42 },

//    { status: 'rejected', reason: -1 }

// ]

上面代码中，Promise.allSettled()的返回值allSettledPromise，状态只可能变成fulfilled。它的回调函数接收到的参数是数组results。该数组的每个成员都是一个对象，对应传入Promise.allSettled()的数组里面的两个 Promise 对象。

results的每个成员是一个对象，对象的格式是固定的，对应异步操作的结果。

1
2
3
4
5
// 异步操作成功时
{status: 'fulfilled', value: value}
// 异步操作失败时

{status: 'rejected', reason: reason}

成员对象的status属性的值只可能是字符串fulfilled或字符串rejected，用来区分异步操作是成功还是失败。如果是成功（fulfilled），对象会有value属性，如果是失败（rejected），会有reason属性，对应两种状态时前面异步操作的返回值。

下面是返回值的用法例子。

1
2
3
4
5
6
7
8
9
10
const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ];
const results = await Promise.allSettled(promises);
// 过滤出成功的请求

const successfulPromises = results.filter(p => p.status === 'fulfilled');
// 过滤出失败的请求，并输出原因

const errors = results

.filter(p => p.status === 'rejected')

.map(p => p.reason);

Promise.any()

ES2021 引入了Promise.any()方法。该方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。

1
2
3
4
5
6
7
8
9
Promise.any([
  fetch('https://v8.dev/').then(() => 'home'),
  fetch('https://v8.dev/blog').then(() => 'blog'),
  fetch('https://v8.dev/docs').then(() => 'docs')
]).then((first) => {  // 只要有一个 fetch() 请求成功
  console.log(first);
}).catch((error) => { // 所有三个 fetch() 全部请求失败
  console.log(error);
});

只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。

Promise.any()跟Promise.race()方法很像，只有一点不同，就是Promise.any()不会因为某个 Promise 变成rejected状态而结束，必须等到所有参数 Promise 变成rejected状态才会结束。

下面是Promise()与await命令结合使用的例子。

1
2
3
4
5
6
7
8
9
10
11
12
const promises = [
  fetch('/endpoint-a').then(() => 'a'),
  fetch('/endpoint-b').then(() => 'b'),
  fetch('/endpoint-c').then(() => 'c'),
];
try {

const first = await Promise.any(promises);

console.log(first);

} catch (error) {

console.log(error);

}

上面代码中，Promise.any()方法的参数数组包含三个 Promise 操作。其中只要有一个变成fulfilled，Promise.any()返回的 Promise 对象就变成fulfilled。如果所有三个操作都变成rejected，那么await命令就会抛出错误。

Promise.any()抛出的错误，不是一个一般的 Error 错误对象，而是一个 AggregateError 实例。它相当于一个数组，每个成员对应一个被rejected的操作所抛出的错误。下面是 AggregateError 的实现示例。

1
2
3
4
5
6
7
// new AggregateError() extends Array
const err = new AggregateError();

err.push(new Error("first error"));

err.push(new Error("second error"));

// ...

throw err;

下面是一个例子。

1
2
3
4
5
6
7
8
9
10
11
var resolved = Promise.resolve(42);
var rejected = Promise.reject(-1);
var alsoRejected = Promise.reject(Infinity);
Promise.any([resolved, rejected, alsoRejected]).then(function (result) {

console.log(result); // 42

});
Promise.any([rejected, alsoRejected]).catch(function (results) {

console.log(results); // [-1, Infinity]

});

Promise.resolve()

有时需要将现有对象转为 Promise 对象，Promise.resolve()方法就起到这个作用。

const jsPromise = Promise.resolve($.ajax('/whatever.json'));

上面代码将 jQuery 生成的deferred对象，转为一个新的 Promise 对象。

Promise.resolve()等价于下面的写法。

1
2
3
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

Promise.resolve()方法的参数分成四种情况。

（1）参数是一个 Promise 实例

如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

（2）参数是一个thenable对象

thenable对象指的是具有then方法的对象，比如下面这个对象。

1
2
3
4
5
let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

Promise.resolve()方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then()方法。

1
2
3
4
5
6
7
8
9
10
let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};
let p1 = Promise.resolve(thenable);

p1.then(function (value) {

console.log(value);  // 42

});

上面代码中，thenable对象的then()方法执行后，对象p1的状态就变为resolved，从而立即执行最后那个then()方法指定的回调函数，输出42。

（3）参数不是具有then()方法的对象，或根本就不是对象

如果参数是一个原始值，或者是一个不具有then()方法的对象，则Promise.resolve()方法返回一个新的 Promise 对象，状态为resolved。

1
2
3
4
5
6
const p = Promise.resolve('Hello');
p.then(function (s) {

console.log(s)

});

// Hello

上面代码生成一个新的 Promise 对象的实例p。由于字符串Hello不属于异步操作（判断方法是字符串对象不具有 then 方法），返回 Promise 实例的状态从一生成就是resolved，所以回调函数会立即执行。Promise.resolve()方法的参数，会同时传给回调函数。

（4）不带有任何参数

Promise.resolve()方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。

所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve()方法。

1
2
3
4
5
const p = Promise.resolve();
p.then(function () {

// ...

});

上面代码的变量p就是一个 Promise 对象。

需要注意的是，立即resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。

1
2
3
4
5
6
7
8
9
10
11
12
13
setTimeout(function () {
  console.log('three');
}, 0);
Promise.resolve().then(function () {

console.log('two');

});
console.log('one');
// one

// two

// three

上面代码中，setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.resolve()在本轮“事件循环”结束时执行，console.log('one')则是立即执行，因此最先输出。

Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

1
2
3
4
5
6
7
8
const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))
p.then(null, function (s) {

console.log(s)

});

// 出错了

上面代码生成一个 Promise 对象的实例p，状态为rejected，回调函数会立即执行。

Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。

1
2
3
4
5
Promise.reject('出错了')
.catch(e => {
  console.log(e === '出错了')
})
// true

上面代码中，Promise.reject()方法的参数是一个字符串，后面catch()方法的参数e就是这个字符串。

ES6 Generator 函数

基本用法

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

形式上，Generator 函数是一个普通函数，但是有两个特征。

• 一是，function关键字与函数名之间有一个星号；
• 二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

如：

1
2
3
4
5
6
7
function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}
var hw = helloWorldGenerator();

上面代码定义了一个 Generator 函数helloWorldGenerator，它内部有两个yield表达式（hello和world），即该函数有三个状态：hello，world 和 return 语句（结束执行）。

然后，Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。

使用时，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。

换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

如：

1
2
3
4
5
6
7
8
9
10
11
hw.next()
// { value: 'hello', done: false }
hw.next()

// { value: 'world', done: false }
hw.next()

// { value: 'ending', done: true }
hw.next()

// { value: undefined, done: true }

上面代码一共调用了四次next方法。

1. 第一次调用，Generator 函数开始执行，直到遇到第一个yield表达式为止。next方法返回一个对象，它的value属性就是当前yield表达式的值hello，done属性的值false，表示遍历还没有结束。
2. 第二次调用，Generator 函数从上次yield表达式停下的地方，一直执行到下一个yield表达式。next方法返回的对象的value属性就是当前yield表达式的值world，done属性的值false，表示遍历还没有结束。
3. 第三次调用，Generator 函数从上次yield表达式停下的地方，一直执行到return语句（如果没有return语句，就执行到函数结束）。next方法返回的对象的value属性，就是紧跟在return语句后面的表达式的值（如果没有return语句，则value属性的值为undefined），done属性的值true，表示遍历已经结束。
4. 第四次调用，此时 Generator 函数已经运行完毕，next方法返回对象的value属性为undefined，done属性为true。以后再调用next方法，返回的都是这个值。

总结：调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

yield 表达式

由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

yield表达式只能用在 Generator 函数里面，用在其他地方都会报错。

遍历器对象的next方法的运行逻辑如下：

1. （1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
2. （2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
3. （3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
4. （4）如果该函数没有return语句，则返回的对象的value属性值为undefined。

yield表达式与return语句既有相似之处，也有区别。

相似之处在于，都能返回紧跟在语句后面的那个表达式的值。

区别在于每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。一个函数里面，只能执行一次（或者说一个）return语句，但是可以执行多次（或者说多个）yield表达式。正常函数只能返回一个值，因为只能执行一次return；

Generator 函数可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数。

1
2
3
4
5
6
7
8
9
function* f() {
  console.log('执行了！')
}
var generator = f();
setTimeout(function () {

generator.next()

}, 2000);

上面代码中，函数f如果是普通函数，在为变量generator赋值时就会执行。但是，函数f是一个 Generator 函数，就变成只有调用next方法时，函数f才会执行。

与 Iterator 接口的关系

上一章说过，任意一个对象的Symbol.iterator方法，等于该对象的遍历器生成函数，调用该函数会返回该对象的一个遍历器对象。

由于 Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口。

1
2
3
4
5
6
7
8
var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};
[...myIterable] // [1, 2, 3]

上面代码中，Generator 函数赋值给Symbol.iterator属性，从而使得myIterable对象具有了 Iterator 接口，可以被...运算符遍历了。

next()的参数

yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}
var a = foo(5);

a.next() // Object{value:6, done:false}

a.next() // Object{value:NaN, done:false}

a.next() // Object{value:NaN, done:true}
var b = foo(5);

b.next() // { value:6, done:false }

b.next(12) // { value:8, done:false }

b.next(13) // { value:42, done:true }

上面代码中，第二次运行next方法的时候不带参数，导致 y 的值等于2 * undefined（即NaN），除以 3 以后还是NaN，因此返回对象的value属性也等于NaN。第三次运行Next方法的时候不带参数，所以z等于undefined，返回对象的value属性等于5 + NaN + undefined，即NaN。

如果向next方法提供参数，返回结果就完全不一样了。上面代码第一次调用b的next方法时，返回x+1的值6；第二次调用next方法，将上一次yield表达式的值设为12，因此y等于24，返回y / 3的值8；第三次调用next方法，将上一次yield表达式的值设为13，因此z等于13，这时x等于5，y等于24，所以return语句的值等于42。

ES6 async 函数

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是什么？一句话，它就是 Generator 函数的语法糖。

如：依次读取两个文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const fs = require('fs');
const readFile = function (fileName) {

return new Promise(function (resolve, reject) {

fs.readFile(fileName, function(error, data) {

if (error) return reject(error);

resolve(data);

});

});

};
const gen = function* () {

const f1 = yield readFile('/etc/fstab');

const f2 = yield readFile('/etc/shells');

console.log(f1.toString());

console.log(f2.toString());

};

上面代码的函数gen可以写成async函数，就是下面这样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const fs = require('fs');
const readFile = function (fileName) {

return new Promise(function (resolve, reject) {

fs.readFile(fileName, function(error, data) {

if (error) return reject(error);

resolve(data);

});

});

};
const asyncReadFile = async function () {

const f1 = await readFile('/etc/fstab');

const f2 = await readFile('/etc/shells');

console.log(f1.toString());

console.log(f2.toString());

};

一比较就会发现，async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。

await

正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。

如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject。

await命令只能用在async函数之中，如果用在普通函数，就会报错。

如果有多个await命令，可以统一放在try...catch结构中。

1
2
3
4
5
6
7
8
9
10
11
12
async function main() {
  try {
    const val1 = await firstStep();
    const val2 = await secondStep(val1);
    const val3 = await thirdStep(val1, val2);
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Final: '</span>, val3);

}

catch (err) {

console.error(err);

}

}

多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。

1
2
let foo = await getFoo();
let bar = await getBar();

上面代码中，getFoo和getBar是两个独立的异步操作（即互不依赖），被写成继发关系。这样比较耗时，因为只有getFoo完成以后，才会执行getBar，完全可以让它们同时触发。

1
2
3
4
5
6
7
8
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二

let fooPromise = getFoo();

let barPromise = getBar();

let foo = await fooPromise;

let bar = await barPromise;

上面两种写法，getFoo和getBar都是同时触发，这样就会缩短程序的执行时间。

async + Promise

async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。

进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

案例：获取股票报价

1
2
3
4
5
6
7
8
9
async function getStockPriceByName(name) {
  const symbol = await getStockSymbol(name);
  const stockPrice = await getStockPrice(symbol);
  return stockPrice;
}
getStockPriceByName('goog').then(function (result) {

console.log(result);

});

函数前面的async关键字，表明该函数内部有异步操作。调用该函数时，会立即返回一个Promise对象。

案例：指定多少毫秒后输出一个值。

1
2
3
4
5
6
7
8
9
10
11
12
function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
async function asyncPrint(value, ms) {

await timeout(ms);

console.log(value);

}
asyncPrint('hello world', 50);

上面代码指定 50 毫秒以后，输出hello world。

由于async函数返回的是 Promise 对象，可以作为await命令的参数。所以，上面的例子也可以写成下面的形式。

1
2
3
4
5
6
7
8
9
10
11
12
async function timeout(ms) {
  await new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
async function asyncPrint(value, ms) {

await timeout(ms);

console.log(value);

}
asyncPrint('hello world', 50);

async 函数有多种使用形式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 函数声明
async function foo() {}
// 函数表达式

const foo = async function () {};
// 对象的方法

let obj = { async foo() {} };

obj.foo().then(...)
// Class 的方法

class Storage {

constructor() {

this.cachePromise = caches.open('avatars');

}
async getAvatar(name) {

const cache = await this.cachePromise;

return cache.match(/avatars/${name}.jpg);

}

}
const storage = new Storage();

storage.getAvatar('jake').then(…);
// 箭头函数

const foo = async () => {};

ES6 Proxy 代理

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

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截。

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

new Proxy()表示生成一个Proxy实例：

• target参数表示所要拦截的目标对象，
• handler参数也是一个对象，用来定制拦截行为。

如：

1
2
3
4
5
6
7
8
9
var proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 35;
  }
});
proxy.time // 35

proxy.name // 35

proxy.title // 35

拦截模式

Proxy 支持的拦截操作共 13 种：

• get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。
• set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
• has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
• deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
• ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
• getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
• defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
• preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
• getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
• isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
• setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
• apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
• construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。

案例：模拟vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="input" />
	</body>
	<script type="text/javascript">
		input = document.querySelector("#input")
		const value = "1"
	vm = VM(input, value)
	<span class="hljs-comment">// vm.value = ""</span>
	<span class="hljs-built_in">console</span>.log(vm)


	<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">VM</span><span class="hljs-params">(el, value)</span> </span>{
		pro = <span class="hljs-keyword">new</span> Proxy({
			value: value
		}, {
			<span class="hljs-comment">// 重写 get 方法，target:被代理对象的拷贝</span>
			get: (target, key) =&gt; {
				text = el.value
				<span class="hljs-comment">// return target[key] // 等价于下面这句</span>
				<span class="hljs-keyword">return</span> Reflect.get(target, key)
			},
			<span class="hljs-comment">// 重写 set 方法，target:被代理对象的拷贝</span>
			set: (target, key, value) =&gt; {
				<span class="hljs-comment">// target[key] = value  // 等价于下面这句</span>
				Reflect.set(target, key, value)
				el.value = target[key]
			}
		})
		pro.value = value
		el.onkeyup = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
			pro.value = <span class="hljs-keyword">this</span>.value
			<span class="hljs-built_in">console</span>.log(pro.value)
		}
		<span class="hljs-keyword">return</span> pro;
	}
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>

</html>

拦截函数说明

1、get()

get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为：

• 目标对象 target
• 属性名 propKey
• proxy 实例本身 receiver（严格地说，是操作行为所针对的对象），可选。

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var person = {
  name: "张三"
};
var proxy = new Proxy(person, {

get: function(target, propKey) {

if (propKey in target) {

return target[propKey];

} else {

throw new ReferenceError("Prop name "" + propKey + "" does not exist.");

}

}

});
proxy.name // "张三"

proxy.age // 抛出一个错误

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

get方法可以继承。

1
2
3
4
5
6
7
8
9
let proto = new Proxy({}, {
  get(target, propertyKey, receiver) {
    console.log('GET ' + propertyKey);
    return target[propertyKey];
  }
});
let obj = Object.create(proto);

obj.foo // "GET foo"

上面代码中，拦截操作定义在Prototype对象上面，所以如果读取obj对象继承的属性时，拦截会生效。

案例：使用get拦截，实现数组读取负数的索引。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function createArray(...elements) {
  let handler = {
    get(target, propKey, receiver) {
      let index = Number(propKey);
      if (index < 0) {
        propKey = String(target.length + index);
      }
      return Reflect.get(target, propKey, receiver);
    }
  };
let target = [];

target.push(...elements);

return new Proxy(target, handler);

}
let arr = createArray('a', 'b', 'c');

arr[-1] // c

上面代码中，数组的位置参数是-1，就会输出数组的倒数第一个成员。

案例：利用 Proxy，可以将读取属性的操作（get），转变为执行某个函数，从而实现属性的链式操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var pipe = function (value) {
  var funcStack = [];
  var oproxy = new Proxy({} , {
    get : function (pipeObject, fnName) {
      if (fnName === 'get') {
        return funcStack.reduce(function (val, fn) {
          return fn(val);
        },value);
      }
      funcStack.push(window[fnName]);
      return oproxy;
    }
  });
return oproxy;

}
var double = n => n * 2;

var pow    = n => n * n;

var reverseInt = n => n.toString().split("").reverse().join("") | 0;
pipe(3).double.pow.reverseInt.get; // 63

上面代码设置 Proxy 以后，达到了将函数名链式使用的效果。

案例：利用get拦截，实现一个生成各种 DOM 节点的通用函数dom。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const dom = new Proxy({}, {
  get(target, property) {
    return function(attrs = {}, ...children) {
      const el = document.createElement(property);
      for (let prop of Object.keys(attrs)) {
        el.setAttribute(prop, attrs[prop]);
      }
      for (let child of children) {
        if (typeof child === 'string') {
          child = document.createTextNode(child);
        }
        el.appendChild(child);
      }
      return el;
    }
  }
});
const el = dom.div({},

'Hello, my name is ',

dom.a({href: '//example.com'}, 'Mark'),

'. I like:',

dom.ul({},

dom.li({}, 'The web'),

dom.li({}, 'Food'),

dom.li({}, '…actually that's it')

)

);
document.body.appendChild(el);

下面是一个get方法的第三个参数的例子，它总是指向原始的读操作所在的那个对象，一般情况下就是 Proxy 实例。

1
2
3
4
5
6
const proxy = new Proxy({}, {
  get: function(target, key, receiver) {
    return receiver;
  }
});
proxy.getReceiver === proxy // true

上面代码中，proxy对象的getReceiver属性是由proxy对象提供的，所以receiver指向proxy对象。

1
2
3
4
5
6
7
8
const proxy = new Proxy({}, {
  get: function(target, key, receiver) {
    return receiver;
  }
});
const d = Object.create(proxy);

d.a === d // true

上面代码中，d对象本身没有a属性，所以读取d.a的时候，会去d的原型proxy对象找。这时，receiver就指向d，代表原始的读操作所在的那个对象。

如果一个属性不可配置（configurable）且不可写（writable），则 Proxy 不能修改该属性，否则通过 Proxy 对象访问该属性会报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const target = Object.defineProperties({}, {
  foo: {
    value: 123,
    writable: false,
    configurable: false
  },
});
const handler = {

get(target, propKey) {

return 'abc';

}

};
const proxy = new Proxy(target, handler);
proxy.foo

// TypeError: Invariant check failed

2、set()

set方法用来拦截某个属性的赋值操作，可以接受四个参数

• 目标对象 obj
• 属性名 prop
• 属性值 value
• Proxy receiver 实例本身，可选。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }
<span class="hljs-comment">// 对于满足条件的 age 属性以及其他属性，直接保存</span>
obj[prop] = value;
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;

}

};
let person = new Proxy({}, validator);
person.age = 100;
person.age // 100

person.age = 'young' // 报错

person.age = 300 // 报错

上面代码中，由于设置了存值函数set，任何不符合要求的age属性赋值，都会抛出一个错误，这是数据验证的一种实现方法。利用set方法，还可以数据绑定，即每当对象发生变化时，会自动更新 DOM。

有时，我们会在对象上面设置内部属性，属性名的第一个字符使用下划线开头，表示这些属性不应该被外部使用。结合get和set方法，就可以做到防止这些内部属性被外部读写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const handler = {
  get (target, key) {
    invariant(key, 'get');
    return target[key];
  },
  set (target, key, value) {
    invariant(key, 'set');
    target[key] = value;
    return true;
  }
};
function invariant (key, action) {
  if (key[0] === '_') {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}
const target = {};
const proxy = new Proxy(target, handler);
proxy._prop
// Error: Invalid attempt to get private "_prop" property
proxy._prop = 'c'
// Error: Invalid attempt to set private "_prop" property

上面代码中，只要读写的属性名的第一个字符是下划线，一律抛错，从而达到禁止读写内部属性的目的。

下面是set方法第四个参数的例子。

1
2
3
4
5
6
7
8
9
const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
    return true;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';
proxy.foo === proxy // true

上面代码中，set方法的第四个参数receiver，指的是原始的操作行为所在的那个对象，

一般情况下是proxy实例本身，如：

1
2
3
4
5
6
7
8
9
10
11
12
const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
    return true;
  }
};
const proxy = new Proxy({}, handler);
const myObj = {};
Object.setPrototypeOf(myObj, proxy);
myObj.foo = 'bar';

myObj.foo === myObj // true

上面代码中，设置myObj.foo属性的值时，myObj并没有foo属性，因此引擎会到myObj的原型链去找foo属性。myObj的原型对象proxy是一个 Proxy 实例，设置它的foo属性会触发set方法。这时，第四个参数receiver就指向原始赋值行为所在的对象myObj。

注意，如果目标对象自身的某个属性不可写，那么set方法将不起作用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const obj = {};
Object.defineProperty(obj, 'foo', {
  value: 'bar',
  writable: false
});
const handler = {

set: function(obj, prop, value, receiver) {

obj[prop] = 'baz';

return true;

}

};
const proxy = new Proxy(obj, handler);

proxy.foo = 'baz';

proxy.foo // "bar"

上面代码中，obj.foo属性不可写，Proxy 对这个属性的set代理将不会生效。

注意，set代理应当返回一个布尔值。严格模式下，set代理如果没有返回true，就会报错。

1
2
3
4
5
6
7
8
9
10
11
'use strict';
const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
    // 无论有没有下面这一行，都会报错
    return false;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';
// TypeError: 'set' on proxy: trap returned falsish for property 'foo'

上面代码中，严格模式下，set代理返回false或者undefined，都会报错。

3、apply()

apply方法拦截函数的调用、call和apply等操作。

apply方法可以接受三个参数：

• 目标对象 target
• 目标对象的上下文对象（this） ctx
• 目标对象的参数数组 args

如：

1
2
3
4
5
6
7
8
9
10
var target = function () { return 'I am the target'; };
var handler = {
  apply: function () {
    return 'I am the proxy';
  }
};
var p = new Proxy(target, handler);
p() // "I am the proxy"

上面代码中，变量p是 Proxy 的实例，当它作为函数调用时（p()），就会被apply方法拦截，返回一个字符串。

如：

1
2
3
4
5
6
7
8
9
10
11
12
var twice = {
  apply (target, ctx, args) {
    return Reflect.apply(...arguments) * 2;
  }
};
function sum (left, right) {
  return left + right;
};
var proxy = new Proxy(sum, twice);
proxy(1, 2) // 6
proxy.call(null, 5, 6) // 22
proxy.apply(null, [7, 8]) // 30

上面代码中，每当执行proxy函数（直接调用或call和apply调用），就会被apply方法拦截。

另外，直接调用Reflect.apply方法，也会被拦截。

Reflect.apply(proxy, null, [9, 10]) // 38

4、has()

has()方法用来拦截HasProperty操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符。

has()方法可以接受两个参数，分别是目标对象、需查询的属性名。

下面的例子使用has()方法隐藏某些属性，不被in运算符发现。

1
2
3
4
5
6
7
8
9
10
11
var handler = {
  has (target, key) {
    if (key[0] === '_') {
      return false;
    }
    return key in target;
  }
};
var target = { _prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
'_prop' in proxy // false

上面代码中，如果原对象的属性名的第一个字符是下划线，proxy.has()就会返回false，从而不会被in运算符发现。

如果原对象不可配置或者禁止扩展，这时has()拦截会报错。

1
2
3
4
5
6
7
8
9
10
var obj = { a: 10 };
Object.preventExtensions(obj);
var p = new Proxy(obj, {

has: function(target, prop) {

return false;

}

});
'a' in p // TypeError is thrown

上面代码中，obj对象禁止扩展，结果使用has拦截就会报错。也就是说，如果某个属性不可配置（或者目标对象不可扩展），则has()方法就不得“隐藏”（即返回false）目标对象的该属性。

值得注意的是，has()方法拦截的是HasProperty操作，而不是HasOwnProperty操作，即has()方法不判断一个属性是对象自身的属性，还是继承的属性。

另外，虽然for...in循环也用到了in运算符，但是has()拦截对for...in循环不生效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
let stu1 = {name: '张三', score: 59};
let stu2 = {name: '李四', score: 99};
let handler = {

has(target, prop) {

if (prop === 'score' && target[prop] < 60) {

console.log(${target.name} 不及格);

return false;

}

return prop in target;

}

}
let oproxy1 = new Proxy(stu1, handler);

let oproxy2 = new Proxy(stu2, handler);
'score' in oproxy1

// 张三 不及格

// false
'score' in oproxy2

// true
for (let a in oproxy1) {

console.log(oproxy1[a]);

}

// 张三

// 59
for (let b in oproxy2) {

console.log(oproxy2[b]);

}

// 李四

// 99

上面代码中，has()拦截只对in运算符生效，对for...in循环不生效，导致不符合要求的属性没有被for...in循环所排除。

5、construct()

construct()方法用于拦截new命令，下面是拦截对象的写法。

1
2
3
4
5
const handler = {
  construct (target, args, newTarget) {
    return new target(...args);
  }
};

construct()方法可以接受三个参数。

• target：目标对象。
• args：构造函数的参数数组。
• newTarget：创造实例对象时，new命令作用的构造函数（下面例子的p）。

1
2
3
4
5
6
7
8
9
10
const p = new Proxy(function () {}, {
  construct: function(target, args) {
    console.log('called: ' + args.join(', '));
    return { value: args[0] * 10 };
  }
});
(new p(1)).value

// "called: 1"

// 10

construct()方法返回的必须是一个对象，否则会报错。

1
2
3
4
5
6
7
8
const p = new Proxy(function() {}, {
  construct: function(target, argumentsList) {
    return 1;
  }
});
new p() // 报错

// Uncaught TypeError: 'construct' on proxy: trap returned non-object ('1')

另外，由于construct()拦截的是构造函数，所以它的目标对象必须是函数，否则就会报错。

1
2
3
4
5
6
7
8
const p = new Proxy({}, {
  construct: function(target, argumentsList) {
    return {};
  }
});
new p() // 报错

// Uncaught TypeError: p is not a constructor

上面例子中，拦截的目标对象不是一个函数，而是一个对象（new Proxy()的第一个参数），导致报错。

注意，construct()方法中的this指向的是handler，而不是实例对象。

1
2
3
4
5
6
7
8
9
const handler = {
  construct: function(target, args) {
    console.log(this === handler);
    return new target(...args);
  }
}
let p = new Proxy(function () {}, handler);

new p() // true

6、deleteProperty()

deleteProperty方法用于拦截delete操作，如果这个方法抛出错误或者返回false，当前属性就无法被delete命令删除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var handler = {
  deleteProperty (target, key) {
    invariant(key, 'delete');
    delete target[key];
    return true;
  }
};
function invariant (key, action) {
  if (key[0] === '_') {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}
var target = { _prop: 'foo' };

var proxy = new Proxy(target, handler);

delete proxy._prop

// Error: Invalid attempt to delete private "_prop" property

上面代码中，deleteProperty方法拦截了delete操作符，删除第一个字符为下划线的属性会报错。

注意，目标对象自身的不可配置（configurable）的属性，不能被deleteProperty方法删除，否则报错。

7、defineProperty()

defineProperty()方法拦截了Object.defineProperty()操作。

1
2
3
4
5
6
7
8
var handler = {
  defineProperty (target, key, descriptor) {
    return false;
  }
};
var target = {};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar' // 不会生效

上面代码中，defineProperty()方法内部没有任何操作，只返回false，导致添加新属性总是无效。注意，这里的false只是用来提示操作失败，本身并不能阻止添加新属性。

注意，如果目标对象不可扩展（non-extensible），则defineProperty()不能增加目标对象上不存在的属性，否则会报错。另外，如果目标对象的某个属性不可写（writable）或不可配置（configurable），则defineProperty()方法不得改变这两个设置。

8、getOwnPropertyDescriptor()

getOwnPropertyDescriptor()方法拦截Object.getOwnPropertyDescriptor()，返回一个属性描述对象或者undefined。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var handler = {
  getOwnPropertyDescriptor (target, key) {
    if (key[0] === '_') {
      return;
    }
    return Object.getOwnPropertyDescriptor(target, key);
  }
};
var target = { _foo: 'bar', baz: 'tar' };
var proxy = new Proxy(target, handler);
Object.getOwnPropertyDescriptor(proxy, 'wat')
// undefined
Object.getOwnPropertyDescriptor(proxy, '_foo')
// undefined
Object.getOwnPropertyDescriptor(proxy, 'baz')
// { value: 'tar', writable: true, enumerable: true, configurable: true }

上面代码中，handler.getOwnPropertyDescriptor()方法对于第一个字符为下划线的属性名会返回undefined。

9、getPrototypeOf()

getPrototypeOf()方法主要用来拦截获取对象原型。具体来说，拦截下面这些操作。

• Object.prototype.__proto__
• Object.prototype.isPrototypeOf()
• Object.getPrototypeOf()
• Reflect.getPrototypeOf()
• instanceof

下面是一个例子。

1
2
3
4
5
6
7
var proto = {};
var p = new Proxy({}, {
  getPrototypeOf(target) {
    return proto;
  }
});
Object.getPrototypeOf(p) === proto // true

上面代码中，getPrototypeOf()方法拦截Object.getPrototypeOf()，返回proto对象。

注意，getPrototypeOf()方法的返回值必须是对象或者null，否则报错。另外，如果目标对象不可扩展（non-extensible）， getPrototypeOf()方法必须返回目标对象的原型对象。

10、isExtensible()

isExtensible()方法拦截Object.isExtensible()操作。

1
2
3
4
5
6
7
8
9
10
var p = new Proxy({}, {
  isExtensible: function(target) {
    console.log("called");
    return true;
  }
});
Object.isExtensible(p)

// "called"

// true

上面代码设置了isExtensible()方法，在调用Object.isExtensible时会输出called。

注意，该方法只能返回布尔值，否则返回值会被自动转为布尔值。

这个方法有一个强限制，它的返回值必须与目标对象的isExtensible属性保持一致，否则就会抛出错误。

Object.isExtensible(proxy) === Object.isExtensible(target)

下面是一个例子。

1
2
3
4
5
6
7
8
var p = new Proxy({}, {
  isExtensible: function(target) {
    return false;
  }
});
Object.isExtensible(p)

// Uncaught TypeError: 'isExtensible' on proxy: trap result does not reflect extensibility of proxy target (which is 'true')

11、ownKeys()

ownKeys()方法用来拦截对象自身属性的读取操作。具体来说，拦截以下操作。

• Object.getOwnPropertyNames()
• Object.getOwnPropertySymbols()
• Object.keys()
• for...in循环

下面是拦截Object.keys()的例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let target = {
  a: 1,
  b: 2,
  c: 3
};
let handler = {

ownKeys(target) {

return ['a'];

}

};
let proxy = new Proxy(target, handler);
Object.keys(proxy)

// [ 'a' ]

上面代码拦截了对于target对象的Object.keys()操作，只返回a、b、c三个属性之中的a属性。

下面的例子是拦截第一个字符为下划线的属性名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let target = {
  _bar: 'foo',
  _prop: 'bar',
  prop: 'baz'
};
let handler = {

ownKeys (target) {

return Reflect.ownKeys(target).filter(key => key[0] !== '_');

}

};
let proxy = new Proxy(target, handler);

for (let key of Object.keys(proxy)) {

console.log(target[key]);

}

// "baz"

注意，使用Object.keys()方法时，有三类属性会被ownKeys()方法自动过滤，不会返回。

• 目标对象上不存在的属性
• 属性名为 Symbol 值
• 不可遍历（enumerable）的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let target = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.for('secret')]: '4',
};
Object.defineProperty(target, 'key', {

enumerable: false,

configurable: true,

writable: true,

value: 'static'

});
let handler = {

ownKeys(target) {

return ['a', 'd', Symbol.for('secret'), 'key'];

}

};
let proxy = new Proxy(target, handler);
Object.keys(proxy)

// ['a']

上面代码中，ownKeys()方法之中，显式返回不存在的属性（d）、Symbol 值（Symbol.for('secret')）、不可遍历的属性（key），结果都被自动过滤掉。

ownKeys()方法还可以拦截Object.getOwnPropertyNames()。

1
2
3
4
5
6
7
8
var p = new Proxy({}, {
  ownKeys: function(target) {
    return ['a', 'b', 'c'];
  }
});
Object.getOwnPropertyNames(p)

// [ 'a', 'b', 'c' ]

for...in循环也受到ownKeys()方法的拦截。

1
2
3
4
5
6
7
8
9
10
const obj = { hello: 'world' };
const proxy = new Proxy(obj, {
  ownKeys: function () {
    return ['a', 'b'];
  }
});
for (let key in proxy) {

console.log(key); // 没有任何输出

}

上面代码中，ownkeys()指定只返回a和b属性，由于obj没有这两个属性，因此for...in循环不会有任何输出。

ownKeys()方法返回的数组成员，只能是字符串或 Symbol 值。如果有其他类型的值，或者返回的根本不是数组，就会报错。

1
2
3
4
5
6
7
8
9
10
var obj = {};
var p = new Proxy(obj, {

ownKeys: function(target) {

return [123, true, undefined, null, {}, []];

}

});
Object.getOwnPropertyNames(p)

// Uncaught TypeError: 123 is not a valid property name

上面代码中，ownKeys()方法虽然返回一个数组，但是每一个数组成员都不是字符串或 Symbol 值，因此就报错了。

如果目标对象自身包含不可配置的属性，则该属性必须被ownKeys()方法返回，否则报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {};
Object.defineProperty(obj, 'a', {
  configurable: false,
  enumerable: true,
  value: 10 }
);
var p = new Proxy(obj, {

ownKeys: function(target) {

return ['b'];

}

});
Object.getOwnPropertyNames(p)

// Uncaught TypeError: 'ownKeys' on proxy: trap result did not include 'a'

上面代码中，obj对象的a属性是不可配置的，这时ownKeys()方法返回的数组之中，必须包含a，否则会报错。

另外，如果目标对象是不可扩展的（non-extensible），这时ownKeys()方法返回的数组之中，必须包含原对象的所有属性，且不能包含多余的属性，否则报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var obj = {
  a: 1
};
Object.preventExtensions(obj);
var p = new Proxy(obj, {

ownKeys: function(target) {

return ['a', 'b'];

}

});
Object.getOwnPropertyNames(p)

// Uncaught TypeError: 'ownKeys' on proxy: trap returned extra keys but proxy target is non-extensible

上面代码中，obj对象是不可扩展的，这时ownKeys()方法返回的数组之中，包含了obj对象的多余属性b，所以导致了报错。

12、preventExtensions()

preventExtensions()方法拦截Object.preventExtensions()。该方法必须返回一个布尔值，否则会被自动转为布尔值。

这个方法有一个限制，只有目标对象不可扩展时（即Object.isExtensible(proxy)为false），proxy.preventExtensions才能返回true，否则会报错。

1
2
3
4
5
6
7
8
var proxy = new Proxy({}, {
  preventExtensions: function(target) {
    return true;
  }
});
Object.preventExtensions(proxy)

// Uncaught TypeError: 'preventExtensions' on proxy: trap returned truish but the proxy target is extensible

上面代码中，proxy.preventExtensions()方法返回true，但这时Object.isExtensible(proxy)会返回true，因此报错。

为了防止出现这个问题，通常要在proxy.preventExtensions()方法里面，调用一次Object.preventExtensions()。

1
2
3
4
5
6
7
8
9
10
11
var proxy = new Proxy({}, {
  preventExtensions: function(target) {
    console.log('called');
    Object.preventExtensions(target);
    return true;
  }
});
Object.preventExtensions(proxy)

// "called"

// Proxy {}

13、setPrototypeOf()

setPrototypeOf()方法主要用来拦截Object.setPrototypeOf()方法。

下面是一个例子。

1
2
3
4
5
6
7
8
9
10
var handler = {
  setPrototypeOf (target, proto) {
    throw new Error('Changing the prototype is forbidden');
  }
};
var proto = {};
var target = function () {};
var proxy = new Proxy(target, handler);
Object.setPrototypeOf(proxy, proto);
// Error: Changing the prototype is forbidden

上面代码中，只要修改target的原型对象，就会报错。

注意，该方法只能返回布尔值，否则会被自动转为布尔值。另外，如果目标对象不可扩展（non-extensible），setPrototypeOf()方法不得改变目标对象的原型。

Proxy 扩展

1、Proxy.revocable()

Proxy.revocable()方法返回一个可取消的 Proxy 实例。

1
2
3
4
5
6
7
8
9
10
let target = {};
let handler = {};
let {proxy, revoke} = Proxy.revocable(target, handler);
proxy.foo = 123;

proxy.foo // 123
revoke();

proxy.foo // TypeError: Revoked

Proxy.revocable()方法返回一个对象，该对象的proxy属性是Proxy实例，revoke属性是一个函数，可以取消Proxy实例。上面代码中，当执行revoke函数之后，再访问Proxy实例，就会抛出一个错误。

Proxy.revocable()的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。

2、this 问题

虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。

1
2
3
4
5
6
7
8
9
10
11
const target = {
  m: function () {
    console.log(this === proxy);
  }
};
const handler = {};
const proxy = new Proxy(target, handler);
target.m() // false

proxy.m()  // true

上面代码中，一旦proxy代理target，target.m()内部的this就是指向proxy，而不是target。

下面是一个例子，由于this指向的变化，导致 Proxy 无法代理目标对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const _name = new WeakMap();
class Person {

constructor(name) {

_name.set(this, name);

}

get name() {

return _name.get(this);

}

}
const jane = new Person('Jane');

jane.name // 'Jane'
const proxy = new Proxy(jane, {});

proxy.name // undefined

上面代码中，目标对象jane的name属性，实际保存在外部WeakMap对象_name上面，通过this键区分。由于通过proxy.name访问时，this指向proxy，导致无法取到值，所以返回undefined。

此外，有些原生对象的内部属性，只有通过正确的this才能拿到，所以 Proxy 也无法代理这些原生对象的属性。

1
2
3
4
5
6
const target = new Date();
const handler = {};
const proxy = new Proxy(target, handler);
proxy.getDate();

// TypeError: this is not a Date object.

上面代码中，getDate()方法只能在Date对象实例上面拿到，如果this不是Date对象实例就会报错。这时，this绑定原始对象，就可以解决这个问题。

1
2
3
4
5
6
7
8
9
10
11
12
const target = new Date('2015-01-01');
const handler = {
  get(target, prop) {
    if (prop === 'getDate') {
      return target.getDate.bind(target);
    }
    return Reflect.get(target, prop);
  }
};
const proxy = new Proxy(target, handler);
proxy.getDate() // 1

另外，Proxy 拦截函数内部的this，指向的是handler对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const handler = {
  get: function (target, key, receiver) {
    console.log(this === handler);
    return 'Hello, ' + key;
  },
  set: function (target, key, value) {
    console.log(this === handler);
    target[key] = value;
    return true;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo

// true

// Hello, foo
proxy.foo = 1

// true

上面例子中，get()和set()拦截函数内部的this，指向的都是handler对象。

ES6 Reflect对象

Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。

（1） 将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。

（2） 修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 老写法
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}
// 新写法

if (Reflect.defineProperty(target, property, attributes)) {

// success

} else {

// failure

}

（3） 让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。

1
2
3
4
5
// 老写法
'assign' in Object // true
// 新写法

Reflect.has(Object, 'assign') // true

（4）Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。

1
2
3
4
5
6
7
8
9
Proxy(target, {
  set: function(target, name, value, receiver) {
    var success = Reflect.set(target, name, value, receiver);
    if (success) {
      console.log('property ' + name + ' on ' + target + ' set to ' + value);
    }
    return success;
  }
});

上面代码中，Proxy方法拦截target对象的属性赋值行为。它采用Reflect.set方法将值赋值给对象的属性，确保完成原有的行为，然后再部署额外的功能。

Reflect对象一共有 13 个静态方法。

• Reflect.apply(target, thisArg, args)
• Reflect.construct(target, args)
• Reflect.get(target, name, receiver)
• Reflect.set(target, name, value, receiver)
• Reflect.defineProperty(target, name, desc)
• Reflect.deleteProperty(target, name)
• Reflect.has(target, name)
• Reflect.ownKeys(target)
• Reflect.isExtensible(target)
• Reflect.preventExtensions(target)
• Reflect.getOwnPropertyDescriptor(target, name)
• Reflect.getPrototypeOf(target)
• Reflect.setPrototypeOf(target, prototype)

上面这些方法的作用，大部分与Object对象的同名方法的作用都是相同的，而且它与Proxy对象的方法是一一对应的。下面是对它们的解释。

1、Reflect.get(target, name, receiver)

Reflect.get方法查找并返回target对象的name属性，如果没有该属性，则返回undefined。

1
2
3
4
5
6
7
8
9
10
11
var myObject = {
  foo: 1,
  bar: 2,
  get baz() {
    return this.foo + this.bar;
  },
}
Reflect.get(myObject, 'foo') // 1

Reflect.get(myObject, 'bar') // 2

Reflect.get(myObject, 'baz') // 3

如果name属性部署了读取函数（getter），则读取函数的this绑定receiver。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var myObject = {
  foo: 1,
  bar: 2,
  get baz() {
    return this.foo + this.bar;
  },
};
var myReceiverObject = {

foo: 4,

bar: 4,

};
Reflect.get(myObject, 'baz', myReceiverObject) // 8

如果第一个参数不是对象，Reflect.get方法会报错。

1
2
Reflect.get(1, 'foo') // 报错
Reflect.get(false, 'foo') // 报错

2、Reflect.set(target, name, value, receiver)

Reflect.set方法设置target对象的name属性等于value。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var myObject = {
  foo: 1,
  set bar(value) {
    return this.foo = value;
  },
}
myObject.foo // 1
Reflect.set(myObject, 'foo', 2);

myObject.foo // 2
Reflect.set(myObject, 'bar', 3)

myObject.foo // 3

如果name属性设置了赋值函数，则赋值函数的this绑定receiver。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var myObject = {
  foo: 4,
  set bar(value) {
    return this.foo = value;
  },
};
var myReceiverObject = {

foo: 0,

};
Reflect.set(myObject, 'bar', 1, myReceiverObject);

myObject.foo // 4

myReceiverObject.foo // 1

注意，如果 Proxy对象和 Reflect对象联合使用，前者拦截赋值操作，后者完成赋值的默认行为，而且传入了receiver，那么Reflect.set会触发Proxy.defineProperty拦截。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let p = {
  a: 'a'
};
let handler = {

set(target, key, value, receiver) {

console.log('set');

Reflect.set(target, key, value, receiver)

},

defineProperty(target, key, attribute) {

console.log('defineProperty');

Reflect.defineProperty(target, key, attribute);

}

};
let obj = new Proxy(p, handler);

obj.a = 'A';

// set

// defineProperty

上面代码中，Proxy.set拦截里面使用了Reflect.set，而且传入了receiver，导致触发Proxy.defineProperty拦截。这是因为Proxy.set的receiver参数总是指向当前的 Proxy实例（即上例的obj），而Reflect.set一旦传入receiver，就会将属性赋值到receiver上面（即obj），导致触发defineProperty拦截。如果Reflect.set没有传入receiver，那么就不会触发defineProperty拦截。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let p = {
  a: 'a'
};
let handler = {

set(target, key, value, receiver) {

console.log('set');

Reflect.set(target, key, value)

},

defineProperty(target, key, attribute) {

console.log('defineProperty');

Reflect.defineProperty(target, key, attribute);

}

};
let obj = new Proxy(p, handler);

obj.a = 'A';

// set

如果第一个参数不是对象，Reflect.set会报错。

1
2
Reflect.set(1, 'foo', {}) // 报错
Reflect.set(false, 'foo', {}) // 报错

3、Reflect.has(obj, name)

Reflect.has方法对应name in obj里面的in运算符。

1
2
3
4
5
6
7
8
9
var myObject = {
  foo: 1,
};
// 旧写法

'foo' in myObject // true
// 新写法

Reflect.has(myObject, 'foo') // true

如果Reflect.has()方法的第一个参数不是对象，会报错。

4、Reflect.deleteProperty(obj, name)

Reflect.deleteProperty方法等同于delete obj[name]，用于删除对象的属性。

1
2
3
4
5
6
7
const myObj = { foo: 'bar' };
// 旧写法

delete myObj.foo;
// 新写法

Reflect.deleteProperty(myObj, 'foo');

该方法返回一个布尔值。如果删除成功，或者被删除的属性不存在，返回true；删除失败，被删除的属性依然存在，返回false。

如果Reflect.deleteProperty()方法的第一个参数不是对象，会报错。

5、Reflect.construct(target, args)

Reflect.construct方法等同于new target(...args)，这提供了一种不使用new，来调用构造函数的方法。

1
2
3
4
5
6
7
8
9
function Greeting(name) {
  this.name = name;
}
// new 的写法

const instance = new Greeting('张三');
// Reflect.construct 的写法

const instance = Reflect.construct(Greeting, ['张三']);

如果Reflect.construct()方法的第一个参数不是函数，会报错。

6、Reflect.getPrototypeOf(obj)

Reflect.getPrototypeOf方法用于读取对象的__proto__属性，对应Object.getPrototypeOf(obj)。

1
2
3
4
5
6
7
const myObj = new FancyThing();
// 旧写法

Object.getPrototypeOf(myObj) === FancyThing.prototype;
// 新写法

Reflect.getPrototypeOf(myObj) === FancyThing.prototype;

Reflect.getPrototypeOf和Object.getPrototypeOf的一个区别是，如果参数不是对象，Object.getPrototypeOf会将这个参数转为对象，然后再运行，而Reflect.getPrototypeOf会报错。

1
2
Object.getPrototypeOf(1) // Number {[[PrimitiveValue]]: 0}
Reflect.getPrototypeOf(1) // 报错

7、Reflect.setPrototypeOf(obj, newProto)

Reflect.setPrototypeOf方法用于设置目标对象的原型（prototype），对应Object.setPrototypeOf(obj, newProto)方法。它返回一个布尔值，表示是否设置成功。

1
2
3
4
5
6
7
8
9
const myObj = {};
// 旧写法

Object.setPrototypeOf(myObj, Array.prototype);
// 新写法

Reflect.setPrototypeOf(myObj, Array.prototype);
myObj.length // 0

如果无法设置目标对象的原型（比如，目标对象禁止扩展），Reflect.setPrototypeOf方法返回false。

1
2
3
4
Reflect.setPrototypeOf({}, null)
// true
Reflect.setPrototypeOf(Object.freeze({}), null)
// false

如果第一个参数不是对象，Object.setPrototypeOf会返回第一个参数本身，而Reflect.setPrototypeOf会报错。

1
2
3
4
5
Object.setPrototypeOf(1, {})
// 1
Reflect.setPrototypeOf(1, {})

// TypeError: Reflect.setPrototypeOf called on non-object

如果第一个参数是undefined或null，Object.setPrototypeOf和Reflect.setPrototypeOf都会报错。

1
2
3
4
5
Object.setPrototypeOf(null, {})
// TypeError: Object.setPrototypeOf called on null or undefined
Reflect.setPrototypeOf(null, {})

// TypeError: Reflect.setPrototypeOf called on non-object

8、Reflect.apply(func, thisArg, args)

Reflect.apply方法等同于Function.prototype.apply.call(func, thisArg, args)，用于绑定this对象后执行给定函数。

一般来说，如果要绑定一个函数的this对象，可以这样写fn.apply(obj, args)，但是如果函数定义了自己的apply方法，就只能写成Function.prototype.apply.call(fn, obj, args)，采用Reflect对象可以简化这种操作。

1
2
3
4
5
6
7
8
9
10
11
const ages = [11, 33, 12, 54, 18, 96];
// 旧写法

const youngest = Math.min.apply(Math, ages);

const oldest = Math.max.apply(Math, ages);

const type = Object.prototype.toString.call(youngest);
// 新写法

const youngest = Reflect.apply(Math.min, Math, ages);

const oldest = Reflect.apply(Math.max, Math, ages);

const type = Reflect.apply(Object.prototype.toString, youngest, []);

9、Reflect.defineProperty(target, propertyKey, attributes)

Reflect.defineProperty方法基本等同于Object.defineProperty，用来为对象定义属性。未来，后者会被逐渐废除，请从现在开始就使用Reflect.defineProperty代替它。

1
2
3
4
5
6
7
8
9
10
11
12
13
function MyDate() {
  /*…*/
}
// 旧写法

Object.defineProperty(MyDate, 'now', {

value: () => Date.now()

});
// 新写法

Reflect.defineProperty(MyDate, 'now', {

value: () => Date.now()

});

如果Reflect.defineProperty的第一个参数不是对象，就会抛出错误，比如Reflect.defineProperty(1, 'foo')。

这个方法可以与Proxy.defineProperty配合使用。

1
2
3
4
5
6
7
8
9
10
11
const p = new Proxy({}, {
  defineProperty(target, prop, descriptor) {
    console.log(descriptor);
    return Reflect.defineProperty(target, prop, descriptor);
  }
});
p.foo = 'bar';

// {value: "bar", writable: true, enumerable: true, configurable: true}
p.foo // "bar"

上面代码中，Proxy.defineProperty对属性赋值设置了拦截，然后使用Reflect.defineProperty完成了赋值。

10、Reflect.getOwnPropertyDescriptor(target, propertyKey)

Reflect.getOwnPropertyDescriptor基本等同于Object.getOwnPropertyDescriptor，用于得到指定属性的描述对象，将来会替代掉后者。

1
2
3
4
5
6
7
8
9
10
11
var myObject = {};
Object.defineProperty(myObject, 'hidden', {
  value: true,
  enumerable: false,
});
// 旧写法

var theDescriptor = Object.getOwnPropertyDescriptor(myObject, 'hidden');
// 新写法

var theDescriptor = Reflect.getOwnPropertyDescriptor(myObject, 'hidden');

Reflect.getOwnPropertyDescriptor和Object.getOwnPropertyDescriptor的一个区别是，如果第一个参数不是对象，Object.getOwnPropertyDescriptor(1, 'foo')不报错，返回undefined，而Reflect.getOwnPropertyDescriptor(1, 'foo')会抛出错误，表示参数非法。

11、Reflect.isExtensible (target)

Reflect.isExtensible方法对应Object.isExtensible，返回一个布尔值，表示当前对象是否可扩展。

1
2
3
4
5
6
7
const myObject = {};
// 旧写法

Object.isExtensible(myObject) // true
// 新写法

Reflect.isExtensible(myObject) // true

如果参数不是对象，Object.isExtensible会返回false，因为非对象本来就是不可扩展的，而Reflect.isExtensible会报错。

1
2
Object.isExtensible(1) // false
Reflect.isExtensible(1) // 报错

12、Reflect.preventExtensions(target)

Reflect.preventExtensions对应Object.preventExtensions方法，用于让一个对象变为不可扩展。它返回一个布尔值，表示是否操作成功。

1
2
3
4
5
6
7
var myObject = {};
// 旧写法

Object.preventExtensions(myObject) // Object {}
// 新写法

Reflect.preventExtensions(myObject) // true

如果参数不是对象，Object.preventExtensions在 ES5 环境报错，在 ES6 环境返回传入的参数，而Reflect.preventExtensions会报错。

1
2
3
4
5
6
7
8
// ES5 环境
Object.preventExtensions(1) // 报错
// ES6 环境

Object.preventExtensions(1) // 1
// 新写法

Reflect.preventExtensions(1) // 报错

13、Reflect.ownKeys (target)

Reflect.ownKeys方法用于返回对象的所有属性，基本等同于Object.getOwnPropertyNames与Object.getOwnPropertySymbols之和。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var myObject = {
  foo: 1,
  bar: 2,
  [Symbol.for('baz')]: 3,
  [Symbol.for('bing')]: 4,
};
// 旧写法

Object.getOwnPropertyNames(myObject)

// ['foo', 'bar']
Object.getOwnPropertySymbols(myObject)

//[Symbol(baz), Symbol(bing)]
// 新写法

Reflect.ownKeys(myObject)

// ['foo', 'bar', Symbol(baz), Symbol(bing)]

如果Reflect.ownKeys()方法的第一个参数不是对象，会报错。

作业

使用set将数组去重复

var arr = [1,1,2,1,2,3,2,3,4,1,1,3,4,5,5,3]

使用json方式实现数组深拷贝

var arr = [1,2,3,45,6,7,78]

使用异步同时下载3张图片

要求分别显示出三张图片的下载进度状态

    </article>