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));
});

打印結(jié)果：

item:王一
index:0
arr:["王一","王二","王三"]
----------
item:王二
index:1
arr:["王一","王二","王三"]
----------
item:王三
index:2
arr:["王一","王二","王三"]
----------

注意：forEach() 沒(méi)有返回值。也可以理解成：forEach() 的返回值是 undefined

即 let tempArry = myArr.forEach() 這種方式接收是沒(méi)有意義的

forEach() 能不能改變?cè)瓟?shù)組？

forEach() 能不能改變?cè)瓟?shù)組？關(guān)于這個(gè)問(wèn)題，大部分人會(huì)搞錯(cuò)。我們來(lái)看看下面的代碼

1、數(shù)組的元素是基本數(shù)據(jù)類(lèi)型：（無(wú)法改變?cè)瓟?shù)組）

let numArr = [1, 2, 3];

numArr.forEach((item) => {
    item = item * 2;
});
console.log(numArr); // 打印結(jié)果：[1, 2, 3]

上面這段代碼，你可要看仔細(xì)了，打印結(jié)果是 [1, 2, 3]，不是 [2, 4, 6]

2、數(shù)組的元素是引用數(shù)據(jù)類(lèi)型：（直接修改整個(gè)元素對(duì)象時(shí)，無(wú)法改變?cè)瓟?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}]

3、數(shù)組的元素是引用數(shù)據(jù)類(lèi)型：（修改元素對(duì)象里的某個(gè)屬性時(shí)，可以改變?cè)瓟?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}]

所以其實(shí) forEach 不會(huì)直接改變調(diào)用它的對(duì)象，但是那個(gè)對(duì)象可能會(huì)被 callback 函數(shù)改變，上述現(xiàn)象如果了解基礎(chǔ)數(shù)據(jù)類(lèi)型賦值是值傳遞，而引用數(shù)據(jù)類(lèi)型賦值是引用地址的傳遞后其實(shí)就很好理解啦

我B站也已發(fā)布關(guān)于基礎(chǔ)數(shù)據(jù)和引用數(shù)據(jù)類(lèi)型的區(qū)別視頻，如不清楚此基礎(chǔ)，請(qǐng)務(wù)必要補(bǔ)齊哦

如果你需要通過(guò) forEach 修改原數(shù)組，建議用 forEach 里面的參數(shù) 2 和參數(shù) 3 來(lái)做，具體請(qǐng)看下面的標(biāo)準(zhǔn)做法

forEach() 通過(guò)參數(shù) 2、參數(shù) 3 修改原數(shù)組：（標(biāo)準(zhǔn)做法）

// 1、數(shù)組的元素是基本數(shù)據(jù)類(lèi)型
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ù)類(lèi)型時(shí)，直接修改對(duì)象
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ù)類(lèi)型時(shí)，修改對(duì)象的某個(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}]

總結(jié)：

如果純粹只是遍歷數(shù)組，那么，可以用 forEach() 方法

但是，如果你想在遍歷數(shù)組的同時(shí)，去改變數(shù)組里的元素內(nèi)容，那么，最好是用 map() 方法來(lái)做，map() 方法本身會(huì)返回一個(gè)經(jīng)過(guò)處理后全新的數(shù)組，不要用 forEach() 方法，避免出現(xiàn)一些低級(jí)錯(cuò)誤

sort() 介紹

sort()：對(duì)數(shù)組的元素進(jìn)行從小到大來(lái)排序（會(huì)改變?cè)瓉?lái)的數(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));

打印結(jié)果：

arr1 =["a","b","c","d","e","f"]
result =["a","b","c","d","e","f"]

從上方的打印結(jié)果中，我們可以看到，sort 方法會(huì)改變?cè)瓟?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));

打印結(jié)果：

arr2 = [1,11,2,3,4,5]
result = [1,11,2,3,4,5]

上方的打印結(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ù)，來(lái)指定排序規(guī)則。

回調(diào)函數(shù)中需要定義兩個(gè)形參，瀏覽器將會(huì)分別使用數(shù)組中的元素作為實(shí)參去調(diào)用回調(diào)函數(shù)。

瀏覽器根據(jù)回調(diào)函數(shù)的返回值來(lái)決定元素的排序：（重要）

• 如果 compareFunction(a, b) 小于 0 ，那么 a 會(huì)被排列到 b 之前；
• 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相對(duì)位置不變
• 如果 compareFunction(a, b) 大于 0 ， b 會(huì)被排列到 a 之前

如果只是看上面的文字，可能不太好理解，我們來(lái)看看下面的例子，你肯定就能明白

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
*/

舉例：將數(shù)組中的數(shù)字按照從小到大排序

寫(xiě)法 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));

打印結(jié)果：

arr = [1, 2, 3, 4, 5, 11];
result = [1, 2, 3, 4, 5, 11];

上方代碼的寫(xiě)法太啰嗦了，其實(shí)也可以簡(jiǎn)化為如下寫(xiě)法：

寫(xiě)法 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));

打印結(jié)果不變。

上方代碼還可以寫(xiě)成 ES6 的形式，也就是將 function 改為箭頭函數(shù)，其寫(xiě)法如下

寫(xiě)法 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));

上方代碼，因?yàn)楹瘮?shù)體內(nèi)只有一句話(huà)，所以可以去掉 return 語(yǔ)句，繼續(xù)簡(jiǎn)化為如下寫(xiě)法

寫(xiě)法 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));

上面的各種寫(xiě)法中，寫(xiě)法 4 是我們?cè)趯?shí)戰(zhàn)開(kāi)發(fā)中用得最多的。

為了確保代碼的簡(jiǎn)潔優(yōu)雅，接下來(lái)的代碼中，凡是涉及到函數(shù)，我們將盡量采用 ES6 中的箭頭函數(shù)來(lái)寫(xiě)

sort 方法舉例：將數(shù)組按里面某個(gè)字段從小到大排序

將數(shù)組從小到大排序，這個(gè)例子很常見(jiàn)。但在實(shí)際開(kāi)發(fā)中，總會(huì)有一些花樣。

下面這段代碼，在實(shí)際開(kāi)發(fā)中，經(jīng)常用到，一定要掌握。完整代碼如下：

let dataList = [
        {
          title: "品牌鞋子，高品質(zhì)低價(jià)入手",
          publishTime: 200,
        },
        {
          title: "不是很貴，但是很暖",
          publishTime: 100,
        },
        {
          title: "無(wú)法拒絕的美食，跟我一起吃吃",
          publishTime: 300,
        },
      ];

 console.log("排序前的數(shù)組：" + JSON.stringify(dataList));
 // 將dataList 數(shù)組，按照 publishTime 字段，從小到大排序。（會(huì)改變?cè)瓟?shù)組）
 dataList.sort((a, b) => parseInt(a.publishTime) - parseInt(b.publishTime));
 console.log("排序后的數(shù)組：" + JSON.stringify(dataList));

打印結(jié)果：

排序前的數(shù)組：[
    {"title":"品牌鞋子，高品質(zhì)低價(jià)入手","publishTime":200},
    {"title":"不是很貴，但是很暖","publishTime":100},
    {"title":"無(wú)法拒絕的美食，跟我一起吃吃","publishTime":300}
]

排序后的數(shù)組：[
    {"title":"不是很貴，但是很暖","publishTime":100},
    {"title":"品牌鞋子，高品質(zhì)低價(jià)入手","publishTime":200},
    {"title":"無(wú)法拒絕的美食，跟我一起吃吃","publishTime":300}
]

上方代碼中，有人可能會(huì)問(wèn)： publishTime 字段已經(jīng)是 nuber 類(lèi)型了，為啥在排序前還要做一次 parseInt() 轉(zhuǎn)換？

這是因?yàn)?，這種數(shù)據(jù)一般是后臺(tái)接口返回給前端的，數(shù)據(jù)可能是 number 類(lèi)型、也可能是 string 類(lèi)型，所以還是統(tǒng)一先做一次 parseInt() 轉(zhuǎn)換數(shù)字比較保險(xiǎn)。這是一種良好的工作習(xí)慣。

其實(shí)上面定義時(shí)最好優(yōu)先使用const，能更多保證程序安全，當(dāng)需要變量時(shí)請(qǐng)采用let。

最后悄悄說(shuō)句像 forEach、map 、filter、some、every、find、findIndex 這些數(shù)組原型上的方法除了可以接受第一個(gè)回調(diào)函數(shù)，同時(shí)可以接受第二個(gè)值用來(lái)指定前面回調(diào)函數(shù)里 this 值（很少用），但是也要注意如果回調(diào)函數(shù)如果使用箭頭函數(shù)則無(wú)法綁定 this，因?yàn)榧^函數(shù)沒(méi)有 this， 始終是取自上層作用域的 this（面試?？?，箭頭函數(shù)也沒(méi)有 arguments 不過(guò)可以使用剩余參數(shù)...解決）。

總結(jié)

到此這篇關(guān)于Js中forEach修改原數(shù)組與sort排序經(jīng)典場(chǎng)景的文章就介紹到這了,更多相關(guān)Js forEach修改原數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論