5個數(shù)組Array方法: indexOf、filter、forEach、map、reduce使用實例
ECMAScript5標(biāo)準(zhǔn)發(fā)布于2009年12月3日，它帶來了一些新的，改善現(xiàn)有的Array數(shù)組操作的方法。然而，這些新奇的數(shù)組方法并沒有真正流行起來的，因為當(dāng)時市場上缺乏支持ES5的瀏覽器。
Array "Extras"
沒有人懷疑這些方法的實用性，但寫polyfill（PS:兼容舊版瀏覽器的插件）對他們來說是不值得的。它把“必須實現(xiàn)”變成了“最好實現(xiàn)”。有人居然將這些數(shù)組方法稱之為Array "Extras"。哎！
但是，時代在變化。如果你看看Github上流行的開源JS項目，你會發(fā)現(xiàn)趨勢正在轉(zhuǎn)變。大家都想削減大量（第三方庫）的依賴，僅用本地代碼來實現(xiàn)。
好了，讓我們開始吧。
我的5個數(shù)組
在ES5中，一共有9個Array方法 http://kangax.github.io/compat-table/es5/
注* 九個方法
Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight
我將挑選5種方法，我個人認(rèn)為是最有用的，很多開發(fā)者都會碰到。
1) indexOf
indexOf()方法返回在該數(shù)組中第一個找到的元素位置，如果它不存在則返回-1。
不使用indexOf時
var arr = ['apple','orange','pear'],
found = false;
for(var i= 0, l = arr.length; i< l; i++){
if(arr[i] === 'orange'){
found = true;
}
}
console.log("found:",found);
使用后
var arr = ['apple','orange','pear'];
console.log("found:", arr.indexOf("orange") != -1);
2) filter
該filter()方法創(chuàng)建一個新的匹配過濾條件的數(shù)組。
不用 filter() 時
var arr = [
{"name":"apple", "count": 2},
{"name":"orange", "count": 5},
{"name":"pear", "count": 3},
{"name":"orange", "count": 16},
];
var newArr = [];
for(var i= 0, l = arr.length; i< l; i++){
if(arr[i].name === "orange" ){
newArr.push(arr[i]);
}
}
console.log("Filter results:",newArr);
用了 filter():
var arr = [
{"name":"apple", "count": 2},
{"name":"orange", "count": 5},
{"name":"pear", "count": 3},
{"name":"orange", "count": 16},
];
var newArr = arr.filter(function(item){
return item.name === "orange";
});
console.log("Filter results:",newArr);
3) forEach()
forEach為每個元素執(zhí)行對應(yīng)的方法
var arr = [1,2,3,4,5,6,7,8];
// Uses the usual "for" loop to iterate
for(var i= 0, l = arr.length; i< l; i++){
console.log(arr[i]);
}
console.log("========================");
//Uses forEach to iterate
arr.forEach(function(item,index){
console.log(item);
});
forEach是用來替換for循環(huán)的
4) map()
map()對數(shù)組的每個元素進行一定操作（映射）后，會返回一個新的數(shù)組，
不使用map
var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];
function getNewArr(){
var newArr = [];
for(var i= 0, l = oldArr.length; i< l; i++){
var item = oldArr[i];
item.full_name = [item.first_name,item.last_name].join(" ");
newArr[i] = item;
}
return newArr;
}
console.log(getNewArr());
使用map后
var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];
function getNewArr(){
return oldArr.map(function(item,index){
item.full_name = [item.first_name,item.last_name].join(" ");
return item;
});
}
console.log(getNewArr());
map()是處理服務(wù)器返回數(shù)據(jù)時是一個非常實用的函數(shù)。
5) reduce()
reduce()可以實現(xiàn)一個累加器的功能，將數(shù)組的每個值（從左到右）將其降低到一個值。
說實話剛開始理解這句話有點難度，它太抽象了。
場景： 統(tǒng)計一個數(shù)組中有多少個不重復(fù)的單詞
不使用reduce時
var arr = ["apple","orange","apple","orange","pear","orange"];
function getWordCnt(){
var obj = {};
for(var i= 0, l = arr.length; i< l; i++){
var item = arr[i];
obj[item] = (obj[item] +1 ) || 1;
}
return obj;
}
console.log(getWordCnt());
使用reduce()后
var arr = ["apple","orange","apple","orange","pear","orange"];
function getWordCnt(){
return arr.reduce(function(prev,next){
prev[next] = (prev[next] + 1) || 1;
return prev;
},{});
}
console.log(getWordCnt());
讓我先解釋一下我自己對reduce的理解。reduce(callback, initialValue)會傳入兩個變量?；卣{(diào)函數(shù)(callback)和初始值(initialValue)。假設(shè)函數(shù)它有個傳入?yún)?shù)，prev和next,index和array。prev和next你是必須要了解的。
一般來講prev是從數(shù)組中第一個元素開始的，next是第二個元素。但是當(dāng)你傳入初始值(initialValue)后，第一個prev將是initivalValue，next將是數(shù)組中的第一個元素。
比如：
/*
* 二者的區(qū)別，在console中運行一下即可知曉
*/
var arr = ["apple","orange"];
function noPassValue(){
return arr.reduce(function(prev,next){
console.log("prev:",prev);
console.log("next:",next);
return prev + " " +next;
});
}
function passValue(){
return arr.reduce(function(prev,next){
console.log("prev:",prev);
console.log("next:",next);
prev[next] = 1;
return prev;
},{});
}
console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());
相關(guān)文章
這篇文章主要介紹了原生js實現(xiàn)移動端Touch輪播圖的方法步驟，touch輪播圖其實就是通過手指的滑動，來左右切換輪播圖，touch輪播圖其實就是通過手指的滑動，來左右切換輪播圖，2019-01-01
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)下拉菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了javascript 分號總結(jié)及詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
單個按鈕在Web頁面中的運用有時候并不能滿足我們的業(yè)務(wù)需求，常常會看到將多個按鈕組合在一起使用，比如富文本編輯器里的一組小圖標(biāo)按鈕等。本文將詳細(xì)介紹Bootstrap按鈕組，感興趣的朋友一起看看吧2017-07-07
在 Javascript 的函數(shù)中有個名為 arguments 的類數(shù)組對象。它看起來是那么的詭異而且名不經(jīng)傳，但眾多的 Javascript 庫都使用著它強大的功能。所以，它的特性需要每個 Javascript 程序員去熟悉它。2010-10-10
歸納是為了更好的理解。平時同事有問題找我?guī)兔鉀Q問題，往往都是很小的問題，這種情況他們并不是缺乏解決問題的知識，而是需要找到問題的辦法2012-05-05
微信小程序wx.previewImage預(yù)覽圖片實例詳解
下面通過實例代碼給大家講解了微信小程序wx.previewImage預(yù)覽圖片功能,需要的朋友可以參考下2017-12-12
Javascript設(shè)計模式理論與編程實戰(zhàn)之簡單工廠模式
簡單工廠模式是由一個方法來決定到底要創(chuàng)建哪個類的實例, 而這些實例經(jīng)常都擁有相同的接口. 這種模式主要用在所實例化的類型在編譯期并不能確定， 而是在執(zhí)行期決定的情況。 說的通俗點，就像公司茶水間的飲料機，要咖啡還是牛奶取決于你按哪個按鈕2015-11-11
JavaScript中entries()和Object.values()方法的使用
本文詳細(xì)介紹了JavaScript中的兩個實用方法,entries()和Object.values(),下面就來介紹一下兩個方法在遍歷對象和數(shù)組時的應(yīng)用,感興趣的可以了解一下2024-12-12
這篇文章主要介紹了js獲取騰訊視頻ID的方法,涉及JavaScript針對URL地址規(guī)則的分析與字符串的截取操作相關(guān)操作技巧,需要的朋友可以參考下2016-10-10