摘要：新建數組新建數組的方法有三種方法一方法二方法三新增是中新增的將一組值轉換為數組的方法，該方法的出現時為了彌補構造函數因為參數不同導致的不同行為。

原文鏈接：http://mrzhang123.github.io/2016/08/03/js-Array

在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構造函數，如果從一個框架向另一個框架傳入一個數組，那么傳入的數組與第二個框架中原聲創(chuàng)建的數組分別有不同的構造函數。
在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;
}

參數：

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()
這個方法會先創(chuàng)建當前數組的一個副本，然后將接收到的參數添加到這個副本的末尾并返回副本。

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。
但是這個方法有兩個缺點：

不夠語義化

它內部使用嚴格等于運算符===，導致了對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：統(tǒng)計字符串中每個字符出現的重復次數

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()函數返回什么，取決于第二個參數的形式。

Array.join()方法將數組中的所有元素都轉化為字符串并連接起來，返回最后生成的字符串。可以指定一個可選的字符串在生成的字符串中分隔數組的各個元素，如不指定，默認用逗號隔開。

參數：填充項、填充的起始位置、填充的結束位置
fill()方法用于使用給定的值填充數組。

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

該方法接收兩個參數要轉換的非數組對象,對每個元素進行處理的方法（可選）

在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")];