详解前端开发都需要掌握的十个 JavaScript 基本数组函数

假设你正在开发一个复杂的 Web 项目。你的数据来自许多 API，你的工作是高效地处理、过滤和分析这些数据。你的时间很紧张，所以每一行代码都很重要。

这时学习高级 JavaScript 数组方法就会对你有所帮助。

这些函数不仅可以减少代码量，还可以提高性能并提升你的开发技能。

让我们来看看每个开发人员都应该知道的十大数组函数，以便快速准确地完成复杂的任务。

1. forEach()

forEach() 方法对每个数组元素执行一次提供的函数。它通常用于迭代数组并对每个元素执行操作而不返回新数组。

语法：

array.forEach(function(currentValue, index, array) {  // code to execute for each element});

currentValue：数组中正在处理的当前元素。
index（可选）：正在处理的当前元素的索引。
array（可选）：正在应用 forEach() 的数组。

示例

让我们考虑一个需要将数组的每个元素打印到控制台的示例：

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {  console.log(number);});

输出：

用例

记录元素：如示例所示，forEach() 非常适合记录数组的每个元素。

修改元素：您可以执行诸如增加每个元素之类的操作。

操作 DOM 元素：使用 DOM 元素数组时，forEach() 可用于将更改或事件侦听器应用于每个元素。

示例 - 修改元素

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number, index, arr) {  arr[index] = number * 2;});

console.log(numbers); // Output: [2, 4, 6, 8, 10]

在此示例中，数字数组的每个元素都翻倍了。

2. map()

说明：map() 方法创建一个新数组，该数组填充了对调用数组中每个元素调用提供的函数的结果。这是一种强大的方法，可以在不改变原始数组的情况下转换数据。

语法：

let newArray = array.map(function(currentValue, index, arr), thisValue);

示例：这是一个将数组中的每个元素乘以 2 的简单示例：

const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map(num => num * 2);console.log(doubled); // Output: [2, 4, 6, 8, 10]

用例：

转换数据：map() 函数非常适合转换数据，例如将对象数组转换为不同的格式或对每个元素应用数学运算。

const users = [   { firstName: "John", lastName: "Doe" },   { firstName: "Jane", lastName: "Smith" } ];  const fullNames = users.map(user => `${user.firstName} ${user.lastName}`); console.log(fullNames); // Output: ["John Doe", "Jane Smith"]

在 React 中渲染列表：使用 React 时，map() 经常用于渲染组件列表。

const todoItems = todos.map(todo => <li key={todo.id}>{todo.text}</li>);

提取数据：从数组中的对象中提取特定属性。

const inventory = [   { name: "Apple", quantity: 10 },   { name: "Banana", quantity: 5 },   { name: "Orange", quantity: 8 } ];
const itemNames = inventory.map(item => item.name); 
console.log(itemNames); // Output: ["Apple", "Banana", "Orange"]

熟练掌握 map() 函数后，您可以高效地处理数组转换，从而使您的代码更易读、更简洁。对于任何从事数据处理或前端渲染的 JavaScript 开发人员来说，此功能都是必不可少的。

有做视频需要去水印的可以体验一下这个小程序哈(直接搜)：去水印AI助手

3. filter()

描述

filter() 创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。当您需要根据条件仅包含数组中的某些元素时，它很有用。

语法

array.filter(callback(element, index, array), thisArg)

回调：用于测试数组中每个元素的函数。返回 true 表示保留元素，否则返回 false。它接受三个参数：

element：数组中当前正在处理的元素。
index（可选）：数组中当前正在处理的元素的索引。
array（可选）：调用了数组过滤器。
thisArg（可选）：执行回调时用作 this 的值。

示例

const numbers = [1, 2, 3, 4, 5, 6];const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4, 6]

在此示例中，filter() 函数用于创建一个新数组 evenNumbers，该数组仅包含来自 numbers 数组的偶数。

用例

从列表中过滤数据：通常在 Web 应用程序中用于根据用户输入（例如搜索结果或表单输入）过滤数据。

const products = [     { name: 'Laptop', price: 1000 },     { name: 'Phone', price: 500 },     { name: 'Tablet', price: 700 } ];  const affordableProducts = products.filter(product => product.price < 800);
console.log(affordableProducts);  // Output: [{ name: 'Phone', price: 500 }, { name: 'Tablet', price: 700 }]

删除不需要的元素：方便从数组中删除虚假值或特定项目。

const mixedArray = [0, 'hello', false, 42, '', null, 'world']; const truthyArray = mixedArray.filter(Boolean); 
console.log(truthyArray); // Output: ['hello', 42, 'world']

处理大型数据集：在数据处理中很有用，可以根据复杂条件创建数据子集。

filter() 方法对于任何 JavaScript 开发人员来说都是一个强大的工具，它能够为数据操作和条件数组处理提供高效且易读的代码。

4. reduce()

描述：

reduce() 方法对数组的每个元素执行一个 Reducer 函数（由您提供），从而产生一个输出值。它通常用于将数组中的值累积为一个结果，例如对数字求和或展平数组数组。

语法：

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

回调：对数组中的每个元素执行的函数，带有四个参数：

accumulator：上次调用回调时返回的累积值，或 initialValue（如果提供）。
currentValue：数组中正在处理的当前元素。
index（可选）：数组中正在处理的当前元素的索引。
array（可选）：调用了reduce()的数组。
initialValue（可选）：用作回调第一次调用的第一个参数的值。如果没有提供initialValue，则将使用并跳过数组中的第一个元素。

示例：

这是一个简单的例子，它对数组中的所有数字求和：

const numbers = [1, 2, 3, 4, 5];const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 15

在此示例中，reduce() 方法对数字数组中的数字求和。累加器从 0（初始值）开始，数组中的每个数字都会添加到累加器中。

用例：

求和值：对数组中的所有元素求和，如上例所示。

展平数组：将嵌套数组缩减为单个平面数组。

const nestedArray = [[1, 2], [3, 4], [5, 6]]; const flatArray = nestedArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []); 
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

计数实例：计算数组中值的实例。

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple']; const countFruits = fruits.reduce((accumulator, currentValue) => {   accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;   return accumulator; }, {}); 
console.log(countFruits); // Output: { apple: 3, banana: 2, orange: 1 }

创建对象：根据项目数组构建对象。

const people = [   { name: 'Alice', age: 30 },   { name: 'Bob', age: 25 },   { name: 'Charlie', age: 35 },]; const peopleByName = people.reduce((accumulator, currentValue) => {   accumulator[currentValue.name] = currentValue;   return accumulator; }, {}); 
console.log(peopleByName); // Output: { //   Alice: { name: 'Alice', age: 30 }, //   Bob: { name: 'Bob', age: 25 }, //   Charlie: { name: 'Charlie', age: 35 } // }

一旦熟练掌握了reduce()，您就可以处理涉及在JavaScript中处理和转换数组的各种任务。该函数功能强大且用途广泛，是任何开发人员的必备工具。

5. find()

说明：find()方法返回数组中满足所提供测试函数的第一个元素的值。如果没有元素满足测试函数，则返回undefined。

语法：

array.find(callback(element[, index[, array]])[, thisArg])

回调函数是对数组中的每个值执行的函数，直到函数返回 true，表示找到了该值。

element 是数组中当前正在处理的元素。
index（可选）是数组中当前正在处理的元素的索引。
array（可选）是调用 find 的数组。
thisArg（可选）是在回调中用作 this 的对象。

示例：

const numbers = [5, 12, 8, 130, 44]; const found = numbers.find(element => element > 10);
console.log(found); // Output: 12

在此示例中，find() 返回数组中第一个大于 10 的元素。

用例：

在数组中查找特定对象：当您有一个对象数组并且需要根据属性值查找特定对象时。

const users = [   { id: 1, name: 'John' },   { id: 2, name: 'Jane' },   { id: 3, name: 'Jack' } ]; const user = users.find(user => user.id === 2);  
console.log(user); // Output: { id: 2, name: 'Jane' }

查找缺失元素：在需要检查数组中是否存在特定元素的情况下。

const inventory = [   { name: 'apples', quantity: 2 },   { name: 'bananas', quantity: 0 },   { name: 'cherries', quantity: 5 } ];  const result = inventory.find(fruit => fruit.name === 'bananas');  
console.log(result); // Output: { name: 'bananas', quantity: 0 }

UI 中的动态搜索：在用户界面中的动态搜索功能中很有用，您需要根据用户输入找到第一个匹配项。

总之，find() 是一种功能强大的方法，用于定位数组中符合指定条件的元素的第一次出现，这对于需要搜索数据集合的任务非常有用。

6. findIndex()

描述

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

语法

array.findIndex(callback(element, index, array), thisArg)

回调：对每个元素执行的函数，带有三个参数：
元素：数组中当前正在处理的元素。
索引（可选）：数组中当前正在处理的元素的索引。
数组（可选）：调用 findIndex() 的数组。
thisArg（可选）：执行回调时用作 this 的对象。

示例

下面是一个简单的示例来说明 findIndex() 的用法：

const numbers = [10, 20, 30, 40, 50];const isLargeNumber = (element) => element > 25;const index = numbers.findIndex(isLargeNumber);
console.log(index); // Output: 2

在此示例中，findIndex() 返回 2，这是第一个大于 25 的元素的索引。

用例

查找元素的位置：当您需要符合特定条件的元素的索引时，findIndex() 非常有用。

验证数据：您可以使用 findIndex() 检查数组是否包含符合特定条件的任何元素。

优化搜索操作：在需要元素索引而不是元素本身的场景中，findIndex() 提供了一种直接有效的方法来检索它。

更复杂的例子

考虑这样一个场景：您有一个表示用户的对象数组，并且您想要查找具有特定 ID 的用户的索引：

const users = [  { id: 1, name: 'Alice' },  { id: 2, name: 'Bob' },  { id: 3, name: 'Charlie' }];const userIdToFind = 2;const userIndex = users.findIndex(user => user.id === userIdToFind);
console.log(userIndex); // Output: 1

这里，findIndex() 用于定位 id 为 2 的用户对象的索引。

通过理解和使用 findIndex()，您可以有效地处理元素索引对应用程序逻辑至关重要的情况。

7. some()

说明：some() 方法检查数组中是否至少有一个元素通过测试（以函数形式提供）。如果回调函数为任何数组元素返回真值，则返回 true；否则，返回 false。

语法：

array.some(callback(element[, index[, array]])[, thisArg])

参数：

callback：对数组中的每个元素执行的函数，有三个参数：

element：数组中当前正在处理的元素。

index（可选）：数组中当前正在处理的元素的索引。

array（可选）：调用 some 的数组。

thisArg（可选）：执行回调时用作 this 的值。

示例：

const numbers = [1, 2, 3, 4, 5];  const hasEvenNumber = numbers.some((number) => number % 2 === 0);  
console.log(hasEvenNumber); // Output: true

在此示例中，some() 方法检查 numbers 数组中是否至少有一个偶数。由于 2 和 4 是偶数，因此该方法返回 true。

用例：

验证：检查至少一个元素是否满足特定条件（例如，是否至少有一个用户是管理员）。

搜索：确定数组中是否至少有一个项目符合特定条件。

条件渲染：在 React 等框架中，some() 可用于根据满足特定条件的元素的存在有条件地渲染组件。

高级示例：

const users = [   { name: 'Alice', age: 25, isAdmin: false },   { name: 'Bob', age: 30, isAdmin: true },   { name: 'Charlie', age: 35, isAdmin: false } ];  const hasAdmin = users.some((user) => user.isAdmin);  console.log(hasAdmin); // Output: true

在此示例中，some() 方法检查用户数组中是否至少有一个用户是管理员。由于 Bob 是管理员，因此该方法返回 true。

8. every()

说明：every() 方法测试数组中的所有元素是否都通过了所提供函数实现的测试。它返回一个布尔值，如果所有元素都通过测试，则返回 true，否则返回 false。

语法：

array.every(callback(element[, index[, array]])[, thisArg])

回调：用于测试每个元素的函数，采用三个参数：

元素：数组中当前正在处理的元素。

索引（可选）：数组中当前正在处理的元素的索引。

数组（可选）：每次调用时使用的数组。

thisArg（可选）：执行回调时用作 this 的值。

示例：

const isBelowThreshold = (currentValue) => currentValue < 40; const array = [1, 30, 39, 29, 10, 13];  
console.log(array.every(isBelowThreshold)); 
// Output: true

用例：

验证：使用 every() 检查数组中的所有元素是否满足特定条件，例如验证表单输入或确保所有元素都属于特定类型。

数据完整性：验证数组中的所有元素是否遵守某些规则或约束，例如检查数字数组中的所有项是否为正数。

用例示例：

// Example 1: Check if all numbers are positive const numbers = [1, 2, 3, 4, 5]; const allPositive = numbers.every(num => num > 0); 
console.log(allPositive); 
// Output: true  
// Example 2: Check if all users are active const users = [   { name: 'Alice', isActive: true },   { name: 'Bob', isActive: true },   { name: 'Charlie', isActive: true }, ]; const allActive = users.every(user => user.isActive); 
console.log(allActive); // Output: true

every() 的结论

every() 方法是用于验证数组中数据的强大工具。通过确保所有元素都满足特定条件，它有助于维护数据完整性并简化复杂的逻辑检查。

掌握 every() 将增强您编写干净、高效且可读的 JavaScript 代码的能力。

9. includes()

描述

includes() 方法检查数组是否包含特定元素，如果包含则返回 true，否则返回 false。

语法

array.includes(element, fromIndex)

element：数组中要搜索的项目。

fromIndex（可选）：开始搜索的索引。默认为 0。

示例

const fruits = ['apple', 'banana', 'mango', 'orange'];
console.log(fruits.includes('banana')); // Output: trueconsole.log(fruits.includes('grape'));  // Output: falseconsole.log(fruits.includes('orange', 3)); // Output: true (search starts from index 3)

用例

检查是否存在：快速确定元素是否存在于数组中，而无需手动循环遍历数组。

验证：在需要验证某个值是否属于预定义值列表（例如用户角色或状态代码）的情况下很有用。

简化代码：通过提供清晰简洁的方法来检查成员资格，有助于避免复杂的条件。

10. sort()

描述

sort() 方法对数组元素进行就地排序并返回排序后的数组。默认情况下，排序是根据字符串 Unicode 代码点进行的，但您可以提供自定义排序函数。

语法

array.sort(compareFunction)

compareFunction（可选）：定义排序顺序的函数。如果省略，数组元素将转换为字符串，并根据其 UTF-16 代码单元值的顺序进行比较。

示例

const numbers = [4, 2, 7, 1, 9];console.log(numbers.sort()); // Output: [1, 2, 4, 7, 9] (sorted as strings by default)
const letters = ['d', 'a', 'c', 'b'];console.log(letters.sort()); // Output: ['a', 'b', 'c', 'd']
const moreNumbers = [4, 2, 7, 1, 9];console.log(moreNumbers.sort((a, b) => a - b)); // Output: [1, 2, 4, 7, 9] (sorted numerically)

用例

数据排序：用于按特定顺序排列数据，例如按字母顺序对名称列表进行排序或从小到大对数字进行排序。

自定义排序：通过自定义比较函数提供灵活性，允许复杂的排序逻辑（例如，按特定属性对对象进行排序）。

用户界面：通常用于在用户界面中按排序顺序显示数据，增强可读性和可用性。

结论

在这篇文中，我们探讨了每个开发人员都应该掌握的10个基本 JavaScript 数组函数。每个函数都提供强大的功能，可以帮助您编写更干净、更高效的代码并轻松解决常见问题。

无论您是使用 forEach() 迭代数组、使用 map() 转换数据还是使用 reduce() 聚合结果，这些函数都是有效 JavaScript 编程不可或缺的一部分。

通过将这些数组方法纳入您的日常开发工作流程，不仅可以提高编码技能，还可以提高项目的整体质量。继续练习和试验这些功能，以充分掌握它们的潜力，并了解它们如何简化您的工作。

请记住，掌握 JavaScript 数组函数的关键是持续的练习和应用。每当您需要复习或启发您的编码挑战时，请随时重新阅读本文。

最后，感谢您的阅读，祝编码愉快