摘要：刪除刪除數(shù)組元素刪除第一個(gè)元素可以看出，通過運(yùn)算符刪除數(shù)組元素也有一些注意的地方。數(shù)組方法也可以用于刪除數(shù)組元素，后面講解。該方法對(duì)數(shù)組的每一項(xiàng)運(yùn)行給定的函數(shù)，返回該函數(shù)會(huì)返回的項(xiàng)組成的數(shù)組。

  
結(jié)合《javascript高級(jí)程序設(shè)計(jì)》《javascript權(quán)威指南》《javascript語言精粹》做的一篇關(guān)于Array對(duì)象的全面解析。分為兩篇：基礎(chǔ)篇和擴(kuò)展應(yīng)用篇。

數(shù)組是值的有序集合，每個(gè)值稱為一個(gè)元素，每個(gè)元素在數(shù)組中有特定位置，以數(shù)字表示，稱為索引，JavaScript中的數(shù)組是一個(gè)類數(shù)組的對(duì)象，雖然在性能上比真正的數(shù)組會(huì)慢，但它使用起來更方便。

2.1 數(shù)組字面量方式 ： 元素用逗號(hào)隔開即可。

var empty = [];//創(chuàng)建空數(shù)組
var num = [1,2,3,4,5];//創(chuàng)建5個(gè)數(shù)值類型元素的的數(shù)組
var mix = [1,"jozo",true,[1,2],{1:"jozo"}];//創(chuàng)建任意類型元素的數(shù)組

2.2 構(gòu)造函數(shù)方式 : 調(diào)用構(gòu)造函數(shù)Array()，根據(jù)參數(shù)不同，創(chuàng)建不同的數(shù)組
a.不傳遞參數(shù)

var a = new Arry();//創(chuàng)建一個(gè)空數(shù)組，但我們更常用下面的方式
var a = [];

b.傳遞一個(gè)數(shù)值參數(shù)，這個(gè)參數(shù)用來指定數(shù)組長(zhǎng)度

var a = new Arry(5);// 創(chuàng)建了一個(gè)長(zhǎng)度為5的數(shù)組

c.傳遞多個(gè)參數(shù)，用這些參數(shù)作為數(shù)組元素初始化數(shù)組。

var a = new Arry(1,"jozo",true,[1,2]);//構(gòu)造函數(shù)的參數(shù)將會(huì)成為數(shù)組元素

3.1 添加

a.通過索引添加

var a = [];
a[0] = "jozo";//此時(shí) a = ["jozo"]
a[1] = "blog";//此時(shí) a = ["jozo","blog"]

b.通過數(shù)組方法添加

push(),concat(),splice(),unshift()方法都可以為數(shù)組添加元素，后面將會(huì)詳細(xì)介紹。

3.2 刪除

a.刪除數(shù)組元素

var a = [1,2];
delet a[0];//刪除第一個(gè)元素
console.log(a[0]);//undefined
console.log(a[1]);//2
console.log(a.length);//2

可以看出，通過delete運(yùn)算符刪除數(shù)組元素也有一些注意的地方。1.原數(shù)組長(zhǎng)度不變。2.被刪除的元素的值變?yōu)?b>undefined.3.數(shù)組內(nèi)的其他元素的索引沒有改變。其實(shí)就是原數(shù)組變成了稀疏數(shù)組。

splice(),pop(),shift()數(shù)組方法也可以用于刪除數(shù)組元素，后面講解。

b.刪除整個(gè)數(shù)組對(duì)象

第一種方式：直接操作數(shù)組對(duì)象（推薦用法）
var a = [1,2];
a.length = 0;
console.log(a);//輸出: []

第二種方式：改變變量的引用 （不算真正的刪除）
var a = [1,2];
a = [];
console.log(a);//輸出: []

其實(shí)上面的知識(shí)點(diǎn)不講我們都差不多都知道的。但是數(shù)組的一些方法屬性我們雖然知道但是卻不會(huì)用，或是總是忘記該怎么用，因?yàn)樗姆椒▽傩砸埠芏啵覀儊矸治鱿赂鱾€(gè)方法的特點(diǎn)：

3.1 join()方法

將數(shù)組中的所有元素都轉(zhuǎn)化為字符串鏈接在一起，可以指定一個(gè)可選的分隔符來分隔各個(gè)元素，若未指定分隔符，默認(rèn)使用逗號(hào)：

var boys = ["jozo","jozo1","jozo2"];
var newboy1 = boys.join();
var newboy2 = boys.join("+");
var newboy3 = boys.join(undefined);

console.log(newboy1); // jozo,jozo1,jozo2
console.log(newboy2); // jozo+jozo1+jozo2
console.log(newboy3); // jozo,jozo1,jozo2
console.log(boys); // ["jozo", "jozo1", "jozo2"]

從上面的代碼可以看出一些問題：1.給join()方法傳遞undefined，也會(huì)默認(rèn)使用逗號(hào)分隔符，但是IE7及一下版本會(huì)直接用"undefined"作為分隔符。2.join()方法并沒有改變?cè)瓟?shù)組。

3.2 reverse()方法
將數(shù)組元素顛倒順序(注意：并不是從大到小或者是從小到大)，返回逆序的數(shù)組，這個(gè)方法直接對(duì)原數(shù)組中排序。

var a = [1,3,2];
console.log(a.reserse());// [2,3,1] 只是顛倒順序，不是按大小排序
console.log(a);//[2,3,1] 改變了原數(shù)組

這個(gè)方法快速直觀明了，但不夠靈活，很多時(shí)候我們需要特定的排序，所以有了下面的更靈活的方法。

3.3 sort()方法

默認(rèn)情況下，sort()方法按從小到大的排序，但是如果是數(shù)值，sort()方法會(huì)調(diào)用每個(gè)元素的toString()方法轉(zhuǎn)換為字符串后再比較：

var num  = [1,5,10,15];
console.log(num.sort()); //[1,10,15,5]  按照字符串比較。

var num  = ["jozo","c","b","a"];
console.log(num.sort()); //["a","b","c","jozo"]  按照字符串比較。

默認(rèn)的sort()方法以字母表順序進(jìn)行排序，這有時(shí)也不是最佳方案，因此我們可以傳遞一個(gè)函數(shù)類型的參數(shù)作為比較函數(shù)，改變排序方式，以便我們確定哪個(gè)值在前面。
比較函數(shù)：接受兩個(gè)參數(shù)，函數(shù)的返回值決定數(shù)組的排序方式。

看下代碼：

// 為了直觀一點(diǎn)，寫個(gè)羅嗦的比較函數(shù)
var compare = function(a,b){
    if(a < b){
        return -1;
    }else if(a > b){
        return 1;
    }else{
        return 0;
    }
};
var num1  = [1,5,10,15];
console.log(num1.sort(compare)); //[1,5,10,15]  從小到大

var num2  = ["jozo","c","b","a"];
console.log(num2.sort(compare)); //["a","b","c","jozo"]  從小到大

// compare()函數(shù)可以改進(jìn)下：
//從小到大的比較函數(shù)
var compare = function(a,b){
    return a - b;
};
//從大到小的比較函數(shù)
var compare = function(a,b){
    return b - a;
};

//或者直接給sort()方法傳遞一個(gè)匿名比較函數(shù)：
num.sort(function(a,b){return a -b}); // 推薦用法

3.4 concat()方法

這個(gè)方法先會(huì)創(chuàng)建當(dāng)前數(shù)組的一個(gè)副本，然后將收到的參數(shù)添加到副本數(shù)組的末尾，返回重新構(gòu)建的數(shù)組。

1.當(dāng)沒有傳遞參數(shù)時(shí)，只是返回當(dāng)前數(shù)組的一個(gè)副本。

var a = [1,2];
b = a.concat();
console.log(b);//[1,2] a 的副本
console.log(a);//[1,2]; a 未改變

2.當(dāng)傳遞的參數(shù)為非數(shù)組時(shí)，將會(huì)把每個(gè)參數(shù)添加到副本中

var a = [1,2];
b = a.concat(3,4);
console.log(b);//[1,2,3,4] 在a的副本上添加
console.log(a);//[1,2]; a 未改變

3.當(dāng)傳遞的參數(shù)是數(shù)組時(shí)，將會(huì)把數(shù)組的每一個(gè)元素添加到副本中。

var a = [1,2];
b = a.concat([3,4]);
console.log(b);//[1,2,3,4] 在a的副本上添加
console.log(a);//[1,2]; a 未改變

//來看看參數(shù)的另一種形式
var a = [1,2];
b = a.concat([3,4，[5,6]]); //數(shù)組的數(shù)組
console.log(b);//[1,2,3,4,[5,6]]  //數(shù)組的數(shù)組直接添加到副本
console.log(a);//[1,2]; a 未改變

3.5 slice()方法

這個(gè)方法返回指定數(shù)組的一個(gè)片段或子數(shù)組，接受一個(gè)或兩個(gè)參數(shù)。

1.一個(gè)參數(shù) ：返回該參數(shù)指定位置（包含）到數(shù)組末尾的元素的新數(shù)組

var a = [1,2,3,4,5];
a.slice(0);// 返回 [1,2,3,4,5]
a.slice(1);// 返回 [2,3,4,5]
a.slice(7);// 返回 [] 參數(shù)超過數(shù)組索引，返回空數(shù)組
a.slice(-1);//返回 [5] 用數(shù)組長(zhǎng)度-1 相當(dāng)于slice(4);
console.log(a);//返回 [1,2,3,4,5] 原數(shù)組不變

2.兩個(gè)參數(shù) ：參數(shù)作為始末位置，但不包含第二個(gè)參數(shù)指定的位置。

var a = [1,2,3,4,5];
a.slice(0,4);// 返回 [1,2,3,4]
a.slice(1,4);// 返回 [2,3,4]
a.slice(1,7);// 返回 [2,3,4,5] 參數(shù)超過數(shù)組索引，則到數(shù)組末尾
a.slice(1,-1);//返回 [2,3,4] 用數(shù)組長(zhǎng)度-1 相當(dāng)于slice(1,4);
a.slice(1,-7);//返回 [] 當(dāng)結(jié)束位置小于起始位置，返回空數(shù)組
console.log(a);//返回 [1,2,3,4,5] 原數(shù)組不變

3.6 splice()方法

這個(gè)數(shù)組恐怕是數(shù)組里最強(qiáng)大的方法了，它有多種用法，主要用途是向數(shù)組中部插入元素，請(qǐng)不要和上面的slice()方法混淆了，這是兩個(gè)完全不同的方法。由參數(shù)的不同，可實(shí)現(xiàn)下列三種方法：

1.刪除 ：指定一個(gè)或兩個(gè)參數(shù)，第一個(gè)參數(shù)是刪除的起始位置，第二個(gè)參數(shù)是要?jiǎng)h除的元素個(gè)數(shù)，若省略第二個(gè)參數(shù)，則從起始位置刪除至末尾：

var a = [1,2,3,4,5];
a.splice(3,2);//返回 [4,5] 從索引3開始，刪除2個(gè)元素，此時(shí) a = [1,2,3]
a.splice(1);// 返回 [2,3] 此時(shí) a = [1]

2.插入：指定3個(gè)及以上個(gè)參數(shù)，前兩個(gè)參數(shù)和上面的一致，第二個(gè)參數(shù)一般為0，后面的參數(shù)表示要插入的元素：

var a = [1,2,3,4,5];
a.splice(4,0,6,7);//返回 [] 從索引4開始，刪除0個(gè)元素，此時(shí) a = [1,2,3,4,5,6,7]

//下面這種情況又和concat()不同，直接插入數(shù)組而非數(shù)組元素
a.splice(4,0,[6,7]);//返回 [] 從索引4開始，刪除0個(gè)元素，此時(shí) a = [1,2,3,4,5,[6,7]]

3.更新：指定3個(gè)及以上個(gè)參數(shù)，前兩個(gè)參數(shù)和上面的一致，第二個(gè)參數(shù)指定要?jiǎng)h除的元素個(gè)數(shù)，后面的參數(shù)表示要插入的元素：

var a = [1,2,3,4,5];
a.splice(3,2,6,7);//返回 [4,5] 從索引3開始，刪除2個(gè)元素，此時(shí) a = [1,2,3,6,7]

3.7 push()/pop()方法

補(bǔ)充下數(shù)據(jù)結(jié)構(gòu)的知識(shí)，棧是一種LIFO(Last-In-First-Out，后進(jìn)先出)的數(shù)據(jù)結(jié)構(gòu)，也就是最新添加的項(xiàng)最早被移除。而棧中項(xiàng)的插入和移除只發(fā)生在棧頂部。數(shù)組的push(),pop()方法就為數(shù)組實(shí)現(xiàn)了類似棧的功能：

1.push()：該方法可以接受任意數(shù)量，任意類型的的參數(shù)，并將它們添加至數(shù)組的末尾（棧頂），最后返回修改后的數(shù)組的長(zhǎng)度。

var a = [];// 創(chuàng)建空數(shù)組
var lng = a.push(1,2,3);// 添加數(shù)組元素
console.log(a);// 輸出：[1,2,3]
console.log(lng);// 輸出：3  返回?cái)?shù)組長(zhǎng)度3
var lng2 = a.push(4,[5,6]);//
console.log(lng2); // 輸出：5  返回?cái)?shù)組長(zhǎng)度5
console.log(a);//輸出：[1,2,3,4,[5,6]]

2.pop() ：相反，該方法刪除數(shù)組的最后一個(gè)元素，減小數(shù)組長(zhǎng)度，并返回刪除的元素。不帶參數(shù)。

var a = [1,2,3];
var last= a.pop();// 刪除數(shù)組最后一個(gè)元素
console.log(a);// 輸出：[1,2]
console.log(last);// 輸出：3  被刪除的元素是 3

可以看出，這兩個(gè)方法都是直接修改原數(shù)組。

3.8 unshift()/shift()方法

上面提到了棧的數(shù)據(jù)結(jié)構(gòu)，這里再提一個(gè)隊(duì)列的數(shù)據(jù)結(jié)構(gòu)，這是一種FIFO(First-In-First-Out,先進(jìn)先出)的數(shù)據(jù)結(jié)構(gòu)，隊(duì)列添加元素是在末端，刪除是在前端。很多同學(xué)就會(huì)猜測(cè)了，unshift()就是在末端添加元素，shift()就是在前端刪除元素，其實(shí)不然：

1.shift()：用于在前端刪除數(shù)組元素，返回被刪除的元素，與push()方法結(jié)合便是一對(duì)隊(duì)列方法。

var a = [1,2,3];
a.push(4,5);//此時(shí) a = [1,2,3,4,5] 
var start = a.shift();//此時(shí) a = [2,3,4,5] 刪除最前端的元素
console.log(start);// 1 返回刪除的元素

2.unshift()：用于在前端添加元素，返回修改后的數(shù)組的長(zhǎng)度，與pop()方法結(jié)合便是一對(duì)反操作的隊(duì)列。

var a = [1,2,3];
a.unshift(4,5);//此時(shí) a = [4,5,1,2,3] 在前端添加元素
var end= a.pop();//此時(shí) a = [4,5,1,2] 
console.log(end);// 3 返回刪除的元素

這兩個(gè)方法同樣都是直接修改原數(shù)組。

ECMAScript定義了9個(gè)操作數(shù)組的數(shù)組方法:

遍歷：forEach()
映射：map()
過濾：filter()
檢測(cè)：every(),some()
簡(jiǎn)化：reduce(),reduceRight()
搜索：indexOf(),lastIndexOf()

每個(gè)方法都接受兩個(gè)參數(shù)：1.要在每個(gè)數(shù)組元素上運(yùn)行的函數(shù)；2.運(yùn)行函數(shù)的作用域?qū)ο?-- this指向 (可選參數(shù))
第一個(gè)參數(shù)--函數(shù)又可傳遞三個(gè)參數(shù)（簡(jiǎn)化和搜索方法除外），分別代表：1.每個(gè)數(shù)組元素的值；2.元素的索引；3.數(shù)組本身

注意：所有這些方法都不會(huì)修改原始數(shù)組，但是傳遞的函數(shù)是可以修改的。

4.1 forEach()
該方法對(duì)數(shù)組的每一項(xiàng)運(yùn)行給定的函數(shù)。這個(gè)方法沒有返回值。

var nums = [1,2,3];
var sum = 0;
nums.forEach(function(value){sum += num;}); //沒有對(duì)原數(shù)組進(jìn)行修改
console.log(sum); // 6  1+2+3

nums.forEach(function(value,i,ary){ary[i] = value +1;}); //對(duì)數(shù)組進(jìn)行了修改
console.log(nums);//[2,3,4]

4.2 map()
該方法對(duì)數(shù)組的每一項(xiàng)運(yùn)行給定的函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。

var nums = [1,2,3];
var squer = nums.map(function(value){return value*vlaue});
console.log(squer); // [1,4,9]
console.log(nums);// [1,2,3]

注意：這可能看起來有點(diǎn)像forEach()方法，但細(xì)看會(huì)發(fā)現(xiàn) 該方法有返回值，而前者沒有，而且返回值是數(shù)組，這個(gè)數(shù)組是新數(shù)組，并沒有對(duì)原始數(shù)組進(jìn)行修改。如果原始數(shù)組是稀疏數(shù)組，返回的也是相同方式的數(shù)組，具有相同的長(zhǎng)度和相同的缺失元素。

4.3 filter()
該方法對(duì)數(shù)組的每一項(xiàng)運(yùn)行給定的函數(shù)，返回該函數(shù)會(huì)返回true的項(xiàng)組成的數(shù)組。

var a = [1,2,3,4,5];
smallValue = a.filter(function(value){return value < 3;});// [1,2]

注意：filter()會(huì)跳過稀疏數(shù)組中缺少的元素，他的返回?cái)?shù)組總是稠密的。下面的方式可以壓縮稀疏數(shù)組的看空缺：

var a = [1,,3,,5];//有兩個(gè)空缺元素
Var uglify = a.filter(function(){return true;}); //[1,3,5]

還可以過濾undefined和null的元素：

var a = [1,undefined,3,,null,5];//有兩個(gè)空缺元素
Var uglify = a.filter(function(value){
    return value != undefined && value != null;
}); //[1,3,5]

4.4 every(),some()
every()：對(duì)數(shù)組的每一項(xiàng)運(yùn)行給定的函數(shù)，如果該函數(shù)對(duì)數(shù)組的每一項(xiàng)都返回true，則返回true,注意是每一項(xiàng)，有一項(xiàng)為false則為false.

var nums = [1,2,3,4,5];
var bigresult = nums.every(function(value){return value > 2}); // false 不全大于2
var result = nums.every(function(value){return value > 0}); //true 全部大于0

some()：對(duì)數(shù)組的每一項(xiàng)運(yùn)行給定的函數(shù)，如果該函數(shù)對(duì)數(shù)組的任一項(xiàng)返回true，則返回true。

var nums = [1,2,3,4,5];
var bigresult = nums.every(function(value){return value > 2}); // true 有大于2的元素
var result = nums.every(function(value){return value < 0}); //false 全部大于0

注意：在數(shù)組是空數(shù)組時(shí)，every()返回true,some()返回false

4.5 reduce(),reduceRight()
這兩個(gè)方法都會(huì)迭代數(shù)組的所有項(xiàng)，然后構(gòu)建一個(gè)最終的返回值。reduce()從數(shù)組的第一項(xiàng)開始，逐個(gè)遍歷到最后；reduceRight()從數(shù)組的最后一項(xiàng)開始，逐個(gè)遍歷到第一項(xiàng)。

這兩個(gè)方法都是接收兩個(gè)參數(shù)，一個(gè)是在每項(xiàng)上調(diào)用的函數(shù)，另一個(gè)是作為遍歷的初始值。調(diào)用的函數(shù)又接收四個(gè)參數(shù)，分別是：前一個(gè)值，當(dāng)前值，索引，數(shù)組對(duì)象。這個(gè)函數(shù)的返回值都會(huì)自動(dòng)作為下一次遍歷的函數(shù)的第一個(gè)參數(shù)。若未指定初始值，第一次遍歷發(fā)生在數(shù)組的第二項(xiàng)上，因此第一個(gè)參數(shù)就是數(shù)組第一項(xiàng)，第二個(gè)參數(shù)就是數(shù)組的第二項(xiàng)。我們來個(gè)求和運(yùn)算：

var nums = [1,2,3,4,5];
nums.reduce(function(pre,cur,index,ary){return pre + cur;}); // 15 

//指定初始值,則第一個(gè)參數(shù)就是初始值，第二個(gè)參數(shù)就是數(shù)組第一項(xiàng)
nums.reduce(function(pre,cur,index,ary){return pre + cur;},10); 25

在簡(jiǎn)單的數(shù)字元算上，reduce()和reduceRight()除了順序不同，其他的完全相同。

4.6 indexOf(),lastIndexOf()
這兩個(gè)方法都接受兩個(gè)參數(shù)：要查找的項(xiàng)，查找起點(diǎn)位置的索引（可選）；indexOf()從數(shù)組頭部開始檢索,lastIndexOf()則從數(shù)組尾部向前開始檢索。
兩個(gè)方法都都返回找到的元素的第一次出項(xiàng)的位置（索引），在沒有找到的情況下返回 -1 。
要注意的是：在檢索時(shí)會(huì)與數(shù)組的每一項(xiàng)進(jìn)行全等的比較，也就是必須嚴(yán)格相等（===）。

var nums = [1,2,3,4,5,4,3,2,1];
console.log(nums.indexOf(3)); // 2  索引為2
console.log(nums.lastIndexOf(3)) // 6 從后面開始找，索引為6;

console.log(nums.indexOf(3,3)); // 6  從位置3開始向后找
console.log(nums.lastIndexOf(3,3)) // 2 從位置3開始向前找

console.log(nums.indexOf(6)); // -1  沒有找到

var class= {name : "ruanjian"};
var students = [{name : "jozo"}];
console.log(students.indexOf(class)); //false  非嚴(yán)格相等(不是同一個(gè)對(duì)象)

var school = [class];
console.log(school.indexOf(class);); //true 嚴(yán)格相等(同一個(gè)對(duì)象)

結(jié)合高級(jí)程序設(shè)計(jì)與權(quán)威指南兩本書，內(nèi)容比較多，寫了好長(zhǎng)，寫的過程中有種覺得沒必要的感覺，但是寫完之后就會(huì)覺得很有價(jià)值，至少對(duì)我來說。不是我不會(huì)，而是記得不深刻，重新書寫一遍之后感覺對(duì)數(shù)組這東西比較透徹了。我也建議各位多做一個(gè)學(xué)習(xí)總結(jié)，如有不正確的，請(qǐng)?zhí)嵝研拚Ｖx謝。下一篇文章繼續(xù)介紹數(shù)組！關(guān)于ES6的一些擴(kuò)展以及數(shù)組一些應(yīng)用。