摘要：我們?cè)跀?shù)組系列一之棧與隊(duì)列中介紹了一些數(shù)組的用法。該方法接受兩個(gè)參數(shù)，一個(gè)是元素每一項(xiàng)執(zhí)行的回調(diào)函數(shù)，一個(gè)是可選參數(shù)，回調(diào)函數(shù)運(yùn)行時(shí)的值。今天我們就說這么多，希望你有所收獲，接下來還請(qǐng)繼續(xù)關(guān)注，我們繼續(xù)來說數(shù)組的其他一系列的方法。

我們?cè)凇禷vascript數(shù)組系列一之棧與隊(duì)列》中介紹了一些數(shù)組的用法。比如：數(shù)組如何表現(xiàn)的和「棧」一樣，用什么方法表現(xiàn)的和「隊(duì)列」一樣等等一些方法，因?yàn)?Javascript 中的數(shù)組方法眾多，所以我們沒有在一篇文章中介紹過多的東西，接下來我們就來了解數(shù)組的其他功能吧

正式開始！

數(shù)組的迭代方法是我們?cè)陂_發(fā)項(xiàng)目中使用頻率非常高、非常重要、非常高效，不僅如此這些方法還能使我們的代碼會(huì)非常簡潔，可以這么說，如果你在開發(fā)中不經(jīng)常使用這些方法的話，簡直就是太可怕了。

比如我們?nèi)绾闻康奶砑?DOM 節(jié)點(diǎn)

let containerUl = document.getElementById("container");
let li;
let peoples = [{name: "Liu", age: 14}, {name: "Li", age: 13}, {name: "Cao", age: 11}];

//for 循環(huán)
for (let i = 0; i < peoples.length; i++) {
    li = document.createElement("li");
    li.innerHTML = peoples[i].name + ":" + peoples[i].age;
    containerUl.appendChild(li);
};

//數(shù)組的迭代方法，更加簡潔
peoples.forEach((people) => {
    li = document.createElement("li");
    li.innerHTML = people.name + ":" + people.age;
    containerUl.appendChild(li);
})

上面只是舉了一個(gè)簡單的例子，其實(shí)我們?cè)谌粘５拈_發(fā)過程中遠(yuǎn)不止此，而且要比這個(gè)復(fù)雜的很多很多，所以如何高效的進(jìn)行工作的開發(fā)是非常有必須要的。下面就從我們比較常用的一個(gè)一個(gè)的來說起。

該方法對(duì)數(shù)組的每一個(gè)元素執(zhí)行給定的函數(shù)，返回 undefined（或者說無返回值）。

該方法接受兩個(gè)參數(shù)，一個(gè)是元素每一項(xiàng)執(zhí)行的回調(diào)函數(shù)，一個(gè)是可選參數(shù)，回調(diào)函數(shù)運(yùn)行時(shí) this 的值。

傳入的回調(diào)函數(shù)會(huì)接受三個(gè)參數(shù)分別是：數(shù)組中的元素（item），元素的索引（index，可選），數(shù)組本身（array，可選）。

//語法
array.forEach(callback[, this])
array.forEach(callback(item, index, array){
    //函數(shù)體，執(zhí)行的操作
});

//看個(gè)例子，本質(zhì)上與 for 循環(huán)一樣
let items = ["a", "b", "c"];
items.forEach(function (item) {
    console.log(item);
});

for (let i = 0; i < items.length; i++) {
    console.log(items[i])
}

最后我們來看看 forEach() 方法的兼容性，直接上圖。

該方法對(duì)數(shù)組的每一個(gè)元素執(zhí)行給定的函數(shù)，返回一個(gè)新的數(shù)組，新數(shù)組的結(jié)果是原數(shù)組中元素執(zhí)行方法后的結(jié)果。

該方法接受兩個(gè)參數(shù)，一個(gè)是元素每一項(xiàng)執(zhí)行的回調(diào)函數(shù)，一個(gè)是可選參數(shù)，回調(diào)函數(shù)運(yùn)行時(shí) this 的值。

傳入的回調(diào)函數(shù)會(huì)接受三個(gè)參數(shù)分別是：數(shù)組中的元素（item），元素的索引（index，可選），數(shù)組本身（array，可選）。

//語法
var newArrs = array.map(callback[, this])
var newArrs = array.map(callback(item, index, array){
    //return 執(zhí)行后的結(jié)果
});

//例子
let numbers = [1, 2, 3];
let newNumbers = numbers.map(x => x * x);
console.log(newNumbers); //[1, 4, 9]

在我們?nèi)粘ｉ_發(fā)工作中，會(huì)遇到非常多的數(shù)據(jù)格式化的過程，利用這些方法可以大大方便我們的處理。

例如類數(shù)組轉(zhuǎn)換為數(shù)組的過程

    

    

    



});

例如格式化需要的數(shù)據(jù)

let peoples = ["Liu", "Cao", "Pan"];
let peoplesInfo = peoples.map(people => {
    return {
        name: people,
        age: Math.floor(Math.random()*20)
    }
});
console.log(peoplesInfo);
// [{name: Liu, age: XX}, 
//  {name: Cao, age: XX}, 
//  {name: Pan, age: XX}]

當(dāng)然我們?cè)趯?shí)際工作中的數(shù)據(jù)復(fù)雜度遠(yuǎn)不止此，但是我們可以明顯感覺到這些方法處理數(shù)據(jù)的優(yōu)勢所在。

最后我們來看看 map() 方法的兼容性，直接上圖。

該方法也是對(duì)數(shù)組的每一個(gè)元素執(zhí)行給定的函數(shù)，返回一個(gè)新的數(shù)組，新數(shù)組是由每項(xiàng)返回 true 的項(xiàng)組成。簡單來說就是篩選出來我們想要的。

該方法接受兩個(gè)參數(shù)，一個(gè)是元素每一項(xiàng)執(zhí)行的回調(diào)函數(shù)，一個(gè)是可選參數(shù)，回調(diào)函數(shù)運(yùn)行時(shí) this 的值。

傳入的回調(diào)函數(shù)會(huì)接受三個(gè)參數(shù)分別是：數(shù)組中的元素（item），元素的索引（index，可選），數(shù)組本身（array，可選）。

//語法
var newArrs = array.filter(callback[, this])
var newArrs = array.filter(callback(item, index, array){
    //return 滿足條件的項(xiàng)
});

//例子
let numbers = [1, 2, 3, 4, 5];
let newNumbers = numbers.filter(x => x > 2);
console.log(newNumbers); //[3, 4, 5]

「filter」方法在實(shí)際工作中也同樣有著很多的作用，例如：我們找出一群人中哪些是小朋友。

var peoples = [{name: "liu", age: 9}, 
            {name: "jiang", age: 18}, 
            {name: "cao", age: 20}, 
            {name: "pan", age: 3}];
var childrens = peoples.filter(people => people.age < 10);
console.log(childrens);

最后我們來看看 filter() 方法的兼容性，直接上圖。

該方法是對(duì)數(shù)組的每一個(gè)元素執(zhí)行給定的函數(shù)，
如果數(shù)組中的每個(gè)元素都滿足給定的條件則返回 true，否則返回 false。

該方法接受兩個(gè)參數(shù)，一個(gè)是元素每一項(xiàng)執(zhí)行的回調(diào)函數(shù)，一個(gè)是可選參數(shù)，回調(diào)函數(shù)運(yùn)行時(shí) this 的值。

傳入的回調(diào)函數(shù)會(huì)接受三個(gè)參數(shù)分別是：數(shù)組中的元素（item），元素的索引（index，可選），數(shù)組本身（array，可選）。

//語法
var newArrs = array.every(callback[, this])
var newArrs = array.every(callback(item, index, array){
    //執(zhí)行方法
});

//例子
var number = [2, 3, 4, 5, 6];
var result1 = number.every(item => item > 4);
console.log(result1); //false
var result2 = number.every(item => item > 1);
console.log(result2); //true

我們?cè)趤砜纯?every() 方法的兼容性，直接上圖。

該方法是對(duì)數(shù)組的每一個(gè)元素執(zhí)行給定的函數(shù)，
如果數(shù)組中的有一個(gè)元素滿足條件則返回 true，如果全部不滿足條件則返回 false。

該方法接受兩個(gè)參數(shù)，一個(gè)是元素每一項(xiàng)執(zhí)行的回調(diào)函數(shù)，一個(gè)是可選參數(shù)，回調(diào)函數(shù)運(yùn)行時(shí) this 的值。

傳入的回調(diào)函數(shù)會(huì)接受三個(gè)參數(shù)分別是：數(shù)組中的元素（item），元素的索引（index，可選），數(shù)組本身（array，可選）。

//語法
var newArrs = array.some(callback[, this])
var newArrs = array.some(callback(item, index, array){
    //執(zhí)行方法
});

//例子
var number = [2, 3, 4, 5, 6];
var result1 = number.some(item => item < 1);
console.log(result1); //false
var result2 = number.some(item => item > 5);
console.log(result2); //true

我們?cè)趤砜纯?some() 方法的兼容性，直接上圖。

可以看出 every 方法是全部返回 true 時(shí)，整個(gè)函數(shù)才返回 true；some 方法則是全部返回 false 時(shí)，整個(gè)函數(shù)才返回 false。

今天我們就說這么多，希望你有所收獲，接下來還請(qǐng)繼續(xù)關(guān)注，我們繼續(xù)來說數(shù)組的其他一系列的方法。

關(guān)注微信公眾號(hào)：六小登登。領(lǐng)取全套學(xué)習(xí)資源