随着 JavaScript 的不断发展，新的语言特性和数据结构也不断被引入。从 ES6 到 ES12，JavaScript 的数据结构发生了巨大的变化。本文将介绍 ES6、ES7、ES8、ES9、ES10、ES11 和 ES12 中新增的数据结构，以及它们的用法和指导意义。
ES6 中新增的数据结构
Set 和 Map
ES6 中新增了两个重要的数据结构：Set 和 Map。
Set 是一种无序且不重复的集合，其中的每个元素都是唯一的。可以通过以下方式创建一个 Set：
const set = new Set([1, 2, 3]);
Map 是一种键值对的集合，其中的每个键和值都可以是任意类型。可以通过以下方式创建一个 Map：
const map = new Map([['name', 'Alice'], ['age', 25]]);
Symbol
ES6 中还新增了一个基本数据类型：Symbol。Symbol 是一种唯一标识符，可以用来创建对象的属性名。可以通过以下方式创建一个 Symbol：
const s = Symbol('my symbol');ES7 中新增的数据结构
Array.prototype.includes
ES7 中新增了一个 Array 的方法：includes。这个方法用于判断一个数组是否包含某个元素。可以通过以下方式使用：
const arr = [1, 2, 3]; arr.includes(2); // true arr.includes(4); // false
ES8 中新增的数据结构
async/await
ES8 中引入了 async/await，这是一种异步编程的方式。async/await 可以让异步代码看起来像同步代码，使代码更易于阅读和理解。可以通过以下方式使用：
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}ES9 中新增的数据结构
Rest/Spread 属性
ES9 中引入了 Rest/Spread 属性，这是一种新的对象和数组的操作符。Rest 属性可以将对象或数组中的剩余属性合并成一个新的对象或数组，而 Spread 属性可以将一个对象或数组展开成多个属性。可以通过以下方式使用：
const obj = { name: 'Alice', age: 25, city: 'New York' };
const { name, ...rest } = obj;
console.log(name); // 'Alice'
console.log(rest); // { age: 25, city: 'New York' }
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]ES10 中新增的数据结构
Array.prototype.flat 和 Array.prototype.flatMap
ES10 中新增了两个 Array 的方法：flat 和 flatMap。这两个方法可以用于处理嵌套数组。flat 方法可以将嵌套数组转换成一维数组，而 flatMap 方法可以在转换成一维数组的同时对每个元素进行处理。可以通过以下方式使用：
const arr = [1, [2, 3], [4, [5, 6]]]; const flatArr = arr.flat(); console.log(flatArr); // [1, 2, 3, 4, [5, 6]] const flatMapArr = arr.flatMap((x) => x * 2); console.log(flatMapArr); // [2, 4, 6, 8, 10, 12]
ES11 中新增的数据结构
Optional Chaining
ES11 中引入了 Optional Chaining，这是一种新的操作符，可以用于简化代码中的条件判断。通过 Optional Chaining，可以在访问对象的属性或方法时，避免出现 undefined 的情况。可以通过以下方式使用：
const obj = { name: 'Alice', address: { city: 'New York' } };
const city = obj?.address?.city;
console.log(city); // 'New York'ES12 中新增的数据结构
String.prototype.replaceAll
ES12 中新增了一个 String 的方法：replaceAll。这个方法可以用于替换字符串中的所有匹配项。可以通过以下方式使用：
const str = 'hello world';
const newStr = str.replaceAll('l', 'x');
console.log(newStr); // 'hexxo worxd'总结
从 ES6 到 ES12，JavaScript 的数据结构发生了巨大的变化。这些新的数据结构和语言特性，可以让我们更加高效地处理数据和编写代码。学习这些新的数据结构和语言特性，可以帮助我们更好地理解和应用 JavaScript。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c25b6badd4f0e0ffc3feea