?? 個(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è)方法還是挺有用的，一般在和后臺數(shù)據(jù)交互的時(shí)候，做映射，所謂映射就是一一對應(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)你可以大膽放心的用，絕對沒有任何隱患，也不用擔(dān)心把它玩壞(? ??_??)? (*?????)?

關(guān)于數(shù)組的循環(huán)我們都已經(jīng)了然于心，預(yù)知數(shù)組新增方法如何，請聽下回分解 （＾?＾）/~~~

本文的所有內(nèi)容均是一字一句敲上去的，希望大家閱讀完本文可以有所收獲，因?yàn)槟芰τ邢?，掌握的知識也是不夠全面，歡迎大家提出來一起分享！謝謝O(∩_∩)O~

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

等一下( ?? .? ?? )，我還有最后一句話：

這里雖然沒有都市的繁華，

也沒有山林的鳥語花香，

只有一片如水的寧靜，

古人云：

既來之則安之，

既然來到了這里，

就可以靜心休憩你的靈魂，

調(diào)養(yǎng)你疲憊的心，

再見...