15 个基本 JavaScript 数组函数

JavaScript 数组是该语言的基本组成部分。掌握它提供的数组函数对于任何高级开发人员来说都是必不可少的。这些函数可让您高效地处理数据、编写更简洁的代码并轻松实现高级功能。

在这篇文章中，我们将深入探讨每个高级开发人员都应该熟悉的 15 个数组函数：

**1. map()**

描述：map() 函数创建一个新数组，其中填充了对原始数组中每个元素调用所提供函数的结果。

重要性：map() 对于以函数式编程风格转换数据至关重要。它允许您对数组中的每个元素应用操作，而无需改变原始数组。

例子：

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

**2. filter()**

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

重要性：使用 filter() 从数组中提取必要数据，而无需更改原始数组。这对于维护代码的不变性至关重要。

例子：

const words = ['spray', 'limit', 'elite', 'exuberant'];
const longWords = words.filter(word => word.length > 6);
console.log(longWords); // ['exuberant']

**3. reduce()**

描述：reduce() 通过将函数应用于每个元素来将数组减少为单个值，并累积结果。

为什么它很重要：reduce() 是一个强大的工具，用于执行将数组中的所有元素组合成单个输出的操作，例如求和值或构造新对象。

例子：

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 10

**4. find()**

描述：find() 返回数组中满足所提供测试函数的第一个元素。

为什么它很重要： find() 对于快速定位数组中的特定项目很有用，特别是在处理需要查找特定属性值的对象时。

例子：

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

**5. 一些()**

描述：some() 测试数组中至少有一个元素是否通过所提供的函数的测试。

重要性：some() 在需要检查数组中是否有元素满足特定条件的情况下非常有用。这允许您验证输入或检查特定值。

例子：

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

**6. every()**

描述：every() 测试数组中的所有元素是否通过所提供的函数的测试。

为什么它很重要：当您需要确保数组中的所有元素都满足特定条件时，every() 至关重要，对于验证检查特别有用。

例子：

const numbers = [2, 4, 6, 8];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true

**7. forEach()**

描述：forEach() 对每个数组元素执行一次提供的函数。

为什么它很重要：虽然 forEach() 不如其他一些方法灵活，但它很简单，并且对于运行产生副作用的操作（例如记录或更新值）很有用。

例子：

const numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num * 2)); // 2, 4, 6, 8

**8. concat()**

描述：concat() 将两个或多个数组合并为一个新数组。

为何重要： concat() 对于组合数据集而不改变原始数组、保持不变性非常有用。

例子：

const array1 = [1, 2];
const array2 = [3, 4];
const combined = array1.concat(array2);
console.log(combined); // [1, 2, 3, 4]

**9.slice()**

描述：slice() 将数组的一部分浅拷贝返回到新数组中。

重要性：slice() 非常适合在不改变原始数组的情况下创建子数组，使其成为一种提取数据的安全方法。

例子：

const fruits = ['apple', 'banana', 'orange', 'grape'];
const citrus = fruits.slice(2, 4);
console.log(citrus); // ['orange', 'grape']

**10. splice()**

描述：splice() 通过删除或替换现有元素和/或添加新元素来更改数组的内容。

为什么它很重要： splice() 对于数组的就地编辑非常强大，但是它的可变性质应该小心使用，以避免产生意想不到的副作用。

例子：

const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1, 99);
console.log(numbers); // [1, 2, 99, 4, 5]

**11. includes()**

描述：includes() 检查数组是否包含某个元素，返回 true 或 false。

为什么它很重要：includes() 是一种简单但功能强大的存在性检查方法，与使用 indexOf 相比，它使您的代码更具可读性。

例子：

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // true

**12. indexOf()**

描述：indexOf() 返回在数组中找到给定元素的第一个索引，如果不存在则返回 -1。

为什么它很重要：indexOf() 对于查找数组中元素的位置很有用，特别是当您需要索引进行进一步操作时。

例子：

const numbers = [1, 2, 3, 4];
const index = numbers.indexOf(3);
console.log(index); // 2

**13. lastIndexOf()**

描述：lastIndexOf() 返回数组中给定元素的最后一个索引，如果不存在则返回 -1。

为什么它很重要：lastIndexOf() 与 indexOf() 类似，但它从末尾向开头搜索数组，这在您需要查找元素的最后一次出现时很有用。

例子：

const numbers = [1, 2, 3, 4, 3];
const index = numbers.lastIndexOf(3);
console.log(index); // 4

**14. join()**

描述：join() 将数组的所有元素连接成一个字符串，并用指定的分隔符分隔。

为什么它很重要： join() 非常适合将数组转换为字符串，这对于显示或格式化数据特别有用。

例子：

const words = ['Hello', 'world'];
const sentence = words.join(' ');
console.log(sentence); // "Hello world"

**15. reverse()**

描述：reverse() 就地反转数组中元素的顺序。

重要性：当您需要以相反的顺序处理或显示数据时，reverse() 很有用，尽管其可变性质需要谨慎使用。

例子：

const numbers = [1, 2, 3];
numbers.reverse();
console.log(numbers); // [3, 2, 1]

CLIS.CC

15 个基本 JavaScript 数组函数