大部分前端都可能搞錯(cuò)的基礎(chǔ)問題？（forEach會(huì)不會(huì)修改原數(shù)組和sort排序）
共 6918字，需瀏覽 14分鐘
·
2024-07-12 12:11
大廠技術(shù) 高級(jí)前端 Node進(jìn)階
點(diǎn)擊上方 程序員成長指北，關(guān)注公眾號(hào)
回復(fù)1，加入高級(jí)Node交流群
forEach() 介紹
forEach()方法需要一個(gè)回調(diào)函數(shù)（這種函數(shù)，是由我們創(chuàng)建但是不由我們調(diào)用的）作為參數(shù)
回調(diào)函數(shù)中傳遞三個(gè)參數(shù)：
第一個(gè)參數(shù)，就是當(dāng)前正在遍歷的元素
第二個(gè)參數(shù)，就是當(dāng)前正在遍歷的元素的索引
第三個(gè)參數(shù)，就是正在遍歷的數(shù)組
代碼舉例：
let myArr = ['王一', '王二', '王三'];
myArr.forEach((item, index, arr) => {
console.log('item:' + item);
console.log('index:' + index);
console.log('arr:' + JSON.stringify(arr));
});
復(fù)制代碼打印結(jié)果：
item:王一
index:0
arr:["王一","王二","王三"]
----------
item:王二
index:1
arr:["王一","王二","王三"]
----------
item:王三
index:2
arr:["王一","王二","王三"]
----------
復(fù)制代碼注意：forEach() 沒有返回值。也可以理解成：forEach() 的返回值是 undefined
即 let tempArry = myArr.forEach() 這種方式接收是沒有意義的
forEach() 能不能改變原數(shù)組？
forEach() 能不能改變原數(shù)組？關(guān)于這個(gè)問題，大部分人會(huì)搞錯(cuò)。我們來看看下面的代碼
1、數(shù)組的元素是基本數(shù)據(jù)類型：（無法改變原數(shù)組）
let numArr = [1, 2, 3];
numArr.forEach((item) => {
item = item * 2;
});
console.log(numArr); // 打印結(jié)果：[1, 2, 3]
復(fù)制代碼上面這段代碼，你可要看仔細(xì)了，打印結(jié)果是 [1, 2, 3]，不是 [2, 4, 6]
2、數(shù)組的元素是引用數(shù)據(jù)類型：（直接修改整個(gè)元素對象時(shí)，無法改變原數(shù)組）
let objArr = [
{ name: '云牧', age: 20 },
{ name: '許嵩', age: 30 },
];
objArr.forEach((item) => {
item = {
name: '鄧紫棋',
age: '29',
};
});
console.log(JSON.stringify(objArr));
// 打印結(jié)果：[{"name": "云牧","age": 20},{"name": "許嵩","age": 30}]
復(fù)制代碼3、數(shù)組的元素是引用數(shù)據(jù)類型：（修改元素對象里的某個(gè)屬性時(shí)，可以改變原數(shù)組）
let objArr = [
{ name: '云牧', age: 28 },
{ name: '許嵩', age: 30 },
];
objArr.forEach((item) => {
item.name = '鄧紫棋';
});
console.log(JSON.stringify(objArr));
// 打印結(jié)果：[{"name":"鄧紫棋","age":28},{"name":"鄧紫棋","age":30}]
復(fù)制代碼如果你需要通過 forEach 修改原數(shù)組，建議用 forEach 里面的參數(shù) 2 和參數(shù) 3 來做，具體請看下面的標(biāo)準(zhǔn)做法
forEach() 通過參數(shù) 2、參數(shù) 3 修改原數(shù)組：（標(biāo)準(zhǔn)做法）
// 1、數(shù)組的元素是基本數(shù)據(jù)類型
let numArr = [1, 2, 3];
numArr.forEach((item, index, arr) => {
arr[index] = arr[index] * 2;
});
console.log(JSON.stringify(numArr)); // 打印結(jié)果：[2, 4, 6]
// 2、數(shù)組的元素是引用數(shù)據(jù)類型時(shí)，直接修改對象
let objArr = [
{ name: '云牧', age: 28 },
{ name: '許嵩', age: 34 },
];
objArr.forEach((item, index, arr) => {
arr[index] = {
name: '小明',
age: '10',
};
});
console.log(JSON.stringify(objArr));
// 打印結(jié)果：[{"name":"小明","age":"10"},{"name":"小明","age":"10"}]
// 3、數(shù)組的元素是引用數(shù)據(jù)類型時(shí)，修改對象的某個(gè)屬性
let objArr2 = [
{ name: '云牧', age: 28 },
{ name: '許嵩', age: 34 },
];
objArr2.forEach((item, index, arr) => {
arr[index].name = '小明';
});
console.log(JSON.stringify(objArr2));
// 打印結(jié)果：[{"name":"小明","age":28},{"name":"小明","age":34}]
復(fù)制代碼總結(jié)：
如果純粹只是遍歷數(shù)組，那么，可以用 forEach() 方法
但是，如果你想在遍歷數(shù)組的同時(shí)，去改變數(shù)組里的元素內(nèi)容，那么，最好是用 map() 方法來做，不要用 forEach()方法，避免出現(xiàn)一些低級(jí)錯(cuò)誤
sort() 介紹
sort()：對數(shù)組的元素進(jìn)行從小到大來排序（會(huì)改變原來的數(shù)組）
如果在使用 sort() 方法時(shí)不帶參，
默認(rèn)排序順序是在將元素轉(zhuǎn)換為字符串按照Unicode 編碼，從小到大進(jìn)行排序
舉例 1：（當(dāng)數(shù)組中的元素為字符串時(shí)）
let arr1 = ['e', 'b', 'd', 'a', 'f', 'c'];
let result = arr1.sort(); // 將數(shù)組 arr1 進(jìn)行排序
console.log('arr1 =' + JSON.stringify(arr1));
console.log('result =' + JSON.stringify(result));
復(fù)制代碼打印結(jié)果：
arr1 =["a","b","c","d","e","f"]
result =["a","b","c","d","e","f"]
復(fù)制代碼從上方的打印結(jié)果中，我們可以看到，sort 方法會(huì)改變原數(shù)組，而且方法的返回值也是同樣的結(jié)果
舉例 2：（當(dāng)數(shù)組中的元素為數(shù)字時(shí)）
let arr2 = [5, 2, 11, 3, 4, 1];
let result = arr2.sort(); // 將數(shù)組 arr2 進(jìn)行排序
console.log('arr2 =' + JSON.stringify(arr2));
console.log('result =' + JSON.stringify(result));
復(fù)制代碼打印結(jié)果：
arr2 = [1,11,2,3,4,5]
result = [1,11,2,3,4,5]
復(fù)制代碼上方的打印結(jié)果中，你會(huì)發(fā)現(xiàn)，使用 sort() 排序后，數(shù)字11竟然在數(shù)字2的前面。這是為啥呢？因?yàn)樯厦嬷v到了，sort()方法是按照Unicode 編碼進(jìn)行排序的。
那如果我想讓 arr2 里的數(shù)字，完全按照從小到大排序，怎么操作呢？繼續(xù)往下看。
sort()方法：帶參時(shí)，自定義排序規(guī)則
如果在 sort()方法中帶參，我們就可以自定義排序規(guī)則。具體做法如下：
我們可以在 sort()添加一個(gè)回調(diào)函數(shù)，來指定排序規(guī)則。
回調(diào)函數(shù)中需要定義兩個(gè)形參，瀏覽器將會(huì)分別使用數(shù)組中的元素作為實(shí)參去調(diào)用回調(diào)函數(shù)。
瀏覽器根據(jù)回調(diào)函數(shù)的返回值來決定元素的排序：（重要）
如果
compareFunction(a, b)小于 0 ，那么 a 會(huì)被排列到 b 之前；如果
compareFunction(a, b)等于 0 ， a 和 b 的相對位置不變如果
compareFunction(a, b)大于 0 ， b 會(huì)被排列到 a 之前如果只是看上面的文字，可能不太好理解，我們來看看下面的例子，你肯定就能明白
let arr = [5, 2, 11, 3, 4, 1];
arr.sort(function (a, b) {
console.log("a：" + a, "b：" + b);
});
/*
a：2 b：5
a：11 b：2
a：3 b：11
a：4 b：3
a：1 b：4
*/
復(fù)制代碼舉例：將數(shù)組中的數(shù)字按照從小到大排序
寫法 1：
let arr = [5, 2, 11, 3, 4, 1];
// 自定義排序規(guī)則
let result = arr.sort(function (a, b) {
if (a > b) {
// 如果 a 大于 b，則 b 排列 a 之前
return 1;
} else if (a < b) {
// 如果 a 小于 b，，則 a 排列 b 之前
return -1;
} else {
// 如果 a 等于 b，則位置不變
return 0;
}
});
console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
復(fù)制代碼打印結(jié)果：
arr = [1, 2, 3, 4, 5, 11];
result = [1, 2, 3, 4, 5, 11];
復(fù)制代碼上方代碼的寫法太啰嗦了，其實(shí)也可以簡化為如下寫法：
寫法 2：
let arr = [5, 2, 11, 3, 4, 1];
// 自定義排序規(guī)則
let result = arr.sort(function (a, b) {
return a - b; // 升序排列
// return b - a; // 降序排列
});
console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
復(fù)制代碼打印結(jié)果不變。
上方代碼還可以寫成 ES6 的形式，也就是將 function 改為箭頭函數(shù)，其寫法如下
寫法 3：（箭頭函數(shù)）
let arr = [5, 2, 11, 3, 4, 1];
// 自定義排序規(guī)則
let result = arr.sort((a, b) => {
return a - b; // 升序排列
});
console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
復(fù)制代碼上方代碼，因?yàn)楹瘮?shù)體內(nèi)只有一句話，所以可以去掉 return 語句，繼續(xù)簡化為如下寫法
寫法 4：（推薦）
let arr = [5, 2, 11, 3, 4, 1];
// 自定義排序規(guī)則：升序排列
let result = arr.sort((a, b) => a - b);
console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
復(fù)制代碼上面的各種寫法中，寫法 4 是我們在實(shí)戰(zhàn)開發(fā)中用得最多的。
為了確保代碼的簡潔優(yōu)雅，接下來的代碼中，凡是涉及到函數(shù)，我們將盡量采用 ES6 中的箭頭函數(shù)來寫
sort 方法舉例：將數(shù)組按里面某個(gè)字段從小到大排序
將數(shù)組從小到大排序，這個(gè)例子很常見。但在實(shí)際開發(fā)中，總會(huì)有一些花樣。
下面這段代碼，在實(shí)際開發(fā)中，經(jīng)常用到，一定要掌握。完整代碼如下：
let dataList = [
{
title: "品牌鞋子，高品質(zhì)低價(jià)入手",
publishTime: 200,
},
{
title: "不是很貴，但是很暖",
publishTime: 100,
},
{
title: "無法拒絕的美食，跟我一起吃吃",
publishTime: 300,
},
];
console.log("qianguyihao 排序前的數(shù)組：" + JSON.stringify(dataList));
// 將dataList 數(shù)組，按照 publishTime 字段，從小到大排序。（會(huì)改變原數(shù)組）
dataList.sort((a, b) => parseInt(a.publishTime) - parseInt(b.publishTime));
console.log("qianguyihao 排序后的數(shù)組：" + JSON.stringify(dataList));
復(fù)制代碼打印結(jié)果：
qianguyihao 排序前的數(shù)組：[
{"title":"品牌鞋子，高品質(zhì)低價(jià)入手","publishTime":200},
{"title":"不是很貴，但是很暖","publishTime":100},
{"title":"無法拒絕的美食，跟我一起吃吃","publishTime":300}
]
qianguyihao 排序后的數(shù)組：[
{"title":"不是很貴，但是很暖","publishTime":100},
{"title":"品牌鞋子，高品質(zhì)低價(jià)入手","publishTime":200},
{"title":"無法拒絕的美食，跟我一起吃吃","publishTime":300}
]
復(fù)制代碼上方代碼中，有人可能會(huì)問：publishTime 字段已經(jīng)是 Number 類型了，為啥在排序前還要做一次 parseInt() 轉(zhuǎn)換？
這是因?yàn)椋@種數(shù)據(jù)，一般是后臺(tái)接口返回給前端的，數(shù)據(jù)可能是 Number 類型、也可能是字符串類型，所以還是統(tǒng)一先做一次 parseInt() 比較保險(xiǎn)。這是一種良好的工作習(xí)慣
源自：https://juejin.cn/post/7087579243638423588
作者：云牧
Node 社群
-
我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
最后不要忘了點(diǎn)個(gè)贊再走噢