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

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

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

新建數(shù)組的方法有三種：

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

Array.of()是ES6中新增的將一組值轉換為數(shù)組的方法，該方法的出現(xiàn)時為了彌補構造函數(shù)Array()因為參數(shù)不同導致的不同行為。

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

從上面可以看出，只有在參數(shù)個數(shù)不少于2時候，才會返回新的數(shù)組。

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

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

push()
接收任意數(shù)量的參數(shù)，逐個將其添加至數(shù)組末尾，返回修改后的數(shù)組的長度

unshift()
在數(shù)組的前端添加任意個項并返回新數(shù)組的長度

pop()
從數(shù)組末尾移除最后一項，返回移除的項

shift()
移除數(shù)組中的第一項并返回該項

reverse()
反轉數(shù)組項的順序

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

sort()
按照升序排列數(shù)組項，但是它在實現(xiàn)排序時會調用每個數(shù)組項的toString()放法，去比較字符串，所以會出現(xiàn)如下情況

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

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

/*升序
降序則更改返回值即可*/
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);

對于數(shù)值類型或者其valueOf()方法會返回數(shù)值類型的對象類型，可以使用一個簡單的比較函數(shù)

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

參數(shù)：

target(必需)：從該位置開始替換數(shù)據(jù)

start (可選)：從該位置開始讀取數(shù)據(jù)，默認為0。如果為負值，表示倒數(shù)

end (可選)：到該位置前停止讀取數(shù)據(jù)，默認等于數(shù)組長度。如果為負值表示倒數(shù)

在當前數(shù)組內部將指定位置的成員復制到其他位置，會覆蓋原來的成員。修改原來的數(shù)組形成新的數(shù)組

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的后兩個參數(shù)是可選的，但是需要寫第二個參數(shù)，否則返回的只是原數(shù)組本身。

slice()
接受一個或兩個參數(shù)，要返回的起始位置到結束位置但不包括結束位置項，如果只寫一個參數(shù)則截取數(shù)組到最后。可以接收負數(shù)作為參數(shù)

splice()
做多可以接收三個參數(shù)，分別為起始位置，要刪除的項目數(shù)，要插入的任意數(shù)量的項，同個這三個參數(shù)是否傳入可以實現(xiàn)刪除，插入，替換

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

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

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

concat()
這個方法會先創(chuàng)建當前數(shù)組的一個副本，然后將接收到的參數(shù)添加到這個副本的末尾并返回副本。

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()用于查找數(shù)組中是否有該方法，如果有則返回該元素的位置，否則返回-1。
但是這個方法有兩個缺點：

不夠語義化

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

ES7新增
ES7中新增includes()方法，用于查找數(shù)組總是否包含某個元素，返回布爾值，接受兩個參數(shù) 要查找的元素 和 查找的起始位置。

find()和findIndex()

參數(shù)：一個回掉函數(shù)
回調的參數(shù)：當前值、當前位置、原數(shù)組

find()
方法用于找出第一個符合條件的數(shù)組成員。

findIndex()
方法返回第一個符合條件的數(shù)組成員的位置，如果所有成員都不符合，則返回-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為數(shù)組定義了五個迭代方法
每個方法都接收兩個參數(shù)：要在每一項上運行的函數(shù)和（可選的）運行該函數(shù)的作用域對象----影響this的值。
傳入這些方法中的函數(shù)會接收三個參數(shù)：數(shù)組項的值、該項在數(shù)組中的位置和數(shù)組對象本身。

every():對數(shù)組中的每一項運行給定的函數(shù)，如果該函數(shù)對每一項都返回true,則返回true

some():對數(shù)組中每一項運行給定的函數(shù)，如果該函數(shù)對任一項返回true，則返回true

filter():對數(shù)組中每一項運行給定的函數(shù)，返回該函數(shù)會返回true的項組成的數(shù)組

forEach():對數(shù)組中的每一項運行給定的函數(shù)。沒有返回值

map():對數(shù)組中的每一項運行給定的函數(shù)，返回每次調用的結果組成的數(shù)組

reduce()

該方法可以傳遞兩個參數(shù)：化簡函數(shù)，傳遞給函數(shù)的初始值（可選）。
化簡函數(shù)的參數(shù)：上一次調用回調返回的值，或者是提供的初始值（initialValue），當前被處理的元素，當前被處理的元素的索引，調用 reduce 的數(shù)組。
這個方法，可以用于求數(shù)組元素的和、積、最大值。

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：求任意數(shù)目對象的“并集”

/*
返回一個新對象，這個對象同時擁有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)計字符串中每個字符出現(xiàn)的重復次數(shù)

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()并不單單只是用于數(shù)學計算，在第二個例子中可以明顯看出在reduce()第二個參數(shù)傳入一個空對象，此時它最終返回的就是一個對象。由于本身傳入的初始值是對象，所以返回對象。如果傳入一個空數(shù)組，則返回數(shù)組。所以可以看出，最終reduce()函數(shù)返回什么，取決于第二個參數(shù)的形式。

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

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

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

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

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

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