ECMAScript 2021 (ES12) 中的数组变化-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 语言的不断发展，ECMAScript 2021（也称为 ES12）中引入了许多新的特性和语法，其中就包括了对数组的改进。本文将介绍 ES12 中的数组变化，包括新的方法、新的语法和一些实用技巧，旨在帮助前端开发者更好地使用和理解数组。

1. 新的方法

1.1 `Array.prototype.at()`

Array.prototype.at() 方法允许在数组中按照索引位置获取元素，类似于字符串中的 charAt() 方法。它可以接受一个负数索引，表示从数组末尾开始计数。如果索引超出了数组的范围，则返回 undefined。

const arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.at(2)); // "c"
console.log(arr.at(-2)); // "d"
console.log(arr.at(10)); // undefined

1.2 `Array.prototype.forEach()`

Array.prototype.forEach() 方法现在可以直接在数组上调用，而不必使用 Array.prototype。这使得代码更加简洁和易读。

const arr = ['a', 'b', 'c'];
arr.forEach((item, index) => {
  console.log(`${index}: ${item}`);
});

1.3 `Array.prototype.filter()`

Array.prototype.filter() 方法现在可以接受一个可选的 this 参数，用于指定回调函数中的 this 值。

const arr = [1, 2, 3, 4, 5];
const result = arr.filter(function(item) {
  return item % 2 === 0 && this.visible;
}, { visible: true });
console.log(result); // [2, 4]

1.4 `Array.prototype.flatMap()`

Array.prototype.flatMap() 方法将数组中的每个元素映射到一个新的数组，并将结果展开为一个新的数组。它类似于 Array.prototype.map() 和 Array.prototype.flat() 方法的组合。

const arr = [[1, 2], [3, 4], [5, 6]];
const result = arr.flatMap(item => item.map(x => x * 2));
console.log(result); // [2, 4, 6, 8, 10, 12]

1.5 `Array.prototype.reduce()`

Array.prototype.reduce() 方法现在可以接受一个可选的 options 参数，用于指定初始值和 this 值。

-- -------------------- ---- -------
----- --- - --- -- -- -- ---
----- ------ - -----------
  ------------- ----- -
    ------ --- - -----
  --
  --
  - -------- ---- -
--
-------------------- -- --

2. 新的语法

2.1 `Array.prototype.push()` 和 `Array.prototype.unshift()`

Array.prototype.push() 和 Array.prototype.unshift() 方法现在可以接受多个参数，而不仅仅是一个数组。

const arr = [1, 2, 3];
arr.push(4, 5, 6);
console.log(arr); // [1, 2, 3, 4, 5, 6]
arr.unshift(-1, 0);
console.log(arr); // [-1, 0, 1, 2, 3, 4, 5, 6]

2.2 解构赋值

ES12 中的解构赋值语法可以用于数组的部分解构和重命名。

const arr = [1, 2, 3, 4, 5];
const [a, b, ...rest] = arr;
console.log(a, b, rest); // 1 2 [3, 4, 5]
const [c, d, , e] = arr;
console.log(c, d, e); // 1 2 4
const [f, g, h = 0] = [1, 2];
console.log(f, g, h); // 1 2 0

3. 实用技巧

3.1 数组去重

ES12 中可以使用 Set 和解构赋值语法实现数组去重。

const arr = [1, 2, 3, 2, 1];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3]

3.2 数组平铺

ES12 中可以使用 Array.prototype.flat() 方法和递归函数实现数组平铺。

const arr = [1, [2, [3, 4], 5], 6];
const flatArr = arr.flat(Infinity);
console.log(flatArr); // [1, 2, 3, 4, 5, 6]

3.3 数组乱序

ES12 中可以使用 Array.prototype.sort() 方法和随机数实现数组乱序。

const arr = [1, 2, 3, 4, 5];
arr.sort(() => Math.random() - 0.5);
console.log(arr); // [3, 1, 4, 5, 2]

4. 总结

ECMAScript 2021 中的数组变化为前端开发者提供了更加便利和强大的数组操作方式，同时也为我们提供了更多实用技巧和编程思路。在实际开发中，我们可以充分利用这些新特性和语法，提高代码的效率和可读性，同时也可以更好地理解和掌握 JavaScript 语言的发展趋势。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65d73fbb1886fbafa44efba1

ECMAScript 2021 (ES12) 中的数组变化