ECMAScript 7~10 新特性

ECMAScript 7 新特性

ECMAScript 6 新特性（一）

ECMAScript 6 新特性（二）

ECMAScript 7~10 新特性（本文）

1. 数组方法

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

const mingzhu = ["西游记", "水浒传", "三国演义", "红楼梦"];console.log(mingzhu.includes("西游记")); // true
console.log(mingzhu.indexOf("西游记"));
console.log(mingzhu.includes("斗破苍穹")); // false

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

2. 指数操作符

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

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

ECMAScript 8 新特性

1. async 和 await

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

1.1 async 函数

async 函数的返回值为 promise 对象

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

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

2. 抛出错误，返回结果是一个失败的 Promise 对象。

   async function fn() {throw new Error('出错了');
   }
   console.log(fn());
   

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

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

1.2 await 表达式

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

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 请求

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

1. Object.values() 方法返回一个给定对象的所有可枚举属性值的数组

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

   将对象转换为数组

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	是否可配置

const obj = Object.create(null, {name: {value: "张三",writable: true,enumerable: true,configurable: true,},
});

ECMAScript 9 新特性

1. Rest/spread 参数

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

1. Rest 参数

   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",
   });
   

2. 扩展运算符

   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 允许命名捕获组使用符号 ? ，这样获取捕获结果可读性更强

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 支持反向断言，通过对匹配结果前面的内容进行判断，对匹配进行筛选。

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 改变这种行为，允许行终止符出现

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) 方法相互为逆运算

const result = Object.fromEntries([ ["name", "Tom"], ["age", 25] ]);console.log(result); // { name: 'Tom', age: 25 }

// 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() 方法用于去除字符串结尾的空白字符

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 则提取到最大深度。

// 示例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 的值。

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 的信息。

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