Js中forEach修改原数组与sort排序经典场景详解

在Js开发中，forEach和sort是常用的数组方法。然而，在使用这两个方法的时候，有一些需要注意的事项。本文将重点讲解forEach和sort两个方法在修改原数组和排序时的经典场景。

1. forEach修改原数组

1.1 forEach函数原理

forEach是一种迭代数组元素的方法，可以通过回调函数对数组元素进行处理。forEach传递3个参数给回调函数：当前元素的值，当前元素在数组中的索引，以及forEach方法被调用的数组。

array.forEach(function(currentValue,index,arr), thisValue)

其中，第一个参数currentValue是必须的，表示当前元素的值。index和arr可选。thisValue是可选的，在执行回调函数时可用作this的值。

1.2 forEach修改原数组方法

在使用forEach方法时，需注意forEach方法不能修改原数组中的元素。以下示例中，现有一个数组arr，要求将其中的元素都乘以2，再将结果输出。

const arr = [1, 2, 3, 4];

arr.forEach(function (item) {
    item = item * 2;
    console.log(item);
});

console.log(arr); // [1, 2, 3, 4]

结果输出如下：

2
4
6
8
[1, 2, 3, 4]

可以看到，即使在回调函数中将元素乘以2，最终的结果并没有改变。因为在使用forEach时，是将每个元素复制一份后，将复制品作为回调函数的参数传递的。因此，对原数组的修改并不会影响原数组本身。

1.3 forEach修改原数组的解决方案

要修改原数组中的元素，可以尝试使用for循环或map方法。

1.3.1 for循环

使用for循环遍历数组，对每个元素执行修改操作。

for (let i = 0; i < arr.length; i++) {
    arr[i] = arr[i] * 2;
}

1.3.2 map方法

使用map方法对原数组进行映射，得到一个新的数组。需要注意的是，map方法并不会修改原数组，而是返回一个新的数组。

const newArr = arr.map(function (item) {
    return item * 2;
});

2. sort排序

2.1 sort函数原理

sort方法是一种对数组元素进行排序的方法。sort方法的原理是采用数组排序算法来重新排序数组。有两种方式来使用sort方法进行数组排序：自然排序和自定义排序。

自然排序：将数组元素按照字符编码点 Unicode值来进行排序。

const arr = [3, 1, 4, 2];
arr.sort();
console.log(arr); // [1, 2, 3, 4]

自定义排序：传递一个函数作为参数，该函数将决定如何对数组进行排序。

const arr = ['hello', 'world', 'good', 'morning', 'afternoon'];
arr.sort(function (a, b) {
    if (a.length > b.length) {
        return 1;
    } else if (a.length < b.length) {
        return -1;
    } else {
        return 0;
    }
});

console.log(arr); // [ 'good', 'hello', 'world', 'afternoon', 'morning' ]

2.2 sort修改原数组

需要注意的是，sort方法会改变原数组，而不是返回一个新的数组。以下示例中，现有一个数组arr，要求将其中的元素按降序排列。

const arr = [3, 1, 4, 2];

arr.sort(function (a, b) {
    return b - a;
});

console.log(arr); // [4, 3, 2, 1]

在调用sort方法后，原数组arr的元素顺序已经被改变，从前往后依次为4, 3, 2, 1。

2.3 sort排序的解决方案

若需排序而不改变原数组，则可以使用slice方法创建一个新的数组副本，再对其进行排序。

const arr = [3, 1, 4, 2];
const newArr = arr.slice();

newArr.sort(function (a, b) {
    return b - a;
});

console.log(newArr); // [4, 3, 2, 1]
console.log(arr);    // [3, 1, 4, 2]

3. 总结

本文主要介绍了forEach和sort方法在修改原数组和排序时的注意事项和解决方案。在使用forEach使用时，可使用for循环或map方法修改原数组，而在使用sort方法时，需要注意sort方法会改变原数组，如果不想修改原数组，则需使用slice方法创建一个新的数组副本。