文章主要介紹了數(shù)組Array.prototype方法的使用拇舀,需要的朋友可以參考下奔缠,如果你是大神,請直接無視。
在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
在ES6即將普及的時代诡宗,我相信這些方法對FE開發(fā)者是非常實用的必備技能,接下來我將通過實例幫大家替換for循環(huán)大法击儡,更高效的來操作數(shù)組塔沃。
1、indexOf
indexOf()方法返回在該數(shù)組中第一個找到的元素位置阳谍,如果它不存在則返回-1蛀柴。
使用for:
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);
使用indexOf:
var arr = ['apple','orange','pear'];??
console.log("found:", arr.indexOf("orange") != -1);
2、lastindexOf
lastIndexOf() 方法返回在該數(shù)組中最后一個找到的元素位置矫夯,和 indexof相反鸽疾。
3、every()
every()可是檢測數(shù)組中的每一項是否符合條件
使用for:
/*?
* 是否全部大于0
*/
var ary = [12,23,24,42,1];
var result = function(){
? for (var i = 0; i < ary.length; i++) {
??? if(ary[i] < 0){
?????? return false;
??? }
? }
? return true; //需全部滿足
}
console.log(result()) //全部滿足,返回true
使用every:
var ary = [12,23,24,42,1];
var result = ary.every(function(item, index){
? return item > 0
})
console.log(result)
4训貌、some()
some()可以檢測數(shù)組中是否有某一項符合條件
使用for:
/*?
* 是否存在小于0的項
*/
var ary = [12,23,-24,42,1];
var result = function(){
? for (var i = 0; i < ary.length; i++) {
??? if(ary[i] < 0){
?????? return true;
??? }
? }
? return false; //只需滿足一個
}
console.log(result())? //有一項小于0制肮,返回true
使用some:
var ary = [12,23,-24,42,1];
var result = ary.some(function(item, index){
? return item < 0
})
console.log(result)
5、 forEach()?
forEach為每個元素執(zhí)行對應的方法
使用for:
var arr = [1,2,3,4,5,6,7,8];
for(var i= 0, l = arr.length; i< l; i++){
console.log(arr[i]);
}
使用forEach():
var arr = [1,2,3,4,5,6,7,8];
arr.forEach(function(item,index){
console.log(item);
});
forEach是用來替換for循環(huán)的
6递沪、 map()
map()對數(shù)組的每個元素進行一定操作(映射)后豺鼻,會返回一個新的數(shù)組,?
使用for:
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()是處理服務器返回數(shù)據(jù)時是一個非常實用的函數(shù)款慨。
forEach 與map的區(qū)別:
語法:forEach和map都支持2個參數(shù):一個是回調(diào)函數(shù)(item,index,list)和上下文儒飒;
forEach:用來遍歷數(shù)組中的每一項;這個方法執(zhí)行是沒有返回值的樱调,對原來數(shù)組也沒有影響约素;數(shù)組中有幾項,那么傳遞進去的匿名回調(diào)函數(shù)就需要執(zhí)行幾次笆凌;每一次執(zhí)行匿名函數(shù)的時候圣猎,還給其傳遞了三個參數(shù)值:數(shù)組中的當前項item,當前項的索引index,原始數(shù)組list;理論上這個方法是沒有返回值的乞而,僅僅是遍歷數(shù)組中的每一項送悔,不對原來數(shù)組進行修改;但是我們可以自己通過數(shù)組的索引來修改原來的數(shù)組爪模;
forEach方法中的this是ary,匿名回調(diào)函數(shù)中的this默認是window欠啤;
var ary = [12,23,24,42,1];
var res = ary.forEach(function (item,index,input) {
? input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(ary);//-->會對原來的數(shù)組產(chǎn)生改變;
map:?和forEach非常相似屋灌,都是用來遍歷數(shù)組中的每一項值的洁段,用來遍歷數(shù)組中的每一項;
區(qū)別:map的回調(diào)函數(shù)中支持return返回值共郭;return的是啥祠丝,相當于把數(shù)組中的這一項變?yōu)樯叮?/b>并不影響原來的數(shù)組疾呻,只是相當于把原數(shù)組克隆一份,把克隆的這一份的數(shù)組中的對應項改變了)写半;
不管是forEach還是map 都支持第二個參數(shù)值岸蜗,第二個參數(shù)的意思是把匿名回調(diào)函數(shù)中的this進行修改。
var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,input) {
? return item*10;
})
console.log(res);//-->[120,230,240,420,10];
console.log(ary);//-->[12,23,24,42,1]叠蝇;
7璃岳、 filter
該filter()方法創(chuàng)建一個新的匹配過濾條件的數(shù)組。
使用for:
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);
8悔捶、 reduce()
reduce()可以實現(xiàn)一個累加器的功能铃慷,將數(shù)組的每個值(從左到右)將其降低到一個值。 說實話剛開始理解這句話有點難度蜕该,它太抽象了枚冗。?
場景: 統(tǒng)計一個數(shù)組中有多少個不重復的單詞?
使用for:
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的理解。reduce(callback, initialValue)會傳入兩個變量蛇损。回調(diào)函數(shù)(callback)和初始值(initialValue)坛怪。假設函數(shù)它有個傳入?yún)?shù)淤齐,prev和next,index和array。prev和next你是必須要了解的袜匿。一般來講prev是從數(shù)組中第一個元素開始的更啄,next是第二個元素。但是當你傳入初始值(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());
9.reduceRight()
?reduceRight的語法以及回調(diào)函數(shù)的規(guī)則和reduce方法是一樣的义锥,區(qū)別就是在與reduce是升序,即角標從0開始岩灭,而reduceRight是降序拌倍,即角標從arr.length-1開始。
方法可應用于字符串噪径。
/*?
* 使用此方法反轉(zhuǎn)字符串中的字符
*/
var word = "retupmoc";
function AppendToArray(previousValue, currentValue) {
? return previousValue + currentValue;
}
var result = [].reduceRight.call(word, AppendToArray, "the ");
console.log(result); // the computer
補.isArray()
isArray()是Array對象的一個靜態(tài)函數(shù)柱恤,用來判斷一個對象是不是數(shù)組
var ary1 = [];
var res1 = Array.isArray(ary1);? // Output: true
console.log(res1)
var ary2 = new Array();
var res2 = Array.isArray(ary2);? // Output: true
console.log(res2)
var ary3 = [1, 2, 3];
var res3 = Array.isArray(ary3);? // Output: true
console.log(res3)
var ary4 = new Date();
var res4 = Array.isArray(ary4);? // Output: false
console.log(res4)
希望對你有幫助~? ?反正對我是很有幫助
轉(zhuǎn)自《一個不會寫文章的程序猿》