大佬教你手把手攻克JS手写数组原型六大方法

2023-09-07 00:34:45

数组原型方法：掌控 JavaScript 中数组的利器

什么是数组原型方法？

数组原型方法是一套内置函数，用于处理 JavaScript 中数组中的元素。它们为遍历、修改和操作数组元素提供了强大的工具，可以显著提高代码效率和可读性。

探索六大核心数组原型方法

1. forEach()：遍历数组的每位成员

forEach() 方法遍历数组中的每个元素，并执行一个指定的回调函数。该函数接收三个参数：当前元素、当前元素的索引以及数组本身。

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

numbers.forEach((number) => {
  console.log(number);
});

// 输出：
// 1
// 2
// 3
// 4
// 5

2. map()：为每个元素执行映射操作

map() 方法遍历数组中的每个元素，并返回一个新数组，其中包含对原始数组中相应元素执行回调函数后的结果。

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

const squaredNumbers = numbers.map((number) => {
  return number * number;
});

// 输出：
// [1, 4, 9, 16, 25]

3. filter()：过滤出符合条件的元素

filter() 方法遍历数组中的每个元素，并返回一个新数组，其中只包含通过回调函数测试的元素。

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

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

// 输出：
// [2, 4, 6, 8, 10]

4. every()：检查所有元素是否满足条件

every() 方法检查数组中的所有元素是否都通过回调函数的测试，返回一个布尔值。

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

const allPositive = numbers.every((number) => {
  return number > 0;
});

// 输出：
// true

5. some()：检查至少一个元素满足条件

some() 方法检查数组中是否至少有一个元素通过回调函数的测试，返回一个布尔值。

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

const someGreaterThan3 = numbers.some((number) => {
  return number > 3;
});

// 输出：
// true

6. reduce()：将数组元素累积为一个值

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

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

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

// 输出：
// 15