ES6 中常用的数组方法和使用技巧-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，数组是一种非常重要的数据类型，它可以存储一组有序的数据。ES6 中新增了很多有用的数组方法，让我们的开发变得更加高效和方便。本文将介绍 ES6 中常用的数组方法和使用技巧，帮助读者更好地掌握这些方法并应用到实际开发中。

1. forEach

forEach 方法用于遍历数组中的每个元素，并对每个元素执行回调函数。它的基本语法如下：

array.forEach(function(item, index, arr) {
  // ...
});

其中，item 表示当前遍历到的元素，index 表示当前元素的下标，arr 表示当前数组。回调函数可以接收三个参数，但是它们都是可选的。

示例代码：

const arr = [1, 2, 3];
arr.forEach(function(item, index, arr) {
  console.log(item, index, arr);
});
// 输出：1 0 [1, 2, 3]
//      2 1 [1, 2, 3]
//      3 2 [1, 2, 3]

2. map

map 方法用于遍历数组中的每个元素，并对每个元素执行回调函数，最后返回一个新的数组。它的基本语法如下：

const newArray = array.map(function(item, index, arr) {
  // ...
  return value;
});

其中，item 表示当前遍历到的元素，index 表示当前元素的下标，arr 表示当前数组。回调函数必须返回一个值，这个值会被加入到新的数组中。

示例代码：

const arr = [1, 2, 3];
const newArr = arr.map(function(item, index, arr) {
  return item * 2;
});
console.log(newArr); // 输出：[2, 4, 6]

3. filter

filter 方法用于遍历数组中的每个元素，并对每个元素执行回调函数，返回一个新的数组，这个数组只包含符合条件的元素。它的基本语法如下：

const newArray = array.filter(function(item, index, arr) {
  // ...
  return true/false;
});

其中，item 表示当前遍历到的元素，index 表示当前元素的下标，arr 表示当前数组。回调函数必须返回一个布尔值，用于判断当前元素是否符合条件。

示例代码：

const arr = [1, 2, 3];
const newArr = arr.filter(function(item, index, arr) {
  return item > 1;
});
console.log(newArr); // 输出：[2, 3]

4. reduce

reduce 方法用于遍历数组中的每个元素，对每个元素执行回调函数，并将回调函数的返回值累加到一个累加器中。它的基本语法如下：

const result = array.reduce(function(accumulator, item, index, arr) {
  // ...
  return accumulator;
}, initialValue);

其中，accumulator 表示累加器的值，item 表示当前遍历到的元素，index 表示当前元素的下标，arr 表示当前数组。回调函数必须返回一个值，这个值会被加到累加器中。initialValue 是一个可选参数，表示累加器的初始值。

示例代码：

const arr = [1, 2, 3];
const sum = arr.reduce(function(accumulator, item, index, arr) {
  return accumulator + item;
}, 0);
console.log(sum); // 输出：6

5. find

find 方法用于遍历数组中的每个元素，并对每个元素执行回调函数，返回第一个符合条件的元素。它的基本语法如下：

const result = array.find(function(item, index, arr) {
  // ...
  return true/false;
});

其中，item 表示当前遍历到的元素，index 表示当前元素的下标，arr 表示当前数组。回调函数必须返回一个布尔值，用于判断当前元素是否符合条件。find 方法只返回第一个符合条件的元素。

示例代码：

const arr = [1, 2, 3];
const result = arr.find(function(item, index, arr) {
  return item > 1;
});
console.log(result); // 输出：2

6. includes

includes 方法用于判断数组中是否包含某个元素，返回一个布尔值。它的基本语法如下：

const result = array.includes(value, fromIndex);

其中，value 表示要查找的元素，fromIndex 表示从哪个下标开始查找，它是一个可选参数，默认值为 0。

示例代码：

const arr = [1, 2, 3];
const result = arr.includes(2);
console.log(result); // 输出：true

7. flat

flat 方法用于将多维数组转换为一维数组。它的基本语法如下：

const newArray = array.flat(depth);

其中，depth 表示要转换的深度，它是一个可选参数，默认值为 1。

示例代码：

const arr = [1, [2, [3]]];
const newArr = arr.flat(2);
console.log(newArr); // 输出：[1, 2, 3]

8. from

from 方法用于将类似数组的对象和可迭代对象转换为数组。它的基本语法如下：

const newArray = Array.from(arrayLike, mapFn, thisArg);

其中，arrayLike 表示要转换的对象，mapFn 表示对转换后的数组进行处理的回调函数，thisArg 表示回调函数中 this 的值。

示例代码：

const obj = {0: 'a', 1: 'b', 2: 'c', length: 3};
const arr = Array.from(obj);
console.log(arr); // 输出：['a', 'b', 'c']

9. of

of 方法用于创建一个包含任意数量参数的新数组。它的基本语法如下：

const newArray = Array.of(element0, element1, ..., elementN);

其中，element0 到 elementN 表示要添加到数组中的元素。

示例代码：

const arr = Array.of(1, 2, 3);
console.log(arr); // 输出：[1, 2, 3]

10. entries

entries 方法用于返回一个包含数组中每个元素键值对的迭代器。它的基本语法如下：

const iterator = array.entries();

示例代码：

const arr = ['a', 'b', 'c'];
const iterator = arr.entries();
for (const [index, value] of iterator) {
  console.log(index, value);
}
// 输出：0 'a'
//      1 'b'
//      2 'c'

总结

ES6 中新增的数组方法大大简化了数组的操作，使开发变得更加高效和方便。本文介绍了 ES6 中常用的数组方法和使用技巧，包括 forEach、map、filter、reduce、find、includes、flat、from 和 of 等方法。读者可以根据自己的需求选择合适的方法，并将其应用到实际开发中。

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