本文實例講述了JavaScript遍歷數組的三種方法map、forEach與filter。分享給大家供大家參考，具體如下：
前言
近一段時間，因為項目原因，會經常在前端對數組進行遍歷、處理，JS自帶的遍歷方法有很多種，往往不加留意，就可能導致知識混亂的現象，并且其中還存在一些坑。前端時間在ediary中總結了js原生自帶的常用的對數組遍歷處理的方法，分別為：map、forEach、filter，在講解知識點的同時，會類比相識的函數進行對比，這樣會有助于思考方法的利與弊。
map()方法返回一個由原數組中的每個元素調用一個指定方法后的返回值組成的新數組
var newArray = ["1","2","3"].map(fucntion(e,i,arr){return parseInt(e,10)})3.1 支持return返回值；
3.2 return是啥，相當于把數組中的這一項變為啥（并不影響原來的數組，只是相當于把原數組克隆一份，把克隆的這一份數組中的對應項改變了）
3.3 map只能對元素進行加工處理，產生一個新的數組對象。而不能用它來進行篩選（篩選用filter），為什么不能，看個例子就知道了：
4.1 在字符串中使用
在一個String上使用map方法獲取字符串中每個字符所對應的ASCII碼組成的數組
var map = Array.prototype.mapvar a = map.call("Hello World", function(e){return e.charCodeAt(0);})// a的值為[72,101,108,108,111,32,87,111,114,108,100]5.1 很多時候，map給回調函數傳的是一個值，但是也有可能傳2個、3個值，例如下面的例子
var map = Array.prototype.mapvar 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.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);
forEach()方法返回一個由原數組中的每個元素調用一個指定方法后的返回值組成的新數組
forEach方法中的function回調有三個參數，
[].forEach(function(value, index, array))
3.1 這個方法沒有返回值，僅僅是遍歷數組中的每一項，不對原來數組進行修改
但是可以自己通過數組索引來修改原來的數組
3.2 forEach()不能遍歷對象，可以使用for in
4.1 您不能使用break語句中斷循環，也不能使用return語句返回到外層函數
4.2 ES5推出的，實際性能比for還弱
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); // --> undefinedconsole.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// 46.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);})filter()方法是對原數組進行過濾篩選，產生一個新的數組對象
2.1 filter()不會對空數組進行檢測（如果對空數組進行篩選，返回值位undefined）
2.2 filter()不會改變原始數組
2.3 返回數組，包含了符合條件的所有元素。如果沒有符合條件的元素則返回空數組
forEach方法中的function回調有三個參數，
[].filter(function(value, index, array)， thisValue)
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; })}參考：
http://www.49028c.com/article/157032.htm
http://www.49028c.com/article/157040.htm
http://www.49028c.com/article/157052.htm
http://www.49028c.com/article/157053.htm
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
PS：這里再為大家推薦一款JS數組遍歷方式分析對比工具供大家參考：
在線JS常見遍歷方式性能分析比較工具：http://tools.VeVB.COm/aideddesign/js_bianli
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數組操作技巧總結》、《JavaScript遍歷算法與技巧總結》、《javascript面向對象入門教程》、《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
