Javascript中Array方法的總結

原文連接：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構造函數，若是從一個框架向另外一個框架傳入一個數組，那麼傳入的數組與第二個框架中原聲建立的數組分別有不一樣的構造函數。
在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')];