ECMAScript 6 新特性（二）

ECMAScript 6 新特性（一）

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

ECMAScript 7~10 新特性

1. 生成器

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

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());

代码说明：

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

1.1 生成器函数参数

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 实例

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

   传统实现

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

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

   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();
   

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

   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 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

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

2.1 then 方法

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

1. resolve 参数

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

2. reject 参数

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

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

基本使用

// 实例化 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 读取文件

// 引入模块
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 请求

// 封装 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

// 创建 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 对象，对象状态由回调函数的执行结果决定：

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

   返回状态 resolved（成功），返回值为对象成功的值

   const result = p.then(
     (data) => {
       console.log(data);
       return 123;
     },
     (error) => {
       console.warn(error);
     }
   );
   
   console.log(result); // 返回值为 123
   

   如果未使用 return 进行返回，则返回值为 undefined。

2. 返回 Promise 对象

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

   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，返回值为 出错了
   

3. 抛出错误

   返回状态 rejected（失败）

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

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

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

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

2.2 catch 方法

指定 Promise 对象失败的回调

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

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

3. Set

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

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

// 声明一个 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 的属 性和方法：

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

// 声明 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 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

知识点：

1. class 声明类

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

2. constructor 定义构造函数初始化

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

3. extends 继承父类

   class 父类 {
     ...
   }
   
   class 子类 extends 父类 {
     ...
   }
   

4. super 调用父级构造方法

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

5. static 定义静态方法和属性

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

   静态属性和方法不能被读取和继承。

6. 子类重写父类方法

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

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

5.1 get 和 set

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。

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

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

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

console.log(a, b, c);

6.2 Number 方法

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

   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：非数值

2. Number.isNaN() 检查是否为NaN

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

3. Number.parseInt() 和 Number.parseFloat() 用于将字符串转换为数字

   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
   

   这两个方法都会忽略字符串开头的空格，并且只解析到第一个非数字字符为止。

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

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

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

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

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

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

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

7. 对象方法扩展

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

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

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

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

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

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

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

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

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

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

8. 模块化

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

8.1 模块化的好处

模块化的优势有以下几点

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

8.2 模块化规范产品

ES6 之前的模块化规范有：

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

8.3 ES6 模块化语法

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

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

暴露接口的几种方式

1. 默认暴露：export default 接口;

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

   导入：import 接口 from ...;

2. 命名暴露：export 属性名/对象名/...;

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

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

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

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

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

4. 重新暴露

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

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

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

   …

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