十个必知数组函数

1. forEach()

forEach()就像一位可靠的助手，可以遍历数组中的每个元素，并执行你指定的任务。

它接受一个回调函数，该函数会对每个元素执行操作，非常适合处理副作用，例如日志记录、DOM操作和数据修改。

示例： 打印数组中的所有元素

javascript
 代码解读
复制代码
const fruits = ["apple", "banana", "cherry"];

fruits.forEach(fruit => console.log(fruit));

2. map()

需要根据现有数组创建一个新的数组，并进行一些修改？map()可以帮到你。

它会根据回调函数对每个元素进行操作，并返回一个包含结果的新数组。

它非常适合提取数据集、提供数据和执行计算。

示例： 将数组中的每个数字翻倍

javascript
 代码解读
复制代码
const numbers = [1, 2, 3, 4];

const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers);

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

3. filter()

想象一下，有人在门口把守，只允许特定的人进入VIP区域。 filter()的功能类似，它会创建一个新数组，只包含通过回调函数测试的元素。

你可以用它根据条件筛选数据、删除不需要的元素，或创建自定义子集。

示例： 从数组中获取偶数

javascript
 代码解读
复制代码
const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); 

// 输出 [2, 4]

4. reduce()

reduce()就像一位武林高手，可以将整个数组整合为一个单一的值，并使用回调函数进行操作。

它非常灵活，可以计算总和、平均值，找到最大值和最小值，甚至创建复杂的数据结构。

示例： 计算数组的总和

javascript
 代码解读
复制代码
const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); 

// 输出: 10

5. find()

需要找到第一个满足特定条件的元素？find()是你的救星。

它会返回第一个通过回调函数测试的元素的值，非常适合快速查找和避免遍历整个数组。

示例： 找到第一个大于3的元素

javascript
 代码解读
复制代码
const numbers = [1, 2, 4, 5];

const firstGreaterThanThree = numbers.find(number => number > 3);
console.log(firstGreaterThanThree);

// 输出: 4

6. findIndex()

findIndex()比find()更进一步，它会返回第一个通过回调函数测试的元素的索引。

这在查找数组中的特定数据、根据元素在数组中的位置修改元素，以及执行针对性的操作时非常有用。

示例： 找到第一个大于3的元素的索引

javascript
 代码解读
复制代码
const numbers = [1, 2, 4, 5];

const indexOfFirstGreaterThanThree = numbers.findIndex(number => number > 3);
console.log(indexOfFirstGreaterThanThree);

// 输出: 2

7. some()

你是否需要检查数组中是否存在至少一个满足特定条件的元素？some()可以帮到你。

它会检查是否存在至少一个元素通过回调函数测试。

你可以用它来确认条件、验证输入，或者在只需要一个匹配元素时简化逻辑。

示例： 检查数组中是否存在大于10的元素

javascript
 代码解读
复制代码
const numbers = [1, 5, 8, 12];

const hasElementGreaterThanTen = numbers.some(number => number > 10);
console.log(hasElementGreaterThanTen);

// 输出: true

8. every()

every()是some()的严格的兄长。它会确保数组中的所有元素都通过回调函数测试。

这对于数据验证、检查所有元素是否符合指定结构，以及进行质量检查非常有用。

示例： 检查数组中的所有元素是否都是字符串

javascript
 代码解读
复制代码
const data = ["apple", "banana", 10];

const allStrings = data.every(element => typeof element === "string");
console.log(allStrings);

// 输出: false

9. includes()

有时你只需要知道数组中是否存在特定值。 includes()是进行简单验证的最佳助手。

它会快速检查给定值是否存在于数组中，这对于识别单个数据点或根据数组成员资格创建条件逻辑非常重要。

示例： 检查数组中是否包含值 "orange"

javascript
 代码解读
复制代码
const fruits = ["apple", "banana", "cherry"];

const hasOrange = fruits.includes("orange");
console.log(hasOrange);

// 输出: false

10. flat()

你是否遇到过多维数组或数组嵌套在数组中的情况？它们可能很混乱。flat()可以将它们转换为一维数组。

这对于简化嵌套数组、处理可能具有嵌套结构的API数据，以及存储数据以便进一步处理非常有用。

示例： 扁平化嵌套数组

javascript
 代码解读
复制代码
const nestedArray = [1, [2, 3], 4];

const flattenedArray = nestedArray.flat();
console.log(flattenedArray);

// 输出: [1, 2, 3, 4]

提示：  考虑使用flatMap()，这是JavaScript的另一个新功能，它可以让你更好地控制扁平化和转换操作。

一些技巧

现在你已经掌握了基础知识，让我们来看看一些高级技巧，它们将提升你的学习水平：

1. 链式调用数组方法

多个数组方法可以串联在一起，以实现复杂的变化，同时保持清晰易懂。

例如，你可以在一行代码中过滤出偶数，并将它们映射到它们的平方：

javascript
 代码解读
复制代码
const numbers = [1, 2, 3, 4, 5];

const evenSquares = numbers.filter(number => number % 2 === 0)
                           .map(number => number * number);

console.log(evenSquares);

// 输出: [4, 16]

2. 自定义回调函数

请记住，许多数组函数依赖于回调函数。

创建强大且定义明确的回调函数，以处理极端情况，确保类型安全（通过指定期望的数据类型）以及提高代码可维护性。

例如，一个定义明确的回调函数，用于检查数字是否为偶数：

javascript
 代码解读
复制代码
function isEven(number) {
  if (typeof number !== 'number') {
    throw new TypeError('Input must be a number');
  }
  return number % 2 === 0;
}

3. 错误处理

意外数据或缺失片段可能会导致错误。

探讨如何在数组函数中处理潜在的错误，以避免出现意外行为。

你可以使用try-catch块优雅地处理异常：

javascript
 代码解读
复制代码
const numbers = [1, "two", 3];

try {
  const doubledNumbers = numbers.map(number => number * 2);
  console.log(doubledNumbers);

// [2, NaN, 6] (Error for "two")

} catch (error) {
  console.error("An error occurred:", error);
}

4. 性能考虑

并非所有数组方法都具有相同的性能。简要讨论一下大型或复杂数组的性能影响（例如，forEach 与for循环）。

• 内存： 大量数据可能会压垮你的系统。
• 循环： 访问大型数组需要时间。
• 复杂元素： 处理数组中的复杂数据速度会显著变慢。

forEach 与 for 循环：性能相似，但 forEach 提供更多控制，而且更易于阅读。

技巧：  对于常见的查找操作，使用其他数据结构；将大型操作拆分成更小的操作；仔细检查你的代码，找出性能瓶颈。（之后优化！）

对于真正的大型数据集，尝试使用传统的循环来提高效率，特别是在一些旧的浏览器中，它们可能没有优化数组函数的实现。

5. 函数式编程

数组函数非常适合函数式编程范式。

函数式编程侧重于纯函数（没有副作用）和不可变数据。

使用数组方法从现有数组中构建新数组，可以让你保持原始数据的有效性，提高可预测性，并简化调试工作。

最佳实践

• 组合函数： 如前所述，链式调用多个任务可以实现快速而强大的操作。不要害怕尝试和混合使用它们，在一行代码中创建复杂的变化。
• 不可变性： 尽可能创建新的数组，而不是修改旧数组。这可以提高可读性，并降低产生意外影响的风险。使用map、filter和slice等方法创建新数组。
• 错误处理： 在你的回调函数中始终使用健壮的错误处理机制，以捕获异常输入或缺失元素。这可以防止因组合和崩溃而导致程序出错。

作者：前端宝哥
链接：https://juejin.cn/post/7413682017299365922
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。