本文旨在讲解如何在 JavaScript 中循环遍历数组，并比较当前元素与其相邻的前一个元素，根据比较结果生成一个新的数组。我们将通过 reduce 方法实现这一功能，并提供详细的代码示例和解释，帮助开发者掌握这种常用的数组处理技巧。
在 JavaScript 中，经常需要遍历数组并进行元素间的比较。例如，需要找出数组中所有与前一个元素相同的元素，并将它们的值存储到一个新的数组中。本文将介绍如何使用 reduce 方法来实现这一目标。
使用 reduce 方法比较相邻元素
reduce 方法是 JavaScript 数组的一个强大的工具，它可以将数组中的元素逐个处理，最终返回一个单一的值。我们可以利用 reduce 方法的累加器（accumulator）来存储比较的结果，从而生成我们需要的数组。
以下是一个具体的例子：
立即学习“Java免费学习笔记（深入）”；
const array = [{id: 1, name: 'A'}, {id: 2, name: 'B'}, {id: 3, name: 'B'}, {id: 4, name: 'B'}, {id: 5, name: 'C'}, {id: 6, name: 'D'}, {id: 7, name: 'E'}, {id: 8, name: 'E'}, {id: 9, name: 'E'}];
let result = array.reduce((acc, curr, index) => {
const previousItem = array[index - 1];
if (previousItem && curr.name === previousItem.name) {
acc.push(curr.name);
}
return acc;
}, []);
console.log(result); // Output: [ 'B', 'B', 'B', 'E', 'E', 'E' ]代码解释：
- array.reduce((acc, curr, index) => { ... }, []): reduce 方法接收两个参数：一个回调函数和一个初始值。 回调函数在数组的每个元素上执行，初始值是累加器 acc 的初始值（这里是一个空数组 []）。
- acc: 累加器，用于存储结果。每次回调函数执行后，都会返回新的累加器值。
- curr: 当前正在处理的数组元素。
- index: 当前正在处理的数组元素的索引。
- const previousItem = array[index - 1]: 获取当前元素的前一个元素。
- if (previousItem && curr.name === previousItem.name): 检查前一个元素是否存在（index > 0），并且当前元素的 name 属性是否与前一个元素的 name 属性相同。
- acc.push(curr.name): 如果条件满足，将当前元素的 name 属性添加到累加器 acc 中。
- return acc: 返回更新后的累加器。
注意事项
- 初始值: reduce 方法的第二个参数是累加器的初始值。如果没有提供初始值，那么数组的第一个元素将作为初始值，并且回调函数将从数组的第二个元素开始执行。但是，如果数组为空且没有提供初始值，则会抛出 TypeError 异常。
- 边界情况: 在比较相邻元素时，需要注意数组的第一个元素没有前一个元素。因此，在回调函数中需要判断 index 是否大于 0，或者直接判断 previousItem 是否存在。
总结
使用 reduce 方法可以方便地遍历数组并比较相邻元素，从而生成新的数组。 这种方法简洁高效，可以应用于各种数组处理场景。 掌握 reduce 方法是 JavaScript 开发中的一项重要技能。
