ES6 JavaScript Array 方法讲解

2023-11-07 09:47:56

ES6 JavaScript 中引入了许多新的数组方法，这些方法可以帮助我们更轻松地操作数组。在本文中，我们将介绍一些最常用的 ES6 数组方法，包括 forEach、map、filter、find、some、every 和 reduce。

1. forEach()

forEach() 方法按照升序为数组中每一项执行一次给定的函数。语法如下：

array.forEach(function(currentValue, index, array) {
  // your code here
});

currentValue：数组当前项值
index：数组当前项索引
array：数组本身

例如，以下代码使用 forEach() 方法将数组中的每个元素增加 1：

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

numbers.forEach(function(number) {
  number += 1;
});

console.log(numbers); // [2, 3, 4, 5, 6]

2. map()

map() 方法创建一个新数组，其中包含调用给定函数后返回的每个元素的值。语法如下：

array.map(function(currentValue, index, array) {
  // your code here
});

currentValue：数组当前项值
index：数组当前项索引
array：数组本身

例如，以下代码使用 map() 方法将数组中的每个元素增加 1，并创建一个新数组来存储结果：

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

const newNumbers = numbers.map(function(number) {
  return number + 1;
});

console.log(newNumbers); // [2, 3, 4, 5, 6]

3. filter()

filter() 方法创建一个新数组，其中包含通过给定函数测试的每个元素。语法如下：

array.filter(function(currentValue, index, array) {
  // your code here
});

currentValue：数组当前项值
index：数组当前项索引
array：数组本身

例如，以下代码使用 filter() 方法从数组中过滤出所有偶数：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

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

4. find()

find() 方法返回数组中第一个通过给定函数测试的元素。语法如下：

array.find(function(currentValue, index, array) {
  // your code here
});

currentValue：数组当前项值
index：数组当前项索引
array：数组本身

例如，以下代码使用 find() 方法从数组中查找第一个大于 5 的元素：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const firstNumberGreaterThan5 = numbers.find(function(number) {
  return number > 5;
});

console.log(firstNumberGreaterThan5); // 6

5. some()

some() 方法检查数组中是否至少有一个元素通过给定函数测试。语法如下：

array.some(function(currentValue, index, array) {
  // your code here
});

currentValue：数组当前项值
index：数组当前项索引
array：数组本身

例如，以下代码使用 some() 方法检查数组中是否至少有一个大于 5 的元素：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const hasNumberGreaterThan5 = numbers.some(function(number) {
  return number > 5;
});

console.log(hasNumberGreaterThan5); // true

6. every()

every() 方法检查数组中是否所有元素都通过给定函数测试。语法如下：

array.every(function(currentValue, index, array) {
  // your code here
});

currentValue：数组当前项值
index：数组当前项索引
array：数组本身

例如，以下代码使用 every() 方法检查数组中的所有元素是否都大于 5：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const allNumbersGreaterThan5 = numbers.every(function(number) {
  return number > 5;
});

console.log(allNumbersGreaterThan5); // false

7. reduce()

reduce() 方法将数组中的所有元素累积成一个值。语法如下：

array.reduce(function(accumulator, currentValue, index, array) {
  // your code here
}, initialValue);

accumulator：累积值
currentValue：数组当前项值
index：数组当前项索引
array：数组本身
initialValue：初始值（可选）

例如，以下代码使用 reduce() 方法将数组中的所有元素累加成一个值：

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

const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15