es6 非常實用的必備技能, 代替for循環(huán),方法有很多哦

文章主要介紹了數(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)自《一個不會寫文章的程序猿》

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市找爱,隨后出現(xiàn)的幾起案子梗顺,更是在濱河造成了極大的恐慌,老刑警劉巖车摄,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件寺谤,死亡現(xiàn)場離奇詭異仑鸥,居然都是意外死亡,警方通過查閱死者的電腦和手機矗漾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門锈候,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人敞贡,你說我怎么就攤上這事泵琳。” “怎么了誊役?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵获列,是天一觀的道長。 經(jīng)常有香客問我蛔垢,道長击孩,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任鹏漆,我火速辦了婚禮巩梢,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘艺玲。我一直安慰自己括蝠,他們只是感情好,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布饭聚。 她就那樣靜靜地躺著忌警,像睡著了一般。 火紅的嫁衣襯著肌膚如雪秒梳。 梳的紋絲不亂的頭發(fā)上法绵,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天,我揣著相機與錄音酪碘,去河邊找鬼朋譬。 笑死,一個胖子當著我的面吹牛婆跑,可吹牛的內(nèi)容都是我干的此熬。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼滑进,長吁一口氣:“原來是場噩夢啊……” “哼犀忱!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起扶关,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤阴汇,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后节槐,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體搀庶,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡拐纱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了哥倔。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片秸架。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖咆蒿,靈堂內(nèi)的尸體忽然破棺而出东抹,到底是詐尸還是另有隱情,我是刑警寧澤沃测,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布缭黔,位于F島的核電站,受9級特大地震影響蒂破,放射性物質(zhì)發(fā)生泄漏馏谨。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一附迷、第九天 我趴在偏房一處隱蔽的房頂上張望惧互。 院中可真熱鬧,春花似錦喇伯、人聲如沸壹哺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至截珍,卻和暖如春攀甚,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背岗喉。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工秋度, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人钱床。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓荚斯,卻偏偏與公主長得像,于是被迫代替她去往敵國和親查牌。 傳聞我的和親對象是個殘疾皇子事期,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容