ES6 中数组的常用方法及其使用技巧

在前端开发中，数组是经常使用的数据结构之一。ES6 中增加了许多新的数组方法，使得数组操作更加方便和高效。本文将介绍 ES6 中数组的常用方法及其使用技巧，帮助读者更好地应用这些方法。

1. Array.from()

Array.from() 方法将类数组对象或可迭代对象转化为数组。这个方法可以用来将 NodeList、arguments 等转化为数组。

const nodeList = document.querySelectorAll('p');
const arr = Array.from(nodeList);
console.log(arr); // [p, p, p, ...]

2. Array.of()

Array.of() 方法创建一个包含任意参数的新数组。这个方法可以用来替代 Array() 构造函数，因为 Array() 构造函数的行为会因参数的不同而有所不同。

const arr1 = Array(3); // [undefined, undefined, undefined]
const arr2 = Array.of(3); // [3]
const arr3 = Array.of(1, 2, 3); // [1, 2, 3]

3. Array.prototype.find()

Array.prototype.find() 方法返回数组中符合条件的第一个元素。如果没有符合条件的元素，则返回 undefined。

const arr = [1, 2, 3, 4, 5];
const result = arr.find(item => item > 3);
console.log(result); // 4

4. Array.prototype.findIndex()

Array.prototype.findIndex() 方法返回数组中符合条件的第一个元素的索引。如果没有符合条件的元素，则返回 -1。

const arr = [1, 2, 3, 4, 5];
const index = arr.findIndex(item => item > 3);
console.log(index); // 3

5. Array.prototype.fill()

Array.prototype.fill() 方法将数组中的所有元素替换为指定的值。

const arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

6. Array.prototype.includes()

Array.prototype.includes() 方法判断数组是否包含指定的元素，返回一个布尔值。

const arr = [1, 2, 3, 4, 5];
const result1 = arr.includes(3); // true
const result2 = arr.includes(6); // false

7. Array.prototype.flat()

Array.prototype.flat() 方法将多维数组转化为一维数组。

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

8. Array.prototype.flatMap()

Array.prototype.flatMap() 方法将多维数组转化为一维数组，并且可以对每个元素进行操作。

const arr = [1, 2, 3];
const result = arr.flatMap(item => [item, item * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]

9. Array.prototype.sort()

Array.prototype.sort() 方法用来排序数组。

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

需要注意的是，如果不传入排序函数，sort() 方法会将元素转化为字符串进行比较。因此，对于数字类型的数组，应该传入排序函数以确保正确的排序结果。

const arr = [3, 2, 1];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 3]

10. Array.prototype.reduce()

Array.prototype.reduce() 方法将数组中的所有元素累加起来。

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((prev, curr) => prev + curr);
console.log(result); // 15

需要注意的是，reduce() 方法可以接收一个初始值作为参数。

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((prev, curr) => prev + curr, 10);
console.log(result); // 25

总结

本文介绍了 ES6 中数组的常用方法，包括 Array.from()、Array.of()、Array.prototype.find()、Array.prototype.findIndex()、Array.prototype.fill()、Array.prototype.includes()、Array.prototype.flat()、Array.prototype.flatMap()、Array.prototype.sort()、Array.prototype.reduce()。这些方法可以提高数组操作的效率和方便性，帮助开发者更好地完成任务。在使用这些方法时，需要根据实际情况选择合适的方法，并注意方法的使用技巧和注意事项。

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