es6中迭代数组的方法有哪些

发布时间：2022-10-24 16:55:52 作者：iii
来源：亿速云阅读：122

ES6中迭代数组的方法有哪些

在ES6（ECMAScript 2015）中，JavaScript引入了许多新的特性和方法，使得数组的操作更加方便和高效。本文将详细介绍ES6中用于迭代数组的各种方法，包括它们的用法、特点以及适用场景。

1. `forEach` 方法

forEach 是ES5中引入的数组迭代方法，但在ES6中仍然广泛使用。它允许你对数组中的每个元素执行一个回调函数。

1.1 基本用法

const array = [1, 2, 3, 4, 5];

array.forEach((element, index, array) => {
  console.log(`Element: ${element}, Index: ${index}, Array: ${array}`);
});

1.2 特点

forEach 不会返回任何值，它只是对数组中的每个元素执行回调函数。
不能使用 break 或 continue 来中断循环。
适用于不需要返回值的简单迭代操作。

1.3 适用场景

当你需要对数组中的每个元素执行一些操作，但不需要返回新数组时。
例如，打印数组中的每个元素或更新DOM元素。

2. `map` 方法

map 方法创建一个新数组，其结果是该数组中的每个元素调用一次提供的回调函数后的返回值。

2.1 基本用法

const array = [1, 2, 3, 4, 5];

const newArray = array.map((element, index, array) => {
  return element * 2;
});

console.log(newArray); // [2, 4, 6, 8, 10]

2.2 特点

map 返回一个新数组，原数组不会被修改。
回调函数必须返回一个值，否则新数组中的对应位置将是 undefined。
适用于需要对数组中的每个元素进行转换并返回新数组的场景。

2.3 适用场景

当你需要对数组中的每个元素进行某种转换操作，并返回一个新的数组时。
例如，将数组中的每个元素乘以2，或将字符串数组转换为大写。

3. `filter` 方法

filter 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

3.1 基本用法

const array = [1, 2, 3, 4, 5];

const newArray = array.filter((element, index, array) => {
  return element % 2 === 0;
});

console.log(newArray); // [2, 4]

3.2 特点

filter 返回一个新数组，原数组不会被修改。
回调函数返回 true 或 false，决定元素是否包含在新数组中。
适用于需要从数组中筛选出符合条件的元素的场景。

3.3 适用场景

当你需要从数组中筛选出符合条件的元素并返回一个新数组时。
例如，筛选出数组中的所有偶数，或筛选出长度大于5的字符串。

4. `reduce` 方法

reduce 方法对数组中的每个元素执行一个由你提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。

4.1 基本用法

const array = [1, 2, 3, 4, 5];

const sum = array.reduce((accumulator, currentValue, index, array) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

4.2 特点

reduce 返回一个累加的结果，可以是任何类型的值。
可以指定初始值（initialValue），如果不指定，则使用数组的第一个元素作为初始值。
适用于需要对数组中的元素进行累加或汇总操作的场景。

4.3 适用场景

当你需要对数组中的元素进行累加、汇总或其他复杂的操作时。
例如，计算数组元素的总和、平均值，或将数组转换为对象。

5. `reduceRight` 方法

reduceRight 方法与 reduce 类似，但它从数组的末尾开始向前执行。

5.1 基本用法

const array = [1, 2, 3, 4, 5];

const sum = array.reduceRight((accumulator, currentValue, index, array) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

5.2 特点

reduceRight 从数组的末尾开始向前执行，适用于需要从右到左处理的场景。
其他特点与 reduce 相同。

5.3 适用场景

当你需要从数组的末尾开始向前处理元素时。
例如，从右到左拼接字符串，或从右到左计算累加值。

6. `every` 方法

every 方法测试数组中的所有元素是否都通过了指定函数的测试。

6.1 基本用法

const array = [1, 2, 3, 4, 5];

const allEven = array.every((element, index, array) => {
  return element % 2 === 0;
});

console.log(allEven); // false

6.2 特点

every 返回一个布尔值，表示数组中的所有元素是否都满足条件。
如果数组为空，every 返回 true。
适用于需要检查数组中的所有元素是否都满足某个条件的场景。

6.3 适用场景

当你需要检查数组中的所有元素是否都满足某个条件时。
例如，检查数组中的所有元素是否都是偶数，或检查数组中的所有字符串是否都包含某个字符。

7. `some` 方法

some 方法测试数组中是否至少有一个元素通过了指定函数的测试。

7.1 基本用法

const array = [1, 2, 3, 4, 5];

const hasEven = array.some((element, index, array) => {
  return element % 2 === 0;
});

console.log(hasEven); // true

7.2 特点

some 返回一个布尔值，表示数组中是否至少有一个元素满足条件。
如果数组为空，some 返回 false。
适用于需要检查数组中是否至少有一个元素满足某个条件的场景。

7.3 适用场景

当你需要检查数组中是否至少有一个元素满足某个条件时。
例如，检查数组中是否包含偶数，或检查数组中是否包含某个特定的字符串。

8. `find` 方法

find 方法返回数组中满足提供的测试函数的第一个元素的值。如果没有找到，则返回 undefined。

8.1 基本用法

const array = [1, 2, 3, 4, 5];

const found = array.find((element, index, array) => {
  return element > 3;
});

console.log(found); // 4

8.2 特点

find 返回数组中第一个满足条件的元素，如果没有找到则返回 undefined。
适用于需要查找数组中第一个满足条件的元素的场景。

8.3 适用场景

当你需要查找数组中第一个满足条件的元素时。
例如，查找数组中第一个大于3的元素，或查找数组中第一个包含某个字符的字符串。

9. `findIndex` 方法

findIndex 方法返回数组中满足提供的测试函数的第一个元素的索引。如果没有找到，则返回 -1。

9.1 基本用法

const array = [1, 2, 3, 4, 5];

const foundIndex = array.findIndex((element, index, array) => {
  return element > 3;
});

console.log(foundIndex); // 3

9.2 特点

findIndex 返回数组中第一个满足条件的元素的索引，如果没有找到则返回 -1。
适用于需要查找数组中第一个满足条件的元素的索引的场景。

9.3 适用场景

当你需要查找数组中第一个满足条件的元素的索引时。
例如，查找数组中第一个大于3的元素的索引，或查找数组中第一个包含某个字符的字符串的索引。

10. `entries` 方法

entries 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的键值对。

10.1 基本用法

const array = ['a', 'b', 'c'];

const iterator = array.entries();

for (const [index, element] of iterator) {
  console.log(`Index: ${index}, Element: ${element}`);
}

10.2 特点

entries 返回一个迭代器对象，可以使用 for...of 循环遍历。
适用于需要同时访问数组索引和元素的场景。

10.3 适用场景

当你需要同时访问数组的索引和元素时。
例如，遍历数组并同时获取索引和元素。

11. `keys` 方法

keys 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的键。

11.1 基本用法

const array = ['a', 'b', 'c'];

const iterator = array.keys();

for (const key of iterator) {
  console.log(`Key: ${key}`);
}

11.2 特点

keys 返回一个迭代器对象，可以使用 for...of 循环遍历。
适用于只需要访问数组索引的场景。

11.3 适用场景

当你只需要访问数组的索引时。
例如，遍历数组并获取每个索引。

12. `values` 方法

values 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的值。

12.1 基本用法

const array = ['a', 'b', 'c'];

const iterator = array.values();

for (const value of iterator) {
  console.log(`Value: ${value}`);
}

12.2 特点

values 返回一个迭代器对象，可以使用 for...of 循环遍历。
适用于只需要访问数组元素的场景。

12.3 适用场景

当你只需要访问数组的元素时。
例如，遍历数组并获取每个元素。

13. `Symbol.iterator` 方法

Symbol.iterator 是ES6中引入的一个内置符号，用于定义对象的默认迭代器。数组默认实现了 Symbol.iterator 方法，因此可以直接使用 for...of 循环遍历数组。

13.1 基本用法

const array = ['a', 'b', 'c'];

for (const element of array) {
  console.log(`Element: ${element}`);
}

13.2 特点

Symbol.iterator 是数组的默认迭代器，可以直接使用 for...of 循环遍历数组。
适用于需要遍历数组的场景。

13.3 适用场景

当你需要遍历数组时。
例如，使用 for...of 循环遍历数组并获取每个元素。

14. `Array.from` 方法

Array.from 方法从一个类似数组或可迭代对象创建一个新的数组实例。

14.1 基本用法

const arrayLike = { length: 3, 0: 'a', 1: 'b', 2: 'c' };

const array = Array.from(arrayLike);

console.log(array); // ['a', 'b', 'c']

14.2 特点

Array.from 可以将类数组对象或可迭代对象转换为真正的数组。
可以接受一个映射函数作为第二个参数，用于对每个元素进行转换。
适用于需要将类数组对象或可迭代对象转换为数组的场景。

14.3 适用场景

当你需要将类数组对象或可迭代对象转换为数组时。
例如，将 arguments 对象或 NodeList 转换为数组。

15. `Array.of` 方法

Array.of 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

15.1 基本用法

const array = Array.of(1, 2, 3, 4, 5);

console.log(array); // [1, 2, 3, 4, 5]

15.2 特点

Array.of 创建一个新数组，参数的数量和类型不影响数组的创建。
适用于需要创建一个包含任意数量参数的新数组的场景。

15.3 适用场景

当你需要创建一个包含任意数量参数的新数组时。
例如，创建一个包含多个数字或字符串的数组。

16. `Array.prototype[@@iterator]` 方法

Array.prototype[@@iterator] 是数组的默认迭代器方法，与 Symbol.iterator 相同。

16.1 基本用法

const array = ['a', 'b', 'c'];

const iterator = array[Symbol.iterator]();

for (const element of iterator) {
  console.log(`Element: ${element}`);
}

16.2 特点

Array.prototype[@@iterator] 是数组的默认迭代器方法，可以直接使用 for...of 循环遍历数组。
适用于需要遍历数组的场景。

16.3 适用场景

当你需要遍历数组时。
例如，使用 for...of 循环遍历数组并获取每个元素。

17. `Array.prototype.includes` 方法

Array.prototype.includes 方法判断一个数组是否包含一个指定的值，根据情况返回 true 或 false。

17.1 基本用法

const array = [1, 2, 3, 4, 5];

const includesThree = array.includes(3);

console.log(includesThree); // true

17.2 特点

includes 返回一个布尔值，表示数组是否包含指定的值。
适用于需要检查数组是否包含某个特定值的场景。

17.3 适用场景

当你需要检查数组是否包含某个特定值时。
例如，检查数组中是否包含某个数字或字符串。

18. `Array.prototype.flat` 方法

Array.prototype.flat 方法创建一个新数组，其中所有子数组元素递归地连接到指定深度。

18.1 基本用法

const array = [1, [2, [3, [4, 5]]];

const flattened = array.flat(2);

console.log(flattened); // [1, 2, 3, [4, 5]]

18.2 特点

flat 返回一个新数组，原数组不会被修改。
可以指定深度参数，默认为1。
适用于需要将嵌套数组扁平化的场景。

18.3 适用场景

当你需要将嵌套数组扁平化时。
例如，将多维数组转换为一维数组。

19. `Array.prototype.flatMap` 方法

Array.prototype.flatMap 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。

19.1 基本用法

const array = [1, 2, 3, 4, 5];

const flatMapped = array.flatMap((element) => [element * 2]);

console.log(flatMapped); // [2, 4, 6, 8, 10]

19.2 特点

flatMap 返回一个新数组，原数组不会被修改。
相当于 map 和 flat 的组合，但只能扁平化一层。
适用于需要对数组中的每个元素进行映射并扁平化的场景。

19.3 适用场景

当你需要对数组中的每个元素进行映射并扁平化时。
例如，将数组中的每个元素映射为一个数组并扁平化。

20. `Array.prototype.copyWithin` 方法

Array.prototype.copyWithin 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小。

20.1 基本用法

const array = [1, 2, 3, 4, 5];

array.copyWithin(0, 3, 5);

console.log(array); // [4, 5, 3, 4, 5]

20.2 特点

copyWithin 修改原数组，不会改变数组的长度。
适用于需要在数组内部复制元素的场景。

20.3 适用场景

当你需要在数组内部复制元素时。
例如，将数组的一部分复制到另一个位置。

21. `Array.prototype.fill` 方法

Array.prototype.fill 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

21.1 基本用法

const array = [1, 2, 3, 4, 5];

array.fill(0, 2, 4);

console.log(array); // [1, 2, 0, 0, 5]

21.2 特点

fill 修改原数组，不会改变数组的长度。
适用于需要用固定值填充数组的场景。

21.3 适用场景

当你需要用固定值填充数组时。
例如，将数组的一部分填充为0。

22. `Array.prototype.sort` 方法

Array.prototype.sort 方法对数组的元素进行排序，并返回数组。

22.1 基本用法

const array = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];

array.sort((a, b) => a - b);

console.log(array); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

22.2 特点

sort 修改原数组，返回排序后的数组。
可以指定比较函数，用于自定义排序规则。
适用于需要对数组进行排序的场景。

22.3 适用场景

当你需要对数组进行排序时。
例如，对数字数组进行升序或降序排序。