深刻了解JS數組的經常使用方法

數組做爲一種重要的數據類型，除了基礎的 pop、push、shift、unshift 幾個方法外，還有不少實用的方法也是咱們的必備技能。

假設咱們有一隊人，以下圖：

咱們要對其進行一些排序或篩選的操做（比喻按高矮排序，篩選女性等），咱們均可以經過數組來進行操做。

注：這裏更側重講解如何使用，至於詳細方法請參考：數組 | MDN

抽出一些人

首先咱們用數組定義該數據（爲了簡單起見，咱們數據就不搞那麼多）：

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

slice

如今假設咱們要抽取三我的，咱們可使用slice()方法來選取三我的，以下：

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

該方法返回一個從開始到結束（不包括結束）選擇的數組的一部分淺拷貝到一個新數組對象。原數組不會改變。

詳細語法請參考：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"]

該方法經過刪除現有元素或添加新元素來更改數組的內容。原數組會改變。

對於 slice 來講，splice 的功能會更強大點，其區別主要在於：

• slice 不改變原數組，而 splice 則會改變
• slice 的第二個參數爲截至的索引值，而 splice 則表示要截取的個數
• splice 還能用於增長元素，slice 則不能夠

詳細語法請參考：splice

concat

除了從隊伍裏抽出一些人出來，咱們還能夠把另一個隊伍和這個隊伍合併成一個新隊伍，以下：

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() 方法用於合併兩個或多個數組。此方法不會更改現有數組，而是返回一個新數組。

詳細語法請參考：concat

高矮排序

如今咱們以高矮的形式定義一組數據，以下：

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

reverse

咱們能夠直接使用reverse()方法來實現倒序，以下：

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

該方法很是簡單，沒有任何參數，就是把數組的出現順序調換下，第一個元素會成爲最後一個，最後一個會成爲第一個。通常也不多用到。

sort

比起 reverse() 來講，sort() 方法使用的地方就多了。咱們先來個從矮到高的排序，以下：

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

sort() 方法默認的排序是升序，如上代碼可見。可是咱們也能夠傳入一個函數，指定其排序方式，如如今讓其以降序方式排列：

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

詳細語法請參考：sort

隨機排序

除了正常的升序降序以外，其實咱們還常用到隨機排序，如咱們的搶紅包，棋牌遊戲中的洗牌都是隨機排序的應用。

在使用隨機排序的時候，咱們得使用到一個隨機函數 Math.random()。
該函數返回一個浮點數, 其數字在範圍[0，1)。

這樣咱們就可使用該隨機生成浮點數與0.5大小進行比較，那樣結果可能大於或小於0，最後就獲得了咱們的隨機排序。

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

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

由於是隨機的，因此每次運行都會不同，咱們能夠多運行幾回試試。

條件篩選測試

如今咱們以膚色和年齡的的形式定義兩組數據，以下（yellow 表示黃種人，white 表示白人，black 表示黑人）：

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

測試是否符合條件

every

every() 方法用於測試數組的全部數據是否都經過了指定函數的測試，若是經過返回 true，不然 false。

比喻判斷是否全部人的年齡都大於20歲，以下：

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

console.log(ageTest); // false

every 須要數組中的每一個數據都知足該條件則返回 true，不然就是 false。

詳細語法請參考：every

some

對應 every() 方法，還有一個 some() 方法，表示數組中只要有任何一個數據知足條件則返回 ture，若是一個數據都不知足則返回 false。

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

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

console.log(ageTest2); // true

詳細語法請參考：some

includes

includes() 方法用來判斷當前數組是否包含某指定的值，若是是，則返回 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"]

該方法返回全部知足條件數據組成的數組。

詳細語法請參考：filter

讓每一個人都乾點啥

forEach

forEach() 方法對數組的每一個元素執行一次提供的函數，該方法沒有返回值。

比喻過節的時候給每一個人去老闆那邊領個紅包，以下：

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

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

詳細語法請參考：forEach

map

map() 方法建立一個新數組，其結果是該數組中的每一個元素調用一個提供的函數。

比喻每一個人的工資都增長 5000元，以下：

// 先構造一份工資數據
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]

詳細語法請參考：map

其餘

除了上面說的那些方法以外，還有一些經常使用方法，如 indexOf、join 等等，這裏就再也不一一說明了，具體可參考：數組 | MDN

總之，數組的方法必定要了如指掌，若是你實在記不住，那也必須知道有這麼個東西，之後知道怎麼查閱，由於平時作業務的時候處理數據就須要這些各類方法。