摘要：數(shù)組作為一種重要的數(shù)據(jù)類型，除了基礎(chǔ)的幾個(gè)方法外，還有很多實(shí)用的方法也是我們的必備技能。原數(shù)組不會(huì)改變。詳細(xì)語法請(qǐng)參考讓每個(gè)人都干點(diǎn)啥方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)，該方法沒有返回值。

數(shù)組作為一種重要的數(shù)據(jù)類型，除了基礎(chǔ)的 pop、push、shift、unshift 幾個(gè)方法外，還有很多實(shí)用的方法也是我們的必備技能。

假設(shè)我們有一隊(duì)人，如下圖：

我們要對(duì)其進(jìn)行一些排序或篩選的操作（比喻按高矮排序，篩選女性等），我們都可以通過數(shù)組來進(jìn)行操作。

注：這里更側(cè)重講解如何使用，至于詳細(xì)方法請(qǐng)參考：數(shù)組 | MDN

首先我們用數(shù)組定義該數(shù)據(jù)（為了簡單起見，我們數(shù)據(jù)就不搞那么多）：

var aPerson = ["person1", "person2", "person3", "person4", "person5", "person6"]

slice

現(xiàn)在假設(shè)我們要抽取三個(gè)人，我們可以使用slice()方法來選取三個(gè)人，如下：

var aP3 = aPerson.slice(1, 4);
console.log(aPerson); // ["person1", "person2", "person3", "person4", "person5", "person6"]
console.log(aP3); // ["person2", "person3", "person4"]

該方法返回一個(gè)從開始到結(jié)束（不包括結(jié)束）選擇的數(shù)組的一部分淺拷貝到一個(gè)新數(shù)組對(duì)象。原數(shù)組不會(huì)改變。

詳細(xì)語法請(qǐng)參考：slice

splice

同樣我們還可以使用splice()方法來選取，如下：

var aPerson = ["person1", "person2", "person3", "person4", "person5", "person6"]
var aP3 = aPerson.splice(1, 3);
console.log(aPerson); // ["person1", "person5", "person6"]
console.log(aP3); // ["person2", "person3", "person4"]

該方法通過刪除現(xiàn)有元素或添加新元素來更改數(shù)組的內(nèi)容。原數(shù)組會(huì)改變。

對(duì)于 slice 來說，splice 的功能會(huì)更強(qiáng)大點(diǎn)，其區(qū)別主要在于：

slice 不改變?cè)瓟?shù)組，而 splice 則會(huì)改變

slice 的第二個(gè)參數(shù)為截至的索引值，而 splice 則表示要截取的個(gè)數(shù)

splice 還能用于增加元素，slice 則不可以

詳細(xì)語法請(qǐng)參考：splice

concat

除了從隊(duì)伍里抽出一些人出來，我們還可以把另外一個(gè)隊(duì)伍和這個(gè)隊(duì)伍合并成一個(gè)新隊(duì)伍，如下：

var aPerson1 = ["person1", "person2", "person3", "person4", "person5", "person6"]
var aPerson2 = ["person7", "person8", "person9"];

var aPerson3 = aPerson1.concat(aPerson2);
console.log(aPerson3); // ["person1", "person2", "person3", "person4", "person5", "person6", "person7", "person8", "person9"]

concat() 方法用于合并兩個(gè)或多個(gè)數(shù)組。此方法不會(huì)更改現(xiàn)有數(shù)組，而是返回一個(gè)新數(shù)組。

詳細(xì)語法請(qǐng)參考：concat

現(xiàn)在我們以高矮的形式定義一組數(shù)據(jù)，如下：

var aHeight = ["170", "165", "178", "183", "168", "175", "173"];

reverse

我們可以直接使用reverse()方法來實(shí)現(xiàn)倒序，如下：

aHeight.reverse();
console.log(aHeight); // ["173", "175", "168", "183", "178", "165", "170"]

該方法非常簡單，沒有任何參數(shù)，就是把數(shù)組的出現(xiàn)順序調(diào)換下，第一個(gè)元素會(huì)成為最后一個(gè)，最后一個(gè)會(huì)成為第一個(gè)。一般也很少用到。

sort

比起 reverse() 來說，sort() 方法使用的地方就多了。我們先來個(gè)從矮到高的排序，如下：

aHeight.sort();
console.log(aHeight); // ["165", "168", "170", "173", "175", "178", "183"]

sort() 方法默認(rèn)的排序是升序，如上代碼可見。但是我們也可以傳入一個(gè)函數(shù)，指定其排序方式，如現(xiàn)在讓其以降序方式排列：

aHeight.sort(function(a, b){
    return b - a;
});
console.log(aHeight); // ["183", "178", "175", "173", "170", "168", "165"]

詳細(xì)語法請(qǐng)參考：sort

隨機(jī)排序

除了正常的升序降序之外，其實(shí)我們還經(jīng)常使用到隨機(jī)排序，如我們的搶紅包，棋牌游戲中的洗牌都是隨機(jī)排序的應(yīng)用。

在使用隨機(jī)排序的時(shí)候，我們得使用到一個(gè)隨機(jī)函數(shù) Math.random()。
該函數(shù)返回一個(gè)浮點(diǎn)數(shù), 其數(shù)字在范圍[0，1)。

這樣我們就可以使用該隨機(jī)生成浮點(diǎn)數(shù)與0.5大小進(jìn)行比較，那樣結(jié)果可能大于或小于0，最后就得到了我們的隨機(jī)排序。

// 第一次運(yùn)行
aHeight.sort(function(){
    return 0.5 - Math.random();
});
console.log(aHeight); // ["183", "168", "175", "173", "170", "165", "178"]

// 第二次運(yùn)行
aHeight.sort(function(){
    return 0.5 - Math.random();
});
console.log(aHeight); // ["170", "183", "175", "168", "173", "165", "178"]

因?yàn)槭请S機(jī)的，所以每次運(yùn)行都會(huì)不一樣，我們可以多運(yùn)行幾次試試。

現(xiàn)在我們以膚色和年齡的的形式定義兩組數(shù)據(jù)，如下（yellow 表示黃種人，white 表示白人，black 表示黑人）：

var aColor = ["yellow", "black", "white", "white", "yellow", "yellow"];
var aAge = [19, 30, 25, 37, 18, 35];

every

every() 方法用于測試數(shù)組的所有數(shù)據(jù)是否都通過了指定函數(shù)的測試，如果通過返回 true，否則 false。

比喻判斷是否所有人的年齡都大于20歲，如下：

var ageTest = aAge.every(function(item, index){
    return item > 20;
})

console.log(ageTest); // false

every 需要數(shù)組中的每個(gè)數(shù)據(jù)都滿足該條件則返回 true，否則就是 false。

詳細(xì)語法請(qǐng)參考：every

some

對(duì)應(yīng) every() 方法，還有一個(gè) some() 方法，表示數(shù)組中只要有任何一個(gè)數(shù)據(jù)滿足條件則返回 ture，如果一個(gè)數(shù)據(jù)都不滿足則返回 false。

比喻判斷是否有人的年齡都大于32歲，如下：

var ageTest2 = aAge.some(function(item, index){
    return item > 32;
})

console.log(ageTest2); // true

詳細(xì)語法請(qǐng)參考：some

includes

includes() 方法用來判斷當(dāng)前數(shù)組是否包含某指定的值，如果是，則返回 true，否則返回 false。

比喻判斷是否有35歲的人，如下：

var ageTest3 = aAge.includes(35);
var ageTest4 = aAge.includes(28);

console.log(ageTest3); // true
console.log(ageTest4); // false

filter

比喻我要選取所有黃皮膚的人，如下：

var aYellow = aColor.filter(function(item, index) {
    return item === "yellow";
})

console.log(aYellow); // ["yellow", "yellow", "yellow"]

該方法返回所有滿足條件數(shù)據(jù)組成的數(shù)組。

詳細(xì)語法請(qǐng)參考：filter

讓每個(gè)人都干點(diǎn)啥

forEach

forEach() 方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)，該方法沒有返回值。

比喻過節(jié)的時(shí)候給每個(gè)人去老板那邊領(lǐng)個(gè)紅包，如下：

var aPerson = ["person1", "person2", "person3", "person4", "person5", "person6"]

aPerson.forEach(function(item, index) {
    console.log(item + "領(lǐng)取了 200 元紅包")
})

詳細(xì)語法請(qǐng)參考：forEach

map

map() 方法創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素調(diào)用一個(gè)提供的函數(shù)。

比喻每個(gè)人的工資都增加 5000元，如下：

// 先構(gòu)造一份工資數(shù)據(jù)
var aSalary = [8000, 7000, 1500, 9000, 22000];

var aNewSalary = aSalary.map(function(item, index) {
    return item + 5000;
})

console.log(aNewSalary); // [13000, 12000, 6500, 14000, 27000]

詳細(xì)語法請(qǐng)參考：map

除了上面說的那些方法之外，還有一些常用方法，如 indexOf、join 等等，這里就不再一一說明了，具體可參考：數(shù)組 | MDN

總之，數(shù)組的方法一定要了如指掌，如果你實(shí)在記不住，那也必須知道有這么個(gè)東西，以后知道怎么查閱，因?yàn)槠綍r(shí)做業(yè)務(wù)的時(shí)候處理數(shù)據(jù)就需要這些各種方法。