前言

　　近一段時間，因為專案原因，會經常在前端對陣列進行遍歷、處理，JS自帶的遍歷方法有很多種，往往不加留意，就可能導致知識混亂的現象，並且其中還存在一些坑。前端時間在ediary中總結了js原生自帶的常用的對陣列遍歷處理的方法，分別為：map、forEach、filter，在講解知識點的同時，會類比相識的函式進行對比，這樣會有助於思考方法的利與弊。

******************************************************************************************

                                           <1>、Js自帶的map()

******************************************************************************************

1.方法概述
　　map（）方法返回一個由原陣列中的每個元素呼叫一個指定方法後的返回值組成的新陣列

2.格式說明

var newArray = ["1","2","3"].map(fucntion(e,i,arr){return parseInt(e,10)})

　　map中回撥函式中的第一個引數為：當前正在遍歷的元素
　　map中回撥函式中的第一個引數為：當前元素索引
　　map中回撥函式中的第一個引數為：原陣列本身

3.使用說明
　　3.1 支援return返回值；
　　3.2 return是啥，相當於把陣列中的這一項變為啥（並不影響原來的陣列，只是相當於把原陣列克隆一份，把克隆的這一份陣列中的對應項改變了）
　　3.3 map只能對元素進行加工處理，產生一個新的陣列物件。而不能用它來進行篩選（篩選用filter），為什麼不能，看個例子就知道了：

4.例子
　　4.1 在字串中使用
　　　　在一個String上使用map方法獲取字串中每個字元所對應的ASCII碼組成的陣列

var map = Array.prototype.map
var a = map.call("Hello World", function(e){return e.charCodeAt(0);})
// a的值為[72,101,108,108,111,32,87,111,114,108,100]
 

5.易犯錯的點
　　5.1 很多時候，map給回撥函式傳的是一個值，但是也有可能傳2個、3個值，例如下面的例子

var map = Array.prototype.map
var a = map.call("Hello World", function(e){return e.charCodeAt(0);})
// a的值為[72,101,108,108,111,32,87,111,114,108,100]

　　為什麼會這樣，因為parseInt就是一個函式，它就是作為map的一個回撥函式，parseInt接收兩個引數，一個是String，一個是進位制

　　上面的函式就可以化為：

["1","2","3"].map(parseInt(string, radix));

　　即

["1","2","3"].map(function(string, radix){return parseInt(string, radix)})
// 所以才返回結果為：[1, NaN, NaN]

6.與map相關
　　6.1 Map物件
　　　　es6提供一個物件Map，看看這個Map建的物件到底是啥東西

　　　　它是一個物件，size是它的屬性，裡面的值封裝在[[Entries]]這個數組裡面

myMap.set(1, "a"); // 相當於java的map.put();
myMap.set(2, "b");
myMap.set(3, "c");
myMap.size();
myMap.get(1); 
myMap.get(2);
myMap.get(3);

********************************************************************************************

                                           <2>、Js自帶的forEach()方法

********************************************************************************************

1.方法概述
　　forEach（）方法返回一個由原陣列中的每個元素呼叫一個指定方法後的返回值組成的新陣列

2.格式說明
　　forEach方法中的function回撥有三個引數，
　　第一個引數為：當前正在遍歷的元素
　　第二個引數為：當前元素索引
　　第三個引數為：原陣列本身

[].forEach(function(value, index, array))

3.使用說明
　　3.1 這個方法沒有返回值，僅僅是遍歷陣列中的每一項，不對原來陣列進行修改
　　但是可以自己通過陣列索引來修改原來的陣列
　　3.2 forEach()不能遍歷物件，可以使用for in

4.缺點
　　4.1 您不能使用break語句中斷迴圈，也不能使用return語句返回到外層函式
　　4.2 ES5推出的，實際效能比for還弱

5.例子
　　5.1 通過陣列索引改變原陣列

var obj = [1,2,3,4,5,6]
var res = obj.forEach(function(item, index, arr) {
　　arr[index] = item * 10;
})
console.log(res); // --> undefined
console.log(obj); // --> [10,20,30,40,50,60]

　　5.2 如果陣列在迭代的時候被修改，則當前元素與前面的元素會跳過。因為forEach()不會在迭代之前建立陣列的副本

var words = ['1', '2', '3', '4'];
words.forEach(function(word) {
　　console.log(word);
　　if (word === '2') {
　　　　words.shift();
　　}
});
// 1
// 2
// 4

6. 與forEach相關
　　6.1 $.each 與 for in
　　　　可遍歷陣列，可遍歷物件
　　　　　　// 6.1.1遍歷陣列

var arr = [1，2，3，4，5]
var res = $.each(arr, function(index, value){
　　console.log(index, value);
})
console.log(res); // 返回值，被遍歷的函式

　　　　　　// 6.1.2遍歷物件

var obj = {name: "psg", age: 22, gender: "male"};
// for in 遍歷
for(var key in obj) {
　　console.log(key, obj[key]);
}
// $.each 遍歷
$.each(obj, function(key, value) {
　　console.log(key, value);
})

********************************************************************************************

                                          <3>、Js自帶的filter()方法

********************************************************************************************

1.方法概述
　　filter（）方法是對原陣列進行過濾篩選，產生一個新的陣列物件

2.注意事項
　　2.1 filter()不會對空陣列進行檢測（如果對空陣列進行篩選，返回值位undefined）
　　2.2 filter()不會改變原始陣列
　　2.3 返回陣列，包含了符合條件的所有元素。如果沒有符合條件的元素則返回空陣列

3.格式說明
　　forEach方法中的function回撥有三個引數，
　　　　第一個引數為：當前正在遍歷的元素
　　　　第二個引數為：當前元素索引
　　　　第三個引數為：原陣列本身

[].filter(function(value, index, array)， thisValue)

4.例子
　　4.1 在一個Array中，刪除偶數，只保留奇數

var arr = [1, 2, 3, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function(x) {
　　return x % 2 !== 0;
});
r; // [1，3，5，9，15]

　　4.2 把一個Array中的空字串刪掉

var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function(e) {
　　return s && s.trim(); // 注意：IE9一下的版本沒有trim()方法
});
r; // ['A', 'B', 'C']

　　4.3 巧妙去除Array的重複元素

var r, arr = ['A', 'B', 'C', 'D', 'B', 'A']
r = arr.filter(function(e, i, self) {
　　return self.indexOf === i;
})
console.log(r); // --> ['A', 'B', 'C', 'D']

　　4.4 篩選素數

function get_primes(arr) {
　　var i;
　　return arr.filter(function (element) {
　　　　var flag = true;
　　　　if (element < 2) {
　　　　　　flag = false;
　　　　} else {
　　　　　　for (var i = 2; i < element; i++) {
　　　　　　　　if (element % i == 0) {
　　　　　　　　　　flag = false;
　　　　　　　　　　break;
　　　　　　　　}
　　　　　　}
　　　　}
　　　　return flag;
　　})
}

參考部落格：

https://www.cnblogs.com/liuruyi/p/6483526.html

https://www.cnblogs.com/leaf930814/p/6667011.html

https://blog.csdn.net/weixin_38098192/article/details/80743719

https://www.cnblogs.com/cjx-work/p/8052865.html