在ECMAScript中最常用的型別之一就是Array型別，Array型別的方法也有很多，所以在這篇文章中，梳理一下Array型別的方法。

新建陣列

新建陣列的方法有三種：

/*方法一*/
var a = new Array(1,2,3);
/*方法二*/
var b = [1,2,3];
/*方法三（ES6新增）*/
var c = Array.of(1,2,3);

Array.of()是ES6中新增的將一組值轉換為陣列的方法，該方法的出現時為了彌補建構函式Array()因為引數不同導致的不同行為。

Array()         //[]
Array(3)        //[ , , ]
Array
 
(1,2,3)    //[1,2,3]

從上面可以看出，只有在引數個數不少於2時候，才會返回新的陣列。

陣列的檢測

對於一個網頁或者一個全域性作用域而言，使用instanceof操作符檢測，通過返回的boolean值可以得出是否為陣列，但是這樣檢測的問題在如果網頁中包含兩個以上不同的全域性作用域，就會從在兩個以上不同版本的Array建構函式，如果從一個框架向另一個框架傳入一個數組，那麼傳入的陣列與第二個框架中原聲建立的陣列分別有不同的建構函式。
在ES5中引入的Array.isArray()解決了這個問題，但如果在不支援ES5的瀏覽器中檢測陣列，則需要些相容性方法，所以檢測陣列的方法如下：

function checkArray(arr) {
    if(typeof Array.isArray){
        return Array.isArray(arr);
    }else{
        return Object.prototype.toString.call(arr)==='[object Array]';
    }
}

陣列中的方法：

更改原陣列

新增項

push()
接收任意數量的引數，逐個將其新增至陣列末尾，返回修改後的陣列的長度

unshift()
在陣列的前端新增任意個項並返回新陣列的長度

移除項

pop()
從陣列末尾移除最後

shift()
移除陣列中的第一項並返回該項

排序

reverse()
反轉陣列項的順序

var values = [1,2,3,4,5];
values.reverse();
console.log(values); // =>5,4,3,2,1

sort()
按照升序排列陣列項，但是它在實現排序時會呼叫每個陣列項的toString()放法，去比較字串，所以會出現如下情況

var values = [0,1,5,10,15];
values.sort();
console.log(values); // => 0,1,10,15,5

為了在使用sort()方法時返回正確的排序，我們需要給sort()傳入一個比較函式，該比較函式傳入兩個引數，如果第一個引數應該位於第二個引數之前則返回一個負數，如果兩個引數相等返回0，如果第一個引數應該位於第二個引數之後則返回一個正數。

/*升序
降序則更改返回值即可*/
function compare(value1,value2){
    if(value1 < value2){
        return -1;
    }else if(value1 > value2){
        return 1;
    }else {
        return 0;
    }
}
var values = [0,1,5,10,15];
values.sort(compare);
console.log(values);

對於數值型別或者其valueOf()方法會返回數值型別的物件型別，可以使用一個簡單的比較函式

function compare(value1,value2){
    return value2 - value1;
}

copyWithin()

引數：

• target(必需)：從該位置開始替換資料

• start (可選)：從該位置開始讀取資料，預設為0。如果為負值，表示倒數

• end (可選)：到該位置前停止讀取資料，預設等於陣列長度。如果為負值表示倒數

在當前陣列內部將指定位置的成員複製到其他位置，會覆蓋原來的成員。修改原來的陣列形成新的陣列

var a = [1,2,3];
var b = a.copyWithin(0);    // =>[1,2,3]
var c = a.copyWithin(0,1);  // =>[2,3,3]
var d = a.copyWithin(0,1,2);// =>[2,2,3]

上面例子可以看出，雖然copyWithin的後兩個引數是可選的，但是需要寫第二個引數，否則返回的只是原陣列本身。

不更改原素組，生成新陣列

擷取

slice()
接受一個或兩個引數，要返回的起始位置到結束位置但不包括結束位置項，如果只寫一個引數則擷取陣列到最後。可以接收負數作為引數

splice()
做多可以接收三個引數，分別為起始位置，要刪除的專案數，要插入的任意數量的項，同個這三個引數是否傳入可以實現刪除，插入，替換

var colors =['red','green','blue'];
var removed =colors.splice(0,1);    //刪除第一項
console.log(colors);                //green,blue
console.log(removed);               //redm,返回的陣列中只包含一項

removed = colors.splice(1,0,'yellow','orange'); //從位置1開始插入兩項
console.log(colors);                //green,yellow,orange,blue
console.log(removed);               //返回的是一個空陣列

removed = color.splice(1,1,'red','purple');  //插入兩項，刪除一項
console.log(colors);                //green,yellow,purple,orange,blue
console.log(removed);               //返回yellow

連線

concat()
這個方法會先建立當前陣列的一個副本，然後將接收到的引數新增到這個副本的末尾並返回副本。

var a = [1,2,3];
var b = a.concat('a','b',['c','d','e']);
console.log(a); // =>1,2,3
console.log(b);

尋找

indexOf()、lastIndexOf()與includes()

indexOf()與lastIndexOf()用於查詢陣列中是否有該方法，如果有則返回該元素的位置，否則返回-1。
但是這個方法有兩個缺點：

1. 不夠語義化

2. 它內部使用嚴格等於運算子===，導致了對NaN的誤判。所以ES7新增includes()去克服這些缺點。

ES7新增
ES7中新增includes()方法，用於查詢陣列總是否包含某個元素，返回布林值，接受兩個引數 要查詢的元素 和 查詢的起始位置。

find()和findIndex()

引數：一個回掉函式
回撥的引數：當前值、當前位置、原陣列

find()
方法用於找出第一個符合條件的陣列成員。

findIndex()
方法返回第一個符合條件的陣列成員的位置，如果所有成員都不符合，則返回-1。

var a = [1,4,-5,10];
a.find((n)=> n<0);  // -5

var b = [1,5,10,15];
b.findIndex(function(value,index,arr){
    return value > 9;
});//=>2

迭代方法

ES5為陣列定義了五個迭代方法
每個方法都接收兩個引數：要在每一項上執行的函式和（可選的）執行該函式的作用域物件----影響this的值。
傳入這些方法中的函式會接收三個引數：陣列項的值、該項在陣列中的位置和陣列物件本身。

• every():對陣列中的每一項執行給定的函式，如果該函式對每一項都返回true,則返回true

• some():對陣列中每一項執行給定的函式，如果該函式對任一項返回true，則返回true

• filter():對陣列中每一項執行給定的函式，返回該函式會返回true的項組成的陣列

• forEach():對陣列中的每一項執行給定的函式。沒有返回值

• map():對陣列中的每一項執行給定的函式，返回每次呼叫的結果組成的陣列

歸併方法

reduce()

該方法可以傳遞兩個引數：化簡函式，傳遞給函式的初始值（可選）。
化簡函式的引數：上一次呼叫回撥返回的值，或者是提供的初始值（initialValue），當前被處理的元素，當前被處理的元素的索引，呼叫 reduce 的陣列。

var a = [1,2,3,4,5]
/*求和*/
var sum = a.reduce((x,y)=>x+y,0);
/*求積*/
var product = a.reduce((x,y)=>x*y,1);
/*求最大值*/
var max = a.reduce((x,y)=>(x>y)?x:y);

這個方法的簡單用法就是這樣，在《javascript高階程式設計》（第三版）中只是介紹了這個用法，但是在《javascript權威指南》（第六版）中提到了reduce的高階用法。
例1：求任意數目物件的“並集”

/*
返回一個新物件，這個物件同時擁有o和p的屬性
如果o和p中有重名屬性，使用p中屬性
*/
function union(o,p){
    return extend(extend({},o),p);
}
var objects = [{x:1},{y:2},{z:3}];
var merged = objects.reduce(union); // =>{x:1,y:2,z:3}

例2：統計字串中每個字元出現的重複次數

var arr = 'abcdabcdadbc';
var info = arr.split('').reduce((p,k) => (p[k]++ || (p[k] = 1), p), {});
console.log(info); //=> Object {a: 3, b: 3, c: 3, d: 3}

這兩個例子，尤其是第二個例子可以看出，reduce()並不單單只是用於數學計算，在第二個例子中可以明顯看出在reduce()第二個引數傳入一個空物件，此時它最終返回的就是一個物件。由於本身傳入的初始值是物件，所以返回物件。如果傳入一個空陣列，則返回陣列。所以可以看出，最終reduce()函式返回什麼，取決於第二個引數的形式。

join()

Array.join()方法將陣列中的所有元素都轉化為字串並連線起來，返回最後生成的字串。可以指定一個可選的字串在生成的字串中分隔陣列的各個元素，如不指定，預設用逗號隔開。

fill()

引數：填充項、填充的起始位置、填充的結束位置
fill()方法用於使用給定的值填充陣列。

new Array(3).fill(7); //=>[7,7,7]

轉換為陣列的方法(ES6新增)

Array.from();

該方法接收兩個引數要轉換的非陣列物件,對每個元素進行處理的方法（可選）

在js中，有很多類陣列物件（array-like object）和可遍歷（iterable）物件（包括ES6新增的資料結構Set和Map），常見的類陣列物件包括document.querySelectorAll()取到的NodeList，以及函式內部的arguments物件。它們都可以通過Array.from()轉換為真正的陣列，從而使用陣列的方法。事實上只要物件具有length屬性，就可以通過Array.from()轉換為真正的陣列。

var a = {
    0:'li',
    1:'li',
    2:'li',
    length:3
};
console.log(Array.from(a)); // => ['li','li','li'];

Array.from([1,2,3],(x)=>x*x); // =>1,4,9

擴充套件運算子（...）

//arguments物件
function foo(){
    var args = [...arguments];
}
//nodelist
[...document.querySelectorAll('div')];