ECMAScript 6 新特性（二）

ECMAScript 6 新特性（一）

ECMAScript 6 新特性（二）（本文）

ECMAScript 7~10 新特性

1. 生成器

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

js 复制代码

function* gen() {
  yield 1; // yield 关键字用来暂停函数的执行
  yield 2;
  yield 3;
}

let iterator = gen();
// 调用
// console.log(iterator); // 不能调用
// iterator.next(); // 正常调用

// for (let v of gen()) {
//     console.log(v); // 每次返回一个 yield 的值
// }
// 等同于
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

代码说明：

* 的位置没有限制；
生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到 yield 语句后的值；
yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next 方法，执行一段代码；
next 方法可以传递实参，作为 yield 语句的返回值。

1.1 生成器函数参数

js 复制代码

function* gen(arg) {
  console.log(arg);
  let one = yield 1;
  console.log(one);
  let two = yield 2;
  console.log(two);
  let three = yield 3;
  console.log(three);
}

let iterator = gen("aaaaa");
console.log(iterator.next());
// next 方法可以传入实参，传入参数会被赋值给 yield 表达式的值
console.log(iterator.next("BBB"));
console.log(iterator.next("CCC"));
console.log(iterator.next('DDD'));

1.2 实例

1s后控制台输出111，2s后输出222，3s后输出333

传统实现

js 复制代码

setTimeout(() => {
  console.log("111");
  setTimeout(() => {
    console.log("222");
    setTimeout(() => {
      console.log("333");
    }, 3000);
  }, 2000);
}, 1000);

代码较为复杂，不易扩展，使用生成器函数实现

js 复制代码

function one() {
  setTimeout(() => {
    console.log("111");
    iterator.next();
  }, 1000);
}
function two() {
  setTimeout(() => {
    console.log("222");
    iterator.next();
  }, 2000);
}
function three() {
  setTimeout(() => {
    console.log("333");
    iterator.next();
  }, 3000);
}

function* gen() {
  yield one();
  yield two();
  yield three();
}

// 调用生成器函数
let iterator = gen();
iterator.next();

模拟获取用户数据、订单数据、商品数据

js 复制代码

function getUsers() {
  setTimeout(() => {
    let data = "用户数据";
    // 调用 next 方法，并将数据传入
    iterator.next(data);
  }, 1000);
}
function getOrders() {
  setTimeout(() => {
    let data = "订单数据";
    iterator.next(data);
  }, 1000);
}
function getGoods() {
  setTimeout(() => {
    let data = "商品数据";
    iterator.next(data);
  }, 1000);
}

function* genData() {
  let users = yield getUsers();
  console.log(users);
  let orders = yield getOrders();
  console.log(orders);
  let goods = yield getGoods();
  console.log(goods);
}

// 调用生成器函数
let iterator = genData();
iterator.next();

2. Promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

Promise 构造函数：Promise (excutor) {}；
Promise.prototype.then 方法；
Promise.prototype.catch 方法。

2.1 then 方法

实例化 Promise 时，使用回调函数作为参数，回调函数通常有两个参数：

resolve 参数

当执行到 resolve( ... ) 时，会调用 then 方法中的第一个参数（回调）；
reject 参数

当执行到 reject( ... ) 时，会调用 then 方法中的第二个参数（回调）；

then 方法中通常有两个回调函数作为参数，第一个回调在成功时（resolve）调用，第二个回调在出错时（reject）调用，第二个参数可以省略。

基本使用

js 复制代码

// 实例化 Promise 对象
const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    let data = "Hello, world!";
    // resolve(data); // 调用 then 方法中第一个回调
    reject(new Error("出错了")); // 调用 then 方法中第二个回调
  }, 1000);
});

// 调用 Promise 对象的 then 方法
p.then(
  (value) => {
    console.log(value);
  }, // 成功回调
  (reason) => {
    console.error(reason);
  } // 失败回调
);

下面列举几个使用 Promise 进行封装的案例：

2.1.1 读取文件

js 复制代码

// 引入模块
const fs = require("fs");

// 使用Promise 封装
const p = new Promise((resolve, reject) => {
  fs.readFile("./resources/为学.md", (err, data) => {
    // 如果失败，则抛出错误
    if (err) reject(err);
    // 否则，打印文件内容
    resolve(data);
  });
});

p.then(
  (value) => {
    console.log(value.toString());
  },
  (reason) => {
    console.log("出错了：" + reason);
  }
);

2.1.2 发送 AJAX 请求

js 复制代码

// 封装 Promise 对象
const p = new Promise((resolve, reject) => {
  // 1. 创建对象
  const xhr = new XMLHttpRequest();
  // 2. 初始化
  xhr.open("GET", "https://dog.ceo/api/breeds/image/random");
  // 3. 发送
  xhr.send();
  // 4. 绑定事件，处理响应结果
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.responseText);
      } else {
        reject(xhr.statusText);
      }
    }
  };
});

// 指定回调
p.then(
  (data) => {
    console.log(data);
  },
  (error) => {
    console.log(error);
  }
);

2.1.3 Promise.prototype.then

js 复制代码

// 创建 Promise 对象
const p = new Promise((resolve, reject) => {
  resolve("用户数据");
  // reject("出错了");
});

const result = p.then(
  (data) => {
    console.log(data);
  },
  (error) => {
    console.warn(error);
  }
);

console.log(result);

2.1.4 说明

调用 then 方法的返回结果是 Promise 对象，对象状态由回调函数的执行结果决定：

返回结果是非 Promise 类型的属性

返回状态 resolved（成功），返回值为对象成功的值
js 复制代码
```
const result = p.then(
  (data) => {
    console.log(data);
    return 123;
  },
  (error) => {
    console.warn(error);
  }
);

console.log(result); // 返回值为 123
```
如果未使用 return 进行返回，则返回值为 undefined。

返回 Promise 对象

返回值和返回状态均由返回的 promise 对象的返回值和状态决定

js 复制代码

const result = p.then(
  (data) => {
    console.log(data);
    return new Promise((resolve, reject) => {
      resolve("ok");
      // reject("出错了");
    });
  },
  (error) => {
    console.warn(error);
  }
);
console.log(result); // 返回状态为 resolved，返回值为 ok
// console.log(result); // 返回状态为 rejected，返回值为 出错了

抛出错误

返回状态 rejected（失败）

js 复制代码

const result = p.then(
  (data) => {
    console.log(data);
    // throw new Error("出错了");
    throw "出错了";
  },
  (error) => {
    console.warn(error);
  }
);

console.log(result); // 返回状态为 rejected，返回值为 出错了

由于 promise 可以返回 promise 对象，因此可以进行链式调用

js 复制代码

// 链式调用
p.then(
  (data) => {},
  (error) => {}
).then(
  (data) => {},
  // 失败回调可以省略
)...;

同时避免的回调地域的问题

2.2 catch 方法

指定 Promise 对象失败的回调

js 复制代码

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("出错了");
  }, 1000);
});

p.catch((err) => {
  console.log(err); // 输出 "出错了"
});

3. Set

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的 ，集合实现了 iterator 接口，所以可以使用扩展运算符 和 for...of... 进行遍历，集合的属性和方法：

size 返回集合的元素个数
add 增加一个新元素，返回当前集合
delete 删除元素，返回 boolean 值
has 检测集合中是否包含某个元素，返回 boolean 值
clear 清空集合，返回 undefined

js 复制代码

// 声明一个 set
let s1 = new Set();
let s2 = new Set([1, 2, 3, 4, 5]);

console.log(s1, typeof s1); // Set(0) {} object
console.log(s2, typeof s2);

// 元素个数
console.log(s2.size); // 5
// 添加元素
s2.add(6);
console.log(s2); // Set(6) {1, 2, 3, 4, 5, 6}
// 删除元素
s2.delete(1);
console.log(s2); // Set(5) {2, 3, 4, 5, 6}
// 判断元素是否存在
console.log(s2.has(2)); // true
console.log(s2.has(7)); // false
// 清空集合
s2.clear();
console.log(s2); // Set(0) {}

4. Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合 。但是"键" 的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了 iterator 接口，所以可以使用扩展运算符 和 for...of... 进行遍历。Map 的属性和方法：

size 返回 Map 的元素个数
set 增加一个新元素，返回当前 Map
get 返回键名对象的键值
has 检测 Map 中是否包含某个元素，返回 boolean 值
clear 清空集合，返回 undefined

js 复制代码

// 声明 map
let m = new Map();

// 向 map 中添加键值对
m.set("name", "张三");
m.set("change", () => {
  console.log("change");
});
m.set({ age: 25 }, ["李四"]);
// size
console.log(m.size);
// 删除
m.delete("name");
// 获取
console.log(m.get("change"));
// 清空
m.clear();

console.log(m);

5. Class

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

知识点：

class 声明类

js 复制代码

class 类名 {
  属性 = 值;
  ...
  方法() {
    ...
  }
}

constructor 定义构造函数初始化

js 复制代码

class 类名 {
  // 构造方法，实例化时自动调用
  constructor(参数1, 参数2) {
    this.属性1 = 参数1;
    this.属性2 = 参数2;
  }
  ... // 属性、方法
}

// 实例化对象
let 对象 = new 类名(参数1, 参数2);

extends 继承父类

js 复制代码

class 父类 {
  ...
}

class 子类 extends 父类 {
  ...
}

super 调用父级构造方法

js 复制代码

class 父类 {
  constructor(参数1, 参数2) {
    this.属性1 = 参数1;
    this.属性2 = 参数2;
  }
}

class 子类 extends 父类 {
  constructor(参数1, 参数2, 参数3, 参数4) {
    super(参数1, 参数2); // 继承父类的构造方法
    // 子类的属性
    this.属性1 = 参数3;
  }
}

static 定义静态方法和属性
js 复制代码
```
class 类名 {
  static 属性 = 值;

  static 方法() {
    ...
  }
}
```
静态属性和方法不能被读取和继承。

子类重写父类方法

子类中可以声明一个跟父类同名的方法

js 复制代码

class 父类 {
  方法() {
    ...
  }
}

class 子类 extends 父类 {
  // 重写父类中的同名方法
  方法() {
    ...
  }
}

5.1 get 和 set

js 复制代码

class Phone {
  get price() {
    console.log("价格属性被读取");
    return 3999
  }
  set price(value) {
    console.log("价格属性被修改");
  }
}

let p = new Phone();

console.log(p.price);
p.price = "free";

6. 数值扩展

Number.EPSILON 是 JavaScript 的最小精度，即 2.220446049250313e-16。

当两个数的差值小于该值，就可以认为这两个数相等，主要用于浮点数的计算。

js 复制代码

console.log(0.1 + 0.2 === 0.3); // false，因为浮点数计算不精确
console.log(Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON); // true
// 这时就可以认为 0.1 + 0.2 等于 0.3

6.1 二进制、八进制、十六进制

进制	前缀
二进制	0b
八进制	0o
十六进制	0x

js 复制代码

let a = 0b1010; // 10
let b = 0o777; // 511
let c = 0x1F;  // 31

console.log(a, b, c);

6.2 Number 方法

Number.isFinite() 检查是否为有限数

js 复制代码

console.log(Number.isFinite(Infinity)); // false
console.log(Number.isFinite(-Infinity)); // false
console.log(Number.isFinite(NaN)); // false
console.log(Number.isFinite(0)); // true

Infinity：无穷大
NaN：非数值

Number.isNaN() 检查是否为NaN

js 复制代码

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(0)); // false

Number.parseInt() 和 Number.parseFloat() 用于将字符串转换为数字
js 复制代码
```
let d = "123";
let e = "123.456";
let f = "0b1010";

console.log(Number.parseInt(d)); // 123
console.log(Number.parseFloat(e)); // 123.456
console.log(Number.parseInt(f)); // 0
```
这两个方法都会忽略字符串开头的空格，并且只解析到第一个非数字字符为止。

Number.isInteger() 检查是否为整数

js 复制代码

console.log(Number.isInteger(123)); // true
console.log(Number.isInteger(123.456)); // false

Math.trunc() 用于截断小数部分，返回整数部分

js 复制代码

let i = 123.456;
let j = -123.456;

console.log(Math.trunc(i)); // 123
console.log(Math.trunc(j)); // -123

Math.sign() 用于判断一个数的正负号

数	返回值
正数	1
零	0
负数	-1

js 复制代码

console.log(Math.sign(5)); // 1
console.log(Math.sign(-5)); // -1
console.log(Math.sign(0)); // 0

7. 对象方法扩展

Object.is() 判断两个值是否完全相等

js 复制代码

console.log(Object.is(120, 121)); // false
console.log(Object.is(1.1 + 1.2, 2.3)); // true

作用类似于 == 或 ===，但区别在于对 NaN 的判断

js 复制代码

console.log(Object.is(NaN, NaN)); // true
console.log(NaN === NaN); // false

Object.assign() 用于两个对象的合并

js 复制代码

const config1 = {
  host: "localhost",
  port: 3306,
  pass: "root",
};
const config2 = {
  host: "www.baidu.com",
  port: "8080",
};
console.log(Object.assign(config1, config2));

合并两个对象，相同属性的值，后者覆盖前者

Object.setPrototypeOf() 设置对象的原型对象

Object.getPrototypeOf() 获取对象的原型对象

js 复制代码

const school = {
  name: "学院",
};
const cities = {
  xiaoqv: ["商丘", "开封", "洛阳"],
};
Object.setPrototypeOf(school, cities);
console.log(school);
console.log(Object.getPrototypeOf(school));

8. 模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

8.1 模块化的好处

模块化的优势有以下几点

防止命名冲突
代码复用
高维护性
- 开发人员对文件的修改不会产生过多冲突
- 当某个功能需要修改、更新时，只需要对单个模块修改即可

8.2 模块化规范产品

ES6 之前的模块化规范有：

规范	产品
CommonJS	NodeJS、Browserify
AMD	requireJS
CMD	seaJS

8.3 ES6 模块化语法

模块功能主要由两个命令构成：export 和 import。

export 命令用于规定模块的对外接口（暴露模块接口）；
import 命令用于输入其他模块提供的功能（导入其它模块）。

暴露接口的几种方式

默认暴露：export default 接口;

每个模块只能有一个默认暴露。

导入：import 接口 from ...;
命名暴露：export 属性名/对象名/...;

命名导出允许你导出多个值，并且每个导出都有一个名称。

导入：import { 属性名/对象名/... } from ...;
混合暴露：export { 属性名/对象名/..., 属性名2/对象名2/... as default };

在一个模块中同时使用默认暴露和命名暴露。

导入：import 属性名2/对象名2/..., { 属性名/对象名/... } from ...;
重新暴露

可以从一个模块中导出另一个模块的导出内容。

模块1：export 属性名/对象名/...;

模块2：export { 属性名/对象名/... } from ...;

...

导入：import { 属性名/对象名/... } from ...;