从 ES11 到 ES6，你应该知道的 JavaScript 版本新特性
JavaScript 作为一门高级编程语言，在其发展的过程中，不断地推出新的版本并增加新特性。在前端开发领域，掌握和了解这些新特性对我们的工作和学习至关重要。本文将介绍从 ES11 到 ES6 的 JavaScript 版本新特性，帮助读者更深入地了解 JavaScript。
ES11 新特性
- String#replaceAll
ES11 新增了 String#replaceAll 方法，该方法可以在一个字符串中将所有符合条件的子串替换为新的字符串。它接收两个参数：第一个参数是要被替换的子串，第二个参数是替换成的新字符串。示例如下：
const str = "hello world"; console.log(str.replaceAll("l", "X")); // "heXXo worXd"
- Promise#allSettled
Promise#allSettled 方法接收一个 Promise 数组作为参数，返回一个新的 Promise 对象。这个新的 Promise 对象在所有 Promise 对象都已经被解决（即状态为 fulfilled 或 rejected）时被解决。返回的结果数组中每一项都是一个对象，对象中包含原 Promise 对象的状态和值。示例如下：
const p1 = Promise.resolve("success"); const p2 = Promise.reject("fail"); Promise.allSettled([p1, p2]).then(console.log); // [{status: 'fulfilled', value: 'success'}, {status: 'rejected', reason: 'fail'}]
ES10 新特性
- Array#flat 和 Array#flatMap
Array#flat 和 Array#flatMap 方法是 ES10 中最重要的新特性之一。
Array#flat 方法将一个嵌套的数组展平成一个单层的数组，可以接受一个参数，表示要展平的层数。示例如下：
const arr = [1, [2, 3, [4]]]; console.log(arr.flat()); // [1, 2, 3, [4]] console.log(arr.flat(2)); // [1, 2, 3, 4]
Array#flatMap 方法就是在执行 Array#map 之后再执行 Array#flat，返回一个新数组。它可以接受两个参数，第一个参数和 Array#map 方法一样，表示要对每个元素做的操作；第二个参数表示展平的层数。示例如下：
const arr = [1, 2, 3, 4]; console.log(arr.flatMap((x) => [x, x + 1])); // [1, 2, 2, 3, 3, 4, 4, 5]
- Object.fromEntries
Object.fromEntries 方法接收一个数组作为参数，返回一个新的对象。这个数组中的每一项都是一个键值对，数组中的每个子数组的第一个元素是键，第二个元素是值。可以用它来将一个二维数组转换为对象。示例如下：
const arr = [ ["a", 1], ["b", 2], ]; console.log(Object.fromEntries(arr)); // {a: 1, b: 2}
ES9 新特性
- Async Iteration
ES9 中引入了异步迭代器和 for-await-of 循环，支持异步生成器和异步迭代器的数据结构。它们使得我们在处理数据流时可以更容易地自定义异步行为。
Async Iteration 的示例代码如下：
async function getData() { const data = [1, 2, 3]; for await (let item of data) { console.log(await fetch(`https://jsonplaceholder.typicode.com/todos/${item}`)); } } getData();
- Rest/Spread 属性
ES9 中，Rest/Spread 属性可以直接用于 Object，用于将 Object 对象展开。示例如下：
const person = { name: "Tom", age: 20 }; const id = { id: 123 }; console.log({ ...person, ...id }); // {name: "Tom", age: 20, id: 123}
ES8 新特性
- Object.values 和 Object.entries
ES8 中，Object.values 和 Object.entries 方法被加入到了 Object 的 API 中。Object.values 和 Object.entries 可以返回一个对象的属性值和键/值对的数组对象。
const person = { name: "Tom", age: 20 }; console.log(Object.values(person)); // ["Tom", 20] console.log(Object.entries(person)); // [["name", "Tom"], ["age", 20]]
- Async Functions
ES8 通过 async/await 的形式正式引入了官方的异步方案，使得异步变成了一件简单的事情。在函数前加上 async 关键字，即可声明该函数为异步函数。在异步函数里使用 await 关键字，可以等待 Promise 对象状态的变化。示例如下：
async function fetchData() { const response = await fetch("https://jsonplaceholder.typicode.com/todos/1"); const data = await response.json(); console.log(data); }
ES7 新特性
- 数组推导
在 ES7 中，引入了数组推导的概念。它可以通过一行代码来解决过去的多行代码问题。示例如下：
const arr = [1, 2, 3, 4, 5]; const newArr = [for (i of arr) if (i > 3) i]; console.log(newArr); // [4, 5]
ES6 新特性
- 箭头函数
ES6 为 JavaScript 引入了一个新的函数定义方式——箭头函数，以简化函数的定义和传递。它可以简写函数，并自动传参，让代码更加简单。
示例如下：
const add = (a, b) => a + b; console.log(add(1, 2)); // 3
- 模板字符串
ES6 引入了模板字符串，以方便开发者进行字符串拼接。使用模板字符串，可以在字符串中嵌入变量，连接多行文本，以及格式化字符串。在模板字符串中，使用 ${} 表达式嵌入变量。示例如下：
const name = "Tom"; console.log(`Hello, ${name}!`); // "Hello, Tom!"
- 解构赋值
ES6 允许通过解构赋值将数组和对象的属性值赋给变量。解构赋值能够简化代码并提高代码可读性。
示例如下：
-- -------------------- ---- ------- ----- ------ - - ----- ------ ------- ------ -- ----- - ----- ------ - - ------- ------------------ -- ----- -------------------- -- ------ ----- --- - --- -- --- ----- --- -- -- - ---- --------------- -- - --------------- -- - --------------- -- -展开代码
本文介绍了从 ES11 到 ES6 的 JavaScript 版本新特性，这些新特性对于前端开发人员来说极为重要，希望读者通过了解这些新特性来提高自己的 JavaScript 编程水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c84b25e46428fe9eea687e
