随着时代的发展，JavaScript 也在不断的更新迭代，新版本的 ECMAScript 带来了许多新的特性和功能，其中包括了许多有用的新方法。在本文中，我们将介绍一些新的 Array 方法，这些方法可以帮助我们更加高效地处理数组，让我们更加便捷地编写代码。
ES6
Array.from()
Array.from() 方法可以将类数组对象或可迭代对象转换为真正的数组。这个方法可以接受三个参数：
- 第一个参数是要转换的对象。
- 第二个参数是一个可选的映射函数，它会将转换后的数组中的每个元素都执行一次。
- 第三个参数也是一个可选的参数，用来指定映射函数中的 this 值。
下面是一个示例：
-- -------------------- ---- ------- -- ----------- ----- --------- - - -- ---- -- ---- -- ---- ------- - -- ----- --- - ---------------------- ----------------- -- ----- ---- ---- -- ----------- ----- --- - --- --------- ---- ------ ----- ---- - ---------------- ------------------ -- ----- ---- ---- -- ------ ----- ---- - -------------- -- --- - -- - - --- ------------------ -- --- -- --
Array.of()
Array.of() 方法可以创建一个包含任意数量元素的数组。这个方法可以接受任意数量的参数，用于指定数组中的元素。
下面是一个示例：
const arr1 = Array.of(1, 2, 3);
console.log(arr1); // [1, 2, 3]
const arr2 = Array.of('a', 'b', 'c');
console.log(arr2); // ['a', 'b', 'c']
const arr3 = Array.of(1, 'a', true);
console.log(arr3); // [1, 'a', true]Array.prototype.find()
Array.prototype.find() 方法可以查找数组中符合条件的第一个元素，并返回该元素。这个方法可以接受一个回调函数作为参数，用于判断每个元素是否符合条件。
下面是一个示例：
const arr = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];
const result = arr.find(item => item.id === 2);
console.log(result); // { id: 2, name: 'Bob' }Array.prototype.findIndex()
Array.prototype.findIndex() 方法可以查找数组中符合条件的第一个元素的索引，并返回该索引。这个方法与 Array.prototype.find() 方法类似，只不过它返回的是索引而不是元素本身。
下面是一个示例：
const arr = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];
const index = arr.findIndex(item => item.id === 2);
console.log(index); // 1Array.prototype.fill()
Array.prototype.fill() 方法可以用指定的值填充一个数组。这个方法可以接受三个参数：
- 第一个参数是要填充的值。
- 第二个参数是一个可选的起始索引，默认值为 0。
- 第三个参数是一个可选的结束索引，默认值为数组的长度。
下面是一个示例：
-- -------------------- ---- ------- ----- --- - --- --------- ------------ ----------------- -- --- -- -- -- -- ----------- -- --- ----------------- -- --- -- -- -- --
Array.prototype.includes()
Array.prototype.includes() 方法可以判断一个数组是否包含指定的值。这个方法可以接受两个参数：
- 第一个参数是要查找的值。
- 第二个参数是一个可选的起始索引，默认值为 0。
下面是一个示例：
const arr = ['a', 'b', 'c'];
console.log(arr.includes('a')); // true
console.log(arr.includes('d')); // false
console.log(arr.includes('b', 2)); // falseES7
Array.prototype.includes()
在 ES7 中，Array.prototype.includes() 方法被添加到了 ECMAScript 标准中。这个方法与 ES6 中的 Array.prototype.includes() 方法功能相同，只不过现在它已经是标准的一部分了。
ES8
Array.prototype.flat()
Array.prototype.flat() 方法可以将一个多维数组转换为一个一维数组。这个方法可以接受一个可选的参数，用于指定要展开的层数。
下面是一个示例：
const arr1 = [1, [2, [3]]]; const arr2 = arr1.flat(); console.log(arr2); // [1, 2, [3]] const arr3 = arr1.flat(2); console.log(arr3); // [1, 2, 3]
Array.prototype.flatMap()
Array.prototype.flatMap() 方法可以将一个多维数组转换为一个一维数组，并且可以在转换的过程中执行一些操作。这个方法可以接受一个回调函数作为参数，用于将每个元素映射为一个新的数组。
下面是一个示例：
const arr1 = [1, 2, 3]; const arr2 = arr1.flatMap(x => [x * 2]); console.log(arr2); // [2, 4, 6] const arr3 = arr1.flatMap(x => [[x * 2]]); console.log(arr3); // [[2], [4], [6]]
Array.prototype.at()
Array.prototype.at() 方法可以返回数组中指定索引的元素。这个方法可以接受一个整数作为参数，用于指定要返回的元素的索引。如果索引为负数，则从数组的末尾开始计算。
下面是一个示例：
const arr = ['a', 'b', 'c']; console.log(arr.at(0)); // 'a' console.log(arr.at(-1)); // 'c' console.log(arr.at(3)); // undefined
ES9
Array.prototype.flat()
在 ES9 中，Array.prototype.flat() 方法被更新了，现在它可以接受一个可选的参数，用于指定要展开的层数的最大值。如果这个参数的值为 Infinity，则会展开所有层级的嵌套数组。
下面是一个示例：
const arr1 = [1, [2, [3]]]; const arr2 = arr1.flat(Infinity); console.log(arr2); // [1, 2, 3]
Array.prototype.flatMap()
在 ES9 中，Array.prototype.flatMap() 方法也被更新了，现在它可以接受一个可选的参数，用于指定映射函数中的 this 值。
下面是一个示例：
const arr1 = [1, 2, 3];
const arr2 = arr1.flatMap(function(x) {
return [this.prefix + x];
}, { prefix: 'value: ' });
console.log(arr2); // ['value: 1', 'value: 2', 'value: 3']总结
在本文中，我们介绍了一些新的 Array 方法，这些方法可以帮助我们更加高效地处理数组。这些方法包括：
- ES6：Array.from()、Array.of()、Array.prototype.find()、Array.prototype.findIndex()、Array.prototype.fill()、Array.prototype.includes()
- ES7：Array.prototype.includes()
- ES8：Array.prototype.flat()、Array.prototype.flatMap()、Array.prototype.at()
- ES9：Array.prototype.flat()、Array.prototype.flatMap()
我们可以根据具体的需求来选择使用这些方法中的哪些，以提高代码的效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65be3598add4f0e0ff7c273a