摘要：檢測(cè)檢測(cè)一個(gè)變量是否為數(shù)組類(lèi)型，最直接的方法這種方法問(wèn)題在于如果網(wǎng)頁(yè)中有多個(gè)框架，即存在多個(gè)版本的構(gòu)造函數(shù)，不同框架的數(shù)組實(shí)例檢測(cè)起來(lái)就會(huì)失敗，但這種情況畢竟不常見(jiàn)。

無(wú)論什么編程語(yǔ)言，數(shù)組總是用的最多的引用數(shù)據(jù)類(lèi)型之一。JS中的數(shù)組有些特殊，它不像Java那種強(qiáng)類(lèi)型語(yǔ)言那樣，一個(gè)數(shù)組只能存放一種類(lèi)型的數(shù)據(jù)。JavaScript允許數(shù)組中的每一項(xiàng)的數(shù)據(jù)類(lèi)型不同。、

本文分九個(gè)層面對(duì)JavaScript數(shù)組的功能及用法做一個(gè)簡(jiǎn)單的介紹。

數(shù)組的創(chuàng)建無(wú)非有兩種方式：
構(gòu)造函數(shù)：

var arr1 = new Array(1，2，3，4);    // [1,2,3,4]
var arr2 = new Array(2);            // [,,,]

字面量：

var arr1 = [1,2,3,4];

如上，構(gòu)造函數(shù)Array()在傳入一個(gè)數(shù)值作為參數(shù)時(shí)，這個(gè)數(shù)值是數(shù)組的長(zhǎng)度，顯然存在歧義，ES6中的Array.of()方法完善了這一點(diǎn)。
Array.of(1, 2, 3, 4); // [1, 2, 3, 4]
Array.of(2); // [2]

當(dāng)然，絕大數(shù)情況都是使用字面量的形式去創(chuàng)建數(shù)組的。

對(duì)數(shù)組進(jìn)行讀寫(xiě)，最簡(jiǎn)單的莫過(guò)于

var arr = [1, 2, 3, 4];
arr[1];                   // 2
arr[1] = 5;

另外，數(shù)組的length屬性是可寫(xiě)的，改變length值也會(huì)改變數(shù)組：

arr.length = 5; // [1, 2, 3, 4,]
arr[4];         // undefined

利用length值還可以在數(shù)組末尾新增項(xiàng)：

arr[arr.length] = 7;  // 數(shù)組最后一項(xiàng)的index為 length - 1

復(fù)雜一點(diǎn)的讀寫(xiě)方式有：push()、pop()、shift()、unshift()
push()、pop()使得數(shù)組可以作為棧的一種實(shí)現(xiàn)，push()可以接受任意數(shù)量的參數(shù)，并將其添加至數(shù)組尾部返回修改后的數(shù)組長(zhǎng)度，pop()彈出并返回?cái)?shù)組最后一個(gè)元素。shift()、push()使數(shù)組可以作為隊(duì)列的一種實(shí)現(xiàn)，shift()將數(shù)組第一個(gè)元素彈出并返回。而unshift()在數(shù)組頭部添加任意數(shù)量的元素并返回長(zhǎng)度。

檢測(cè)一個(gè)變量是否為數(shù)組類(lèi)型，最直接的方法：

target instanceof Array

這種方法問(wèn)題在于如果網(wǎng)頁(yè)中有多個(gè)框架，即存在多個(gè)版本的Array構(gòu)造函數(shù)，不同框架的數(shù)組實(shí)例檢測(cè)起來(lái)就會(huì)失敗，但這種情況畢竟不常見(jiàn)。
另外就是

Array.isArray(target);

這個(gè)API的問(wèn)題在于過(guò)老版本的瀏覽器不支持ES5，但也不足為道。

檢測(cè)數(shù)組中是否存在某個(gè)值，在ES5中往往通過(guò)indexOf()實(shí)現(xiàn)，但ES6新增了includes()方法，彌補(bǔ)了arr.indexOf(value) === -1;在語(yǔ)義化和忽略了NaN的問(wèn)題。

var arr = [1, 2, 3, 4, NaN];
arr.includes(NaN);      // true

將數(shù)組轉(zhuǎn)換為字符串，默認(rèn)的方法有toString()，toLocalString()，valueOf()，以上三種方法都是對(duì)數(shù)組的每一項(xiàng)調(diào)用該方法，然后用逗號(hào)連接這些項(xiàng)；當(dāng)需要用其他符號(hào)連接每一項(xiàng)時(shí)，就需要用到j(luò)oin()方法：

var arr = [1, 2, 3, 4, 5];
arr.join("*");  // 1*2*3*4*5

將數(shù)組轉(zhuǎn)換為參數(shù)列表：使用的是ES6的擴(kuò)展運(yùn)算符...，這在函數(shù)調(diào)用的時(shí)候十分有用

function add(x, y, z) {
    return x + y + z;
}

add(...[1, 2, 3]);   // 6

可以利用這一點(diǎn)對(duì)一些只接受參數(shù)列表的函數(shù)傳遞數(shù)組，從而實(shí)現(xiàn)某種需求，如求數(shù)組中的最大值：

var arr = [1, 2, 3, 4, 5];

// ES5
Math.max().apply(null, arr);

// ES6
Math.max(...arr);

將其他數(shù)據(jù)類(lèi)型(類(lèi)數(shù)組對(duì)象、可遍歷對(duì)象(如arguments對(duì)象，NodeList對(duì)象))轉(zhuǎn)換為數(shù)組：可以用擴(kuò)展運(yùn)算符，也可以用Array.from()。
兩者的區(qū)別在于擴(kuò)展運(yùn)算符調(diào)用的是目標(biāo)對(duì)象的iterator接口，所以...只能將可遍歷對(duì)象轉(zhuǎn)換為數(shù)組，而Array.from()還可以將類(lèi)數(shù)組對(duì)象，即擁有l(wèi)ength屬性的對(duì)象轉(zhuǎn)換為數(shù)組。另外Array.from()還可接受第二個(gè)參數(shù)：作用類(lèi)似于map函數(shù)；第三個(gè)參數(shù)：第二個(gè)參數(shù)中的this。

無(wú)論是擴(kuò)展運(yùn)算符還是Array.from()，在將字符串轉(zhuǎn)換為數(shù)組時(shí)都會(huì)將32位Unicode字符正確識(shí)別為一個(gè)字符，可以利用這一點(diǎn)來(lái)正確讀取字符串的長(zhǎng)度。

數(shù)組實(shí)例有兩個(gè)方法可以對(duì)數(shù)組排序，分別是reverse() 和 sort()。
reverse()僅僅將數(shù)組的順序反轉(zhuǎn)，而如果簡(jiǎn)單地調(diào)用sort()，無(wú)論數(shù)組的每一項(xiàng)為何值，都會(huì)將其轉(zhuǎn)換為字符串比較，就會(huì)出現(xiàn)奇怪的現(xiàn)象：

var arr = [2, 10, 5, 4];
arr.reverse();  // [4, 5, 10, 2]
arr.sort();     // [10, 2, 4, 5]

這是因?yàn)樽址容^的是對(duì)應(yīng)位置的Unicode值，因?yàn)?在2前面所以10比2小。這樣顯然是不合理的，需要向sort傳入排序規(guī)則，如：

var arr = [2, 10, 5, 4];
arr.sort(function(curr, next) {
    if (curr < next) {
        return -1;
    } else if (curr > next) {
        return 1;
    } else {
        return 0;
    }
});
arr         // [2, 4, 5, 10]

因?yàn)閍rr的每一項(xiàng)都是數(shù)值，可以寫(xiě)成

arr.sort(function(curr, next) {
    return curr - next;
});

將多個(gè)數(shù)組或者參數(shù)拼入已有的數(shù)組————concat(item1, arr, item2...)
concat接收任意多個(gè)參數(shù)，可以是數(shù)組或者其他類(lèi)型，返回一個(gè)新的數(shù)組。

// concat不會(huì)改變?cè)瓟?shù)組
var arr = [1, 2, 3, 4];
var arr1 = arr.concat(5, [6, 7]);
arr1;   // [1, 2, 3, 4, 5, 6, 7]

取出數(shù)組中某一段————slice()
slice接收一個(gè)或兩個(gè)參數(shù)，接收一個(gè)參數(shù)時(shí)返回這個(gè)參數(shù)代表的位置到數(shù)組末尾的段，接收兩個(gè)參數(shù)時(shí)返回兩個(gè)參數(shù)之間的段，"包括頭不包括尾。"

// slice也不會(huì)改變?cè)瓟?shù)組
var arr = [1, 2, 3, 4];
var arr1 = arr.slice(0, 3);
arr1;       // [1, 2, 3]    

刪除、插入、替換數(shù)組中的項(xiàng)————splice(start, delMount, ...replace)
splice的返回值總是刪除的項(xiàng)

// splice會(huì)改變?cè)瓟?shù)組
var arr = [1, 2, 3, 4];

// 刪除 
arr.splice(1, 1);       // [2]
arr;                    // [1, 3, 4]

// 插入
arr.splice(1, 0, 2, 5);
arr;                    // [1, 2, 5, 3, 4]

// 替換
arr.splice(2, 1, 8);    // [5]
arr;                    // [1, 2, 8, 3, 4]

數(shù)組內(nèi)部替換————copyWithin(target, start, end) ES6
此方法返回的是修改后的數(shù)組

// copyWithin會(huì)改變?cè)瓟?shù)組
var arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3);   // [4, 5, 3, 4, 5]

這里省略了end參數(shù)，默認(rèn)為到數(shù)組結(jié)尾

填充數(shù)組————fill(item, start, end)

var arr = [1, 2, 3, 4, 5];
arr.fill(7);
arr;            // [7, 7, 7, 7, 7]
arr.fill(8, 0, 2);
arr;            // [8, 8, 7, 7, 7]

查找指定元素在數(shù)組中的位置————indexOf(item, start)、lastIndexOf(item, start)

// 若數(shù)組中無(wú)該元素則返回-1， 此處比較機(jī)制為全等===
var arr = [1, 2, 3, 4, 5, 2];
arr.indexOf(2);         // 1
arr.indexOf(2, 2);      // 5

查找符合條件的元素在數(shù)組中的位置————findIndex(func(value, index, arr)) ES6

var arr = [1, 2, 3, 4, 5];
arr.findIndex(function(value) {
    return value > 3;
});                 // 3

every、filter、forEach、some、map、find(ES6)
迭代方法傳入的都是一個(gè)函數(shù):

function(value, index, arr) {
 if (......) {
    // 符合條件
    return true
 }        
}

every: 數(shù)組所有項(xiàng)都符合條件時(shí)返回true;
some: 數(shù)組中任意一項(xiàng)符合條件就返回true;
filter: 返回?cái)?shù)組中符合條件的項(xiàng)組成的數(shù)組;
forEach: 對(duì)數(shù)組所有項(xiàng)執(zhí)行操作，不返回任何值;
map: 對(duì)數(shù)組每一項(xiàng)執(zhí)行操作，返回由函數(shù)返回值構(gòu)成的數(shù)組;
find: 返回?cái)?shù)組中第一個(gè)符合條件的項(xiàng);

reduce(function(prev, curr, index, array), initValue)，reduce從數(shù)組第一項(xiàng)開(kāi)始執(zhí)行參數(shù)中的函數(shù)，其返回值作為第二項(xiàng)的prev，第二個(gè)參數(shù)可選，指定prev的初始值

var arr = [1, 2, 3, 4];
arr.reduce(function(prev, cur) {
    return prev + cur;
}); // 10

reduceRight()是從數(shù)組末尾開(kāi)始執(zhí)行的，用法與reduce一致。