JavaScript数组方法避坑指南：区分修改原数组与返回新数组的操作

JavaScript作为一种高度灵活的语言，提供了丰富的数组操作工具以简化开发流程。然而，部分数组方法的行为可能与直觉相悖，特别是那些会直接修改原始数组的方法，容易引发难以预料的副作用。为了规避此类风险，本文将详细解析哪些原生数组方法会改变原数组，并提供更优的使用建议。

不会修改原数组的方法

在深入探讨会改变原数组的方法之前，首先梳理那些不会修改原数组的常用方法及其行为特征。

新增、查找、迭代

• concat(): 返回新数组，原数组不变
• includes(): 查询元素是否存在，原数组不变
• indexOf(): 查询元素位置，原数组不变
• join(): 返回新字符串，原数组不变
• lastIndexOf(): 查询元素位置，原数组不变
• slice(): 返回新数组，原数组不变
• toString(): 返回字符串，原数组不变
• values(): 返回迭代对象，原数组不变

非改变原数组的操作

• filter(): 过滤出新数组，原数组不变
• find(): 查询元素并返回，原数组不变
• findIndex(): 查询元素位置并返回， 原数组不变
• map(): 返回新数组，原数组不变
• reduce(): 返回一个累加器计算的结果，原数组不变
• some(): 判断是否有符合条件元素，原数组不变

上述方法均用于从数组中提取信息或生成新的数组/对象。当需要保留原始数据不变时，使用这些方法是安全且推荐的做法。

会修改原数组的方法

push() 和 unshift()

尽管JavaScript提供了众多数组操作接口，push() 和 unshift() 仍是高频使用的方法。它们用于向数组添加元素，其中 push() 在数组末尾添加，而 unshift() 在数组开头添加。与返回新数组或仅执行查找的方法不同，这两者会直接修改原始数组。

let numArr = [1, 2, 3]
numArr.push(4)
console.log(numArr) // [1, 2, 3, 4]

let nameArr = ['Tom', 'Jerry']
nameArr.unshift('Lisa') // 3
console.log(nameArr) // ['Lisa', 'Tom', 'Jerry'] 

pop() 和 shift()

与 push()、unshift() 类似，pop() 方法用于从数组末尾移除最后一个元素并返回该元素的值。而 shift() 方法则从数组开头移除第一个元素并返回其值。这两个方法在修改原数组的同时，返回被删除的元素。以下是一些示例：

let numArr = [1, 2, 3]
numArr.pop()
console.log(numArr) // [1, 2]

let nameArr = ['Tom', 'Jerry']
nameArr.shift()
console.log(nameArr) // ['Jerry']

使用这两个方法时，务必注意获取被删除元素的返回值，以免丢失数据。

reverse()

reverse() 方法用于反转数组中所有元素的顺序，并返回修改后的数组。需要注意的是，该操作直接在原始数组上进行，而非创建新数组。

let numArr = [1, 2, 3]
numArr.reverse()
console.log(numArr) // [3, 2, 1]

虽然该方法可用于翻转数组顺序，但如果希望保留原始数组，需提前调用 slice() 方法创建副本后再进行操作。

sort()

sort() 方法用于对数组进行排序，并返回修改后的数组。默认情况下，它按字母升序排序字符串，按数字升序排序数字。该方法同样会直接更改原始数组。

let numArr = [9, 2, 5, 1]
numArr.sort()
console.log(numArr) // [1, 2, 5, 9]

然而，对数字数组进行排序时，使用 sort() 需注意其默认行为可能不符合预期。例如，以下代码展示了如何将数字数组按从大到小的顺序排列。

let numArr = [9, 2, 5, 1]
numArr.sort(function(a, b) {
  return b - a;
});
console.log(numArr); // [9, 5, 2, 1]

请注意，sort() 方法还有其他用法，请查阅相关资料获取更多信息。

splice()

除了添加和删除单一元素外，splice() 还可以实现添加、删除或替换多个元素的功能。该方法的返回值是被删除元素组成的新数组，同时原始数组也会被修改。

let numArr = [1, 2, 3, 4]
numArr.splice(2, 1, 'three')
console.log(numArr) // [1, 2, "three", 4]

splice() 方法的第一个参数指定操作起始位置，第二个参数指定删除的元素数量，后续可选参数则表示要添加的新元素。这些操作均会改变原数组，因此使用时需格外谨慎。

最佳实践

尽管有时需要修改原数组，但尽量避免直接操作原始数据。使用 concat()、slice() 和 map() 等能创建新数组的方法，可以有效解决数据变更问题。

let numArr = [1, 2, 3]
let incrementedArr = numArr.map(function(num) {
  return num + 1;
});
console.log(incrementedArr); // [2, 3, 4]
console.log(numArr); // [1, 2, 3]

在处理原始数组时，应尽量避免使用会修改数组的方法，并考虑复制或备份原始数组，以避免不必要的更改。

此外，还可以使用 Object.assign()、Object.create() 等方法创建新的对象，而不是直接修改源对象。这有助于避免在应用程序中追踪对象状态时的复杂性，并使代码更具模块化和可维护性。

结论

JavaScript提供了丰富的数组操作方法，但其中部分方法会修改原始数组。了解哪些方法会改变原数组，对于前端开发人员至关重要。在实际应用中，误用这些修改原数组的方法可能导致不可预测的结果或缺陷。因此，建议在使用原始数组时，优先选择能创建新数组的方法，并注意备份原始数据。

希望本文的介绍能帮助读者深入理解哪些JavaScript原生数组方法会改变原数组。尽管涉及的方法数量有限，但其功能和应用场景差异显著，具有极高的实用价值。在日常开发中，开发人员应根据具体需求选择合适的方法，以充分利用JavaScript的强大功能。

到此这篇关于躲避这些会改变原数组JavaScript数组方法让开发流畅无阻的文章就介绍到这了,更多相关JavaScript数组方法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！