ECMAScript 7~10 新特性

ECMAScript 7 新特性

ECMAScript 6 新特性（一）

ECMAScript 6 新特性（二）

ECMAScript 7~10 新特性（本文）

1. 数组方法

Array.prototype.includes() 用来检测数组中是否包含指定元素，返回布尔值（存在返回 true，不存在返回 false）

js 复制代码

const mingzhu = ["西游记", "水浒传", "三国演义", "红楼梦"];

console.log(mingzhu.includes("西游记")); // true
console.log(mingzhu.indexOf("西游记"));
console.log(mingzhu.includes("斗破苍穹")); // false

与 indexOf() 方法类似，但是 indexOf() 方法返回的是第一个匹配项的索引，没有则返回 -1。

2. 指数操作符

在 ES7 中引入指数运算符 **，用来实现幂运算，功能与 Math.pow() 结果相同

js 复制代码

console.log(2 ** 3);
console.log(Math.pow(2, 3)); // 与上面等价

ECMAScript 8 新特性

1. async 和 await

async 和 await 两种语法结合可以让异步代码像同步代码一样，解决异步编程的方案。

1.1 async 函数

async 函数的返回值为 promise 对象

返回的结果不是 Promise 对象，则函数的返回结果就是成功的 Promise 对象

js 复制代码

async function fn() {
  return 1; // 返回值不为 Promise 对象
}
console.log(fn()); // Promise {<resolved>: 1}

抛出错误，返回结果是一个失败的 Promise 对象。
js 复制代码
```
async function fn() {
  throw new Error('出错了');
}
console.log(fn());
```

返回结果是 Promise 对象，则函数的返回结果就是这个 Promise 对象。

js 复制代码

async function fn() {
  return new Promise((resolve, reject) => {
    // resolve('成功');
    reject("失败");
  });
}
console.log(fn());

1.2 await 表达式

await 必须写在 async 函数中
await 右侧的表达式一般为 promise 对象
await 返回的是 promise 成功的值
await 的 promise 失败了，就会抛出异常，需要通过 try...catch 捕获处理

js 复制代码

const p = new Promise((resolve, reject) => {
  // resolve('成功');
  reject("失败");
});
async function main() {
  try {
    let result = await p;

    console.log(result);
  } catch (err) {
    console.log(err);
  }
}

1.3 结合使用

async 和 await 结合使用发送 AJAX 请求

js 复制代码

function sendAJAX(url) {
  return new Promise((resolve, reject) => {
    // 1. 创建对象
    const xhr = new XMLHttpRequest();
    // 2. 初始化
    xhr.open("GET", url);
    // 3. 发送
    xhr.send();
    // 4. 事件绑定
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(xhr.responseText);
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };
  });
}

// then 方法测试
//   sendAJAX("https://api.oick.cn/dutang/api.php").then(
//     (value) => { console.log(value); },
//     (reason) => { console.error(reason); }
//   );

// async 和 await 方法测试
async function main() {
  let result = await sendAJAX("https://api.oick.cn/dutang/api.php");
  console.log(result);
}
main();

2. 对象方法扩展

2.1 Object.values 和 Object.entries

Object.values() 方法返回一个给定对象的所有可枚举属性值的数组
Object.entries() 方法返回一个给定对象自身可遍历属性 [key, value] 的数组

将对象转换为数组

js 复制代码

const school = {
  name: "学院",
  address: "河南省郑州市",
};

// 获取对象所有的键
console.log(Object.keys(school)); // ["name", "address"]

// 获取对象所有的值
console.log(Object.values(school)); // ["学院", "河南省郑州市"]

// entries 方法返回一个数组，数组的每一项是一个键值对数组
console.log(Object.entries(school)); // [["name", "学院"], ["address", "河南省郑州市"]]

2.2 Object.getOwnPropertyDescriptors

描述对象所有属性的详细信息

对象中属性值的基本配置信息有

配置值说明

value 属性的值

writable true/false 是否可写

enumerable true/false 是否可枚举

configurable true/false 是否可配置
js 复制代码
const obj = Object.create(null, {
  name: {
    value: "张三",
    writable: true,
    enumerable: true,
    configurable: true,
  },
});

配置	值	说明
value		属性的值
writable	true/false	是否可写
enumerable	true/false	是否可枚举
configurable	true/false	是否可配置

ECMAScript 9 新特性

1. Rest/spread 参数

Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符。

Rest 参数

js 复制代码

function connect({ host, port, ...user }) {
  console.log(host);
  console.log(port);
  console.log(user);
  // { username: 'admin', password: '123456', type: 'admin' }
}

connect({
  host: "localhost",
  port: 8080,
  username: "admin",
  password: "123456",
  type: "admin",
});

扩展运算符

js 复制代码

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { d: 4, e: 5 };

const newObj = { ...obj1, ...obj2 };

console.log(newObj);
// { a: 1, b: 2, c: 3, d: 4, e: 5 }

2. 正则表达式

2.1 命名捕获分组

ES9 允许命名捕获组使用符号 ? ，这样获取捕获结果可读性更强

js 复制代码

let str = "<a href='http://www.baidu.com'>百度</a>";

// 需求：提取 url 与 文本内容

// 1. 使用正则匹配
// let reg = /<a href='(.*)'>(.*)<\/a>/;
// const result = reg.exec(str);
// console.log(result);

// 2. 使用命名捕获分组
let reg = /<a href='(?<url>.*)'>(?<text>.*)<\/a>/;
const result = reg.exec(str);
console.log(result.groups.url);
console.log(result.groups.text);

exec 方法是 JavaScript 中正则表达式对象的一个方法，用于在字符串中执行搜索匹配操作。它的作用是根据正则表达式查找字符串中的匹配项，并返回一个结果数组或 null。
在使用正则表达式进行匹配时，括号 () 在正则表达式中被称为捕获组（capturing group）。捕获组的作用是将其括号内的内容作为一个整体进行匹配，并且在匹配成功后，可以将这部分内容单独提取出来。

2.2 反向断言

ES9 支持反向断言，通过对匹配结果前面的内容进行判断，对匹配进行筛选。

js 复制代码

let str = "helloworld啊吧啊吧4545啦啦啦";

// 正向断言
// const reg = /\d+(?=啦)/;
// const result = reg.exec(str);

// 反向断言
const reg = /(?<=吧)\d+/;
const result = reg.exec(str);

console.log(result);

2.3 dotAll 模式

正则表达式中点 . 匹配除回车外的任何单字符，标记 s 改变这种行为，允许行终止符出现

js 复制代码

let str = `<ul>
                <li>
                    <a>肖申克的救赎</a>
                    <p>上映时间：1994-09-10</p>
                </li>
                <li>
                    <a>阿甘正传</a>
                    <p>上映时间：1994-06-05</p>
                </li>
            </ul>`;

const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;

let result;
let data = [];
while ((result = reg.exec(str))) {
  // console.log(result);
  data.push({ title: result[1], time: result[2] });
}
console.log(data);

ECMAScript 10 新特性

1. 对象扩展方法

Object.fromEntries() 方法，将键值对数组转换为对象，与 ES8 中 [Object.entries](#2.1 Object.values 和 Object.entries) 方法相互为逆运算

js 复制代码

const result = Object.fromEntries([ ["name", "Tom"], ["age", 25] ]);

console.log(result); // { name: 'Tom', age: 25 }

js 复制代码

// Map 对象
const m = new Map();
m.set("name", "Tom");
m.set("age", 18);

const result = Object.fromEntries(m);
console.log(result); // { name: 'Tom', age: 18 }

2. 字符串方法扩展

trimStart() 方法用于去除字符串开头的空白字符

trimEnd() 方法用于去除字符串结尾的空白字符

js 复制代码

let str = "  hello world  ";
console.log(str);
console.log(str.trimStart());
console.log(str.trimEnd());

3. 数组方法扩展

3.1 flat

Array.prototype.flat(depth) 方法将多维数组转换为低维数组

depth 参数：指定要提取嵌套数组的结构深度，默认值为 1，若将值设为 Infinity 则提取到最大深度。

js 复制代码

// 示例1：默认深度为1
const arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); // [1, 2, 3, 4]

// 示例2：深度为2
const arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat(2)); // [1, 2, 3, 4, 5, 6]

// 示例3：使用 Infinity 展平所有嵌套数组
const arr3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr3.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 示例4：处理空项
const arr4 = [1, 2, , 4, 5];
console.log(arr4.flat()); // [1, 2, 4, 5]

3.2 flatMap

Array.flatMap(callback(currentValue[, index[, array]])[, thisArg]) 类似于 map 和 flat 方法的结合体，如果 map 方法的回调函数返回的是数组，则会展开返回的数组（降低维度）

callback：生成新数组元素的函数，使用三个参数：
- currentValue：当前正在数组中处理的元素。
- index（可选）：数组中正在处理的当前元素的索引。
- array（可选）：被调用的 map 数组。
thisArg（可选）：执行 callback 函数时，用于 this 的值。

js 复制代码

const arr = [1, 2, 3, 4, 5];
const result = arr.flatMap((item) => [item * 10]);
console.log(result); // [10, 20, 30, 40, 50]

4. Symbol 扩展

Symbol.prototype.description 用来描述 Symbol 的用途，可以用来在控制台中显示 Symbol 的信息。

js 复制代码

let s = Symbol("学院");
console.log(s.description); // 学院