在前端开发中，数组是极为常见的数据结构，在 ECMAScript 2021 中，数组方法也得到了更新和增加。然而，在使用这些方法时，我们可能遇到各种错误，本文将介绍几个常见的错误及其解决方法。
错误 1：forEach 中修改数组导致无法遍历
forEach 是数组方法之一，用于遍历数组并执行回调函数。然而，在 forEach 中修改数组可能导致遍历失败，比如以下代码：
const arr = [1, 2, 3, 4];
arr.forEach((item, index, arr) => {
arr.push(item * 2); // 修改数组
});
console.log(arr);该代码中，forEach 中修改了数组 arr，使得原本四个元素的数组变成了八个元素，结果输出为 [ 1, 2, 3, 4, 2, 4, 6, 8 ]。这是因为 forEach 在遍历时是按照初始数组的长度进行遍历的，如上代码的第一轮遍历时 arr 的长度是 4，而第二轮遍历又新增了 4 个元素，所以会出现遍历失败的情况。
解决方法是将数组克隆一份，再对克隆的数组进行修改，如以下代码：
const arr = [1, 2, 3, 4];
const arrClone = [...arr]; // 克隆数组
arrClone.forEach((item, index, arrClone) => {
arrClone.push(item * 2); // 修改克隆的数组
});
console.log(arrClone); // [ 1, 2, 3, 4, 2, 4, 6, 8 ]错误 2：reduce 中未初始化 accumulator 参数导致错误
reduce 是数组方法之一，用于对数组中的元素进行归纳计算。在使用 reduce 时，如果未初始化 accumulator 参数可能会导致错误，如以下代码：
const arr = [1, 2, 3, 4]; const sum = arr.reduce((curr, item) => curr + item); // 未初始化 accumulator 参数 console.log(sum);
该代码的运行结果为 NaN，原因是在 reduce 中，accumulator 参数是必须要初始化的，否则会默认取数组的第一个元素。在以上代码中没有指定任何初始值，因此 curr 的初始值就是数组的第一个元素 1，导致计算错误。
解决方法是给 accumulator 参数初始化一个初始值，如以下代码：
const arr = [1, 2, 3, 4]; const sum = arr.reduce((curr, item) => curr + item, 0); // 初始化 accumulator 参数 console.log(sum);
该代码中，将 accumulator 参数初始化为 0，可以避免计算错误，输出结果为 10。
错误 3：sort 中未定义 compareFunction 参数导致错误
sort 是数组方法之一，用于对数组进行排序。在使用 sort 时，如果未定义 compareFunction 参数可能会导致错误，如以下代码：
const arr = [1, 2, 3, 4, 10]; arr.sort(); // 未定义 compareFunction 参数 console.log(arr);
在该代码中，没有定义 compareFunction 参数，导致排序失败，输出结果为 [ 1, 10, 2, 3, 4 ]。在不指定 compareFunction 参数时，sort 会默认将元素转换成字符串，然后比较它们的 UTF-16 编码顺序，因此出现了排序错误的情况。
解决方法是自定义 compareFunction 函数，如以下代码：
const arr = [1, 2, 3, 4, 10]; arr.sort((a, b) => a - b); // 指定 compareFunction 参数 console.log(arr);
该代码中，使用自定义的 compareFunction 函数进行排序，按照数字大小进行排序，输出结果为 [ 1, 2, 3, 4, 10 ]。
总结
在使用 ECMAScript 2021 中的 Array 方法时，我们需要注意一些常见错误，如在 forEach 中修改数组、在 reduce 中未初始化 accumulator 参数，以及在 sort 中未定义 compareFunction 参数。针对这些错误，我们可以进行相应的解决方法，避免出现运行错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650404ce95b1f8cacd0c1e12