深入淺出ES6教程『數(shù)組的循環(huán)』

?? 個(gè)人主頁歡迎訪問 ??


大家好梨树,本人名叫蘇日儷格,大家叫我 (格格) 就好苦酱,在上一章節(jié)中我們學(xué)到了擴(kuò)展運(yùn)算符的用法酥泞,下面我們一起來繼續(xù)學(xué)習(xí)數(shù)組的循環(huán):

這里我們先說ES5中的循環(huán)伍宦,以下幾種循環(huán)的前五種接受的參數(shù)是一樣的芽死,都有兩個(gè)參數(shù):
第一個(gè)參數(shù):循環(huán)里面執(zhí)行的回調(diào)函數(shù)乏梁,循環(huán)調(diào)用執(zhí)行的語句
第二個(gè)參數(shù):this的指向(可有可無)
循環(huán)中回調(diào)函數(shù)的參數(shù)有三個(gè):
第一個(gè)參數(shù):循環(huán)出來的值
第二個(gè)參數(shù):循環(huán)出來的值的索引
第三個(gè)參數(shù):數(shù)組本身

1. forEach()

let arr = ['aaa','bbb','ccc'];
arr.forEach(function(val,index,arr){
    console.log(this,val,index,arr);
    // {111} "aaa" 0 ["aaa", "bbb", "ccc"]
    // {111} "bbb" 1 ["aaa", "bbb", "ccc"]
    // {111} "ccc" 2 ["aaa", "bbb", "ccc"]
},111);

上面的這個(gè)例子中輸出的111就是改變this之后的值,如果沒有做任何修改的話當(dāng)然是window关贵,用箭頭函數(shù)寫的話是這樣的:

let arr = ['aaa','bbb','ccc'];
arr.forEach((val,index,arr)=>{
    console.log(this,val,index,arr);
    // window "aaa" 0 ["aaa", "bbb", "ccc"]
    // window "bbb" 1 ["aaa", "bbb", "ccc"]
    // window "ccc" 2 ["aaa", "bbb", "ccc"]
},111);

你會(huì)發(fā)現(xiàn)this并沒有改變遇骑,因?yàn)樵谶@個(gè)箭頭函數(shù)的例子里this本身指向的就是window

2. map()

這個(gè)方法還是挺有用的,一般在和后臺(tái)數(shù)據(jù)交互的時(shí)候揖曾,做映射落萎,所謂映射就是一一對(duì)應(yīng)的關(guān)系,與forEach不一樣的地方就是有返回值炭剪,如果不加return就和forEach完全一樣练链,因?yàn)閒orEach沒有返回值;如果加了return奴拦,就會(huì)返回一個(gè)新數(shù)組兑宇,下面看兩個(gè)例子:
(1) 沒給return放入值的時(shí)候,返回的是undefined:

let arr = ['aaa','bbb','ccc'];
let newArr = arr.map((val,index,arr) => {
    console.log(val,index,arr);
    // "aaa" 0 ["aaa", "bbb", "ccc"]
    // "bbb" 1 ["bbb", "bbb", "ccc"]
    // "ccc" 2 ["ccc", "bbb", "ccc"]
    // [undefined, undefined, undefined]
});
console.log(newArr);

(2) return一個(gè)值的時(shí)候:

let arr = ['aaa','bbb','ccc'];
let newArr = arr.map((val,index,arr) => {
    console.log(val,index,arr);
    return 1;
    // "aaa" 0 ["aaa", "bbb", "ccc"]
    // "bbb" 1 ["bbb", "bbb", "ccc"]
    // "ccc" 2 ["ccc", "bbb", "ccc"]
    // [1, 1, 1]
});
console.log(newArr);

小白:說了半天這個(gè)東西到底有什么用呢粱坤?
格格:別著急哈,下面就來介紹一下:

map方法一般會(huì)用在整理數(shù)據(jù)結(jié)構(gòu)上瓷产,在數(shù)據(jù)交互的時(shí)候站玄,根據(jù)需求我們需要改一些前端部分需要的數(shù)據(jù)形式:

let aNews = [
    {aaa: '為排行暴走萬步', bbb: 404512},
    {aaa: '李榮浩慶生楊丞琳', bbb: 444512},
];
let newArr = aNews.map((val,index,arr) => {
    let json = {};
    json.title = `標(biāo)題:${val.aaa}`;
    json.read = `閱覽量:${val.bbb}`;
    return json;
});
console.log(newArr);

執(zhí)行效果:

3. filter()

用來過濾一些不合格的元素,如果回調(diào)函數(shù)返回的是true濒旦,那么自然會(huì)被留下來株旷,為false的就會(huì)被過濾掉,看一個(gè)例子就懂了哈:

let aNews = [
    {title: '為排行暴走萬步', read: 404512, hot: false},
    {title: '李榮浩慶生楊丞琳', read: 444512, hot: true},
];
let newArr = aNews.filter((val,index,arr) => {
    return val.hot==true;
});
console.log(newArr);

執(zhí)行結(jié)果:

4. some()

這個(gè)方法類似于查找一個(gè)字符串存在不存在尔邓,舉個(gè)例子說明:

let aNews = ['aaa','bbb','ccc'];
let newArr = aNews.some((item,index,arr) => {
    return item=='aaa';
});
console.log(newArr);  // true

5. every()

和some一樣晾剖,只不過是查找數(shù)組中的每一項(xiàng),所有元素都要符合條件梯嗽,才返回true:

let arr = [1,3,5,7,9];
let newArr = arr.every((val,index,arr)=>{
    return val%2==1;  // 判斷是不是奇數(shù)
});
console.log(newArr);  // true

6. reduce()

從左往右運(yùn)算→

7. reduceRight()

從右往左運(yùn)算←
上面這兩種方法可以用來求數(shù)組的和齿尽、階乘、冪運(yùn)算灯节;接受4個(gè)函數(shù)參數(shù)循头,舉個(gè)例子:

let arr = [2,3,3];
let newArr = arr.reduce((prev,curr,index,arr)=>{
    return prev-curr;   // 運(yùn)算的方式
});
console.log(newArr);  // -4
let arr = [2,3,3];
let newArr = arr.reduceRight((prev,curr,index,arr)=>{
    return prev-curr;   // 運(yùn)算的方式
});
console.log(newArr);  // -2

相信大家已經(jīng)看出其中的端倪了。

下面說一個(gè)ES2017新增的冪運(yùn)算符(**)炎疆,它的用法及其優(yōu)點(diǎn)呢卡骂,還是要通過例子來看:

let arr = [2,3,2];
let newArr = arr.reduce((prev,curr,index,arr)=>{
    return Math.pow(prev,curr);
        //return prev**curr;
});
console.log(newArr);    // 64

例子中的兩種寫法都可以,結(jié)果是一樣的形入,ES5的語法到此為止全跨。

下面來說一下ES6新增的一些東西:

8. for...of...

let arr = ['aaa','bbb','ccc'];
for (let val of arr) {
    console.log(val);   // 輸出每一項(xiàng)
    // aaa
    // bbb
    // ccc
}

for (let index of arr.keys()) {
    console.log(index); // 輸出每一項(xiàng)的索引
    // 0
    // 1
    // 2
}

for (let item of arr.entries()) {
    console.log(item);  // 輸出三個(gè)數(shù)組
    // [0, "aaa"]
    // [1, "bbb"]
    // [2, "ccc"]
    console.log(item[0]);   // 0 1 2
    console.log(item[1]);   // aaa bbb ccc
}

for (let [key,val] of arr.entries()) {
    console.log(key,val);   
    // 0 "aaa"
    // 1 "bbb"
    // 2 "ccc"
}

for...of循環(huán)你可以大膽放心的用,絕對(duì)沒有任何隱患亿遂,也不用擔(dān)心把它玩壞(? ??_??)? (*?????)?

關(guān)于數(shù)組的循環(huán)我們都已經(jīng)了然于心浓若,預(yù)知數(shù)組新增方法如何渺杉,請(qǐng)聽下回分解 (^?^)/~~~

本文的所有內(nèi)容均是一字一句敲上去的,希望大家閱讀完本文可以有所收獲七嫌,因?yàn)槟芰τ邢奚侔欤莆盏闹R(shí)也是不夠全面,歡迎大家提出來一起分享诵原!謝謝O(∩_∩)O~

歡迎訪問我的GitHub英妓,喜歡的可以star,項(xiàng)目隨意fork绍赛,支持轉(zhuǎn)載但要下標(biāo)注蔓纠;
歡迎光臨個(gè)人主頁

等一下( ?? .? ?? ),我還有最后一句話:
這里雖然沒有都市的繁華吗蚌,
也沒有山林的鳥語花香腿倚,
只有一片如水的寧?kù)o,
古人云:
既來之則安之蚯妇,
既然來到了這里敷燎,
就可以靜心休憩你的靈魂,
調(diào)養(yǎng)你疲憊的心箩言,
再見...
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末硬贯,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子陨收,更是在濱河造成了極大的恐慌饭豹,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡奋隶,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門翘悉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人宏悦,你說我怎么就攤上這事镐确。” “怎么了饼煞?”我有些...
    開封第一講書人閱讀 156,723評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵源葫,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我砖瞧,道長(zhǎng)息堂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮荣堰,結(jié)果婚禮上床未,老公的妹妹穿的比我還像新娘。我一直安慰自己振坚,他們只是感情好薇搁,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評(píng)論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著渡八,像睡著了一般啃洋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上屎鳍,一...
    開封第一講書人閱讀 49,760評(píng)論 1 289
  • 那天宏娄,我揣著相機(jī)與錄音,去河邊找鬼逮壁。 笑死孵坚,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的窥淆。 我是一名探鬼主播卖宠,決...
    沈念sama閱讀 38,904評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼忧饭!你這毒婦竟也來了逗堵?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤眷昆,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后汁咏,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體亚斋,經(jīng)...
    沈念sama閱讀 44,118評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評(píng)論 2 325
  • 正文 我和宋清朗相戀三年攘滩,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了帅刊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,599評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡漂问,死狀恐怖赖瞒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蚤假,我是刑警寧澤栏饮,帶...
    沈念sama閱讀 34,264評(píng)論 4 328
  • 正文 年R本政府宣布,位于F島的核電站磷仰,受9級(jí)特大地震影響袍嬉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評(píng)論 3 312
  • 文/蒙蒙 一伺通、第九天 我趴在偏房一處隱蔽的房頂上張望箍土。 院中可真熱鬧,春花似錦罐监、人聲如沸吴藻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽沟堡。三九已至,卻和暖如春吆你,著一層夾襖步出監(jiān)牢的瞬間弦叶,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工妇多, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留伤哺,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,286評(píng)論 2 360
  • 正文 我出身青樓者祖,卻偏偏與公主長(zhǎng)得像立莉,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子七问,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評(píng)論 2 348

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