創(chuàng)建數(shù)組和數(shù)組檢測(cè)

1、使用Array構(gòu)造函數(shù) 創(chuàng)建數(shù)組。

//創(chuàng)建一個(gè)空數(shù)組
var cars = new Array();

//創(chuàng)建一個(gè)指定長(zhǎng)度的數(shù)組
var cars = new Array(20);

//向構(gòu)造函數(shù)傳遞數(shù)組項(xiàng)
var cars = new Array('Mercedes-benz','BMW','Audi');

這里要注意的是，當(dāng)只傳遞一個(gè)參數(shù)給Array構(gòu)造函數(shù)時(shí)，如果參數(shù)是數(shù)字則會(huì)創(chuàng)建一個(gè)指定長(zhǎng)度的數(shù)組，如果參數(shù)是一個(gè)字符串則創(chuàng)建一個(gè)只包含該字符串的長(zhǎng)度為1 的數(shù)組。

var cars = new Array(1);        //[undefined × 1]
var cars = new Array('BMW');    //["BMW"]

另外使用 Array 構(gòu)造函數(shù)創(chuàng)建數(shù)組時(shí)也可以省略掉 new 操作符，和上面的一樣只是去掉new關(guān)鍵字即可，這里不做演示。

2、使用 數(shù)組字面量法 創(chuàng)建數(shù)組

這種方法使用一對(duì)方括號(hào)'[]'表示數(shù)組，直接把數(shù)組項(xiàng)書(shū)寫(xiě)在方括號(hào)中，多個(gè)數(shù)組項(xiàng)之間用逗號(hào) ',' 隔開(kāi)。注意：為避免兼容性問(wèn)題請(qǐng)不要在最后一個(gè)項(xiàng)后面添加 ‘,’ 。

//創(chuàng)建一個(gè)空數(shù)組
var cars = [];

//創(chuàng)建一個(gè)包含3個(gè)項(xiàng)的數(shù)組
var cars = ['Mercedes-benz','BMW','Audi'];

在讀取和設(shè)置數(shù)組的值時(shí)，只需通過(guò)方括號(hào)提供相應(yīng)項(xiàng)的索引即可

var cars = ['Mercedes-benz','BMW','Audi'];

console.log(cars[0]);        //輸出 “Mercedes-benz”
cars[2] = 'Jeep';            //把Audi修改為Jeep
cars[3] = 'Audi';            //增加第四項(xiàng) Audi

通過(guò)數(shù)組的 length 屬性可讀取數(shù)組的長(zhǎng)度，但是該屬性不是只讀的，通過(guò)修改該屬性可以變更數(shù)組的長(zhǎng)度。如果新length小于原length則會(huì)刪掉原數(shù)組中多余的數(shù)組項(xiàng)；若新length大于原length則數(shù)組中仍保持原來(lái)的數(shù)組項(xiàng)，但是length被增加到了新length,當(dāng)訪(fǎng)問(wèn)這些不存在的項(xiàng)時(shí)會(huì)返回 undefined。

var cars = ['Mercedes-benz','BMW','Audi'];
console.log(cars.length)    //3
console.log(cars)           //["Mercedes-benz", "BMW", "Audi"]

cars.length=2;
console.log(cars)           //["Mercedes-benz", "BMW"]

cars.length=4;
console.log(cars)           //["Mercedes-benz", "BMW"]
cars                        //["Mercedes-benz", "BMW", undefined × 2]

3、檢測(cè)數(shù)組

有兩種方法可以檢測(cè)某個(gè)對(duì)象是否為數(shù)組 value instanceof Array 和 Array.isArray(value)。Array.isArray()方法是ES5中新增的方法，其優(yōu)勢(shì)在于當(dāng)頁(yè)面中的多個(gè)框架間傳遞數(shù)組時(shí)，仍可正確返回?cái)?shù)據(jù)類(lèi)型。

數(shù)組轉(zhuǎn)換

toString() 方法可以返回由數(shù)組中項(xiàng)組成的字符串，項(xiàng)與項(xiàng)之間由“,”連接。當(dāng)進(jìn)行轉(zhuǎn)換時(shí)會(huì)調(diào)用數(shù)組中每個(gè)項(xiàng)的 toString() 方法；toLocaleString()會(huì)返回與tostring類(lèi)似的結(jié)果，只不過(guò)其調(diào)用的是數(shù)組中每項(xiàng)的 toLocaleString()；valueOf會(huì)返回?cái)?shù)組本身；join()函數(shù)接受一個(gè)字符串類(lèi)型的參數(shù)，返回之類(lèi)似tostring()，不同之處在于該函數(shù)使用傳遞給他的參數(shù)作為數(shù)組項(xiàng)之間的連接符。

隊(duì)列和棧

通過(guò)push()和pop()函數(shù)可實(shí)現(xiàn) LIFO（Last-in-first-out）。push() 方法接收任意數(shù)量的參數(shù)，把它們逐個(gè)添加到當(dāng)前數(shù)組的末尾，返回修改后數(shù)組的長(zhǎng)度。而pop()方法則從數(shù)組末尾一處最后一項(xiàng)2，減少數(shù)組的length值，然后返回?cái)?shù)組移除的項(xiàng)。

var cars = new Array();

cars.push('Mercedes-benz','BMW');    // 2
console.log(cars);                    // ["Mercedes-benz", "BMW"]

cars.push('Audi');                    // 3
console.log(cars);                    // ["Mercedes-benz", "BMW", "Audi"]

cars.pop();                            // "Audi"
console.log(cars);                    // ["Mercedes-benz", "BMW"]

與pop()類(lèi)似，還有shift()方法，不同之處在于，shift()從數(shù)組的前端移除項(xiàng)。shift配合push使用可以實(shí)現(xiàn) FIFO(First-In-First-Out)。

var cars = new Array();

cars.push('Mercedes-benz','BMW');    // 2
console.log(cars);                    // ["Mercedes-benz", "BMW"]

cars.push('Audi');                    // 3
console.log(cars);                    // ["Mercedes-benz", "BMW", "Audi"]

cars.shift();                        // "Mercedes-benz"
console.log(cars);                    // ["BMW", "Audi"]

合并&拼接

concat()

該方法會(huì)基于當(dāng)前數(shù)組中的所有項(xiàng)創(chuàng)建一個(gè)新數(shù)組，先創(chuàng)建一個(gè)當(dāng)前數(shù)組的副本，然后將接受到的參數(shù)添加到這個(gè)副本的末尾，最后返回新構(gòu)建的數(shù)組。如果沒(méi)有為方法提供參數(shù)，則會(huì)僅復(fù)制當(dāng)前數(shù)組并返回該副本。傳遞給concat()的參數(shù)可以是一個(gè)或多個(gè)數(shù)組，該方法會(huì)將這些數(shù)組中的項(xiàng)都添加到新構(gòu)建的結(jié)果數(shù)組中。如果傳遞的參數(shù)不是數(shù)組，這些值會(huì)被簡(jiǎn)單的添加到結(jié)果數(shù)組的末尾處。

1.連接2個(gè)數(shù)組

const arr = [1, 2, 3].concat([4, 5])
console.log(arr) // [1,2,3,4,5]

2.連接3個(gè)數(shù)組

const arr1 = [1, 2]
const arr2 = [3, 4]
const arr3 = [5, 6]
const arr4 = arr1.concat(arr2, arr3)
console.log(arr4) // [1, 2, 3, 4, 5, 6]

3.連接值到數(shù)組

const arr1 = [1, 2]
const arr2 = 3
const arr3 = [5, 6]
const arr4 = arr1.concat(arr2, arr3)
console.log(arr4) // [1, 2, 3, 5, 6]

splice()

上面提到的方法都是在數(shù)組的結(jié)尾或頭部進(jìn)行操作，splice() 不同，它可用于在數(shù)組的任意位置刪除指定數(shù)量的項(xiàng)并在當(dāng)前位置插入新項(xiàng)。

刪除任意數(shù)量的項(xiàng)，需指定兩個(gè)參數(shù)：第一個(gè)參數(shù)指定要?jiǎng)h除的第一個(gè)項(xiàng)的位置，第二個(gè)參數(shù)是要?jiǎng)h除的項(xiàng)數(shù)。如 splice(0,2)會(huì)刪除當(dāng)前數(shù)組的前兩項(xiàng)。

插入任意數(shù)量的項(xiàng)，需指定三個(gè)參數(shù)：第一個(gè)參數(shù)指定要插入的第一個(gè)項(xiàng)的位置，第二個(gè)參數(shù)是0，第三至n個(gè)參數(shù)是需要插入的任意的項(xiàng)。如splice(2,0,'a','b')

替換任意數(shù)量的項(xiàng)，需指定三個(gè)參數(shù)：第一個(gè)參數(shù)指定需替換的第一個(gè)項(xiàng)的位置，第二個(gè)參數(shù)指定需替換的項(xiàng)的個(gè)數(shù)，第三個(gè)以后的參數(shù)為要替換的新項(xiàng)。如splice(2,2,'a','b')

var cars = ['Mercedes-benz','BMW','Audi'];

cars.splice(0,1);                    // ['BMW','Audi'];
cars.splice(0,0,"Mercedes-benz");    // ["Mercedes-benz", "BMW", "Audi"]
cars.splice(2,1,"Tesla");            // ["Mercedes-benz", "BMW", "Tesla"]

項(xiàng)的位置

ES5中提供了兩個(gè)位置方法 indexOf() 和 lastIndexOf()。這兩個(gè)方法都接收兩個(gè)參數(shù)，第一個(gè)參數(shù)為要查找的項(xiàng)，第二個(gè)參數(shù)為在數(shù)組中查找時(shí)的起點(diǎn)位置。這兩個(gè)方法的唯一區(qū)別在于indexOf由前往后查找，lastindexof是由后往前查找。它們都返回要查找的項(xiàng)在數(shù)組中的位置，如果沒(méi)找到則返回 -1 。在比較參數(shù)是否與數(shù)組中的項(xiàng)相等時(shí)是使用全等操作符（===）。

var cars = ['Mercedes-benz','BMW','Audi','Tesla'];
cars.indexOf('BMW');        // 1
cars.indexOf('bmw');        // -1
cars.indexOf('BMW',1);      // 1
cars.indexOf('BMW',2);      // -1

var cars = ['Mercedes-benz','BMW','Audi','Tesla'];
cars.lastIndexOf('BMW');     // 1
cars.lastIndexOf('bmw');     // -1
cars.lastIndexOf('BMW',0);   // -1
cars.lastIndexOf('BMW',2);   // 1

數(shù)組排序

實(shí)際應(yīng)用中經(jīng)常會(huì)遇到要對(duì)數(shù)組進(jìn)行排序的情況，javascript中有兩個(gè)可以直接用來(lái)排序的法：reverse()和sort()。一個(gè)用來(lái)反轉(zhuǎn)數(shù)組排序，另一個(gè)用來(lái)排序。

var cars = ['Mercedes-benz','BMW','Audi','Tesla'];
var numbers = [1,2,3,14,15,16];

cars.sort();        // ["Audi", "BMW", "Mercedes-benz", "Tesla"]
numbers.sort();        // [1, 14, 15, 16, 2, 3]

cars.reverse();        // ["Tesla", "Mercedes-benz", "BMW", "Audi"]
numbers.reverse();    // [3, 2, 16, 15, 14, 1]

reverse()方法可以反轉(zhuǎn)數(shù)組中的項(xiàng)。sort() 方法在排序時(shí)會(huì)調(diào)用較數(shù)組中各項(xiàng)的toString()然后進(jìn)行比較，所以在對(duì)numbers 排序后，數(shù)組項(xiàng)“16”排在了"2"和“3”前面。由此可見(jiàn)，默認(rèn)情況下sort()在排序時(shí)并不總是如人所愿。其實(shí)sort方法還可以接收一個(gè)比較函數(shù)作為參數(shù)以干預(yù)sort()的排序行為。

比較函數(shù)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)應(yīng)該位于第二個(gè)參數(shù)前則返回負(fù)數(shù)，如果兩個(gè)參數(shù)相等返回0，如果第一個(gè)參數(shù)應(yīng)該位于第二個(gè)參數(shù)后面則返回正數(shù)。

numbers.sort(compare);    // [1, 2, 3, 14, 15, 16]

function compare(item1,item2){
    return item1 - item2;
}

數(shù)組迭代

ES5中定義了迭代數(shù)組的方法，每個(gè)方法都接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為要在每個(gè)項(xiàng)上執(zhí)行的函數(shù)，第二個(gè)參數(shù)為作用域?qū)ο螅蛇x）。傳入這些方法的函數(shù)接受3個(gè)參數(shù)：數(shù)組中的項(xiàng)、該項(xiàng)在數(shù)組中的索引、數(shù)組本身。

every() 對(duì)數(shù)組中的每個(gè)項(xiàng)執(zhí)行給定函數(shù)，如果每項(xiàng)都返回true則返回true。

some() 對(duì)數(shù)組中的每個(gè)項(xiàng)執(zhí)行給定函數(shù)，如果任何一項(xiàng)返回true則返回true。

filter() 對(duì)數(shù)組中的每個(gè)項(xiàng)執(zhí)行給定函數(shù)，返回所有返回值為true的項(xiàng)組成的數(shù)組。

map() 對(duì)數(shù)組中的每個(gè)項(xiàng)執(zhí)行給定函數(shù)，返回每個(gè)數(shù)組項(xiàng)的執(zhí)行結(jié)果組成的數(shù)組。

forEach() 對(duì)數(shù)組中的每個(gè)項(xiàng)執(zhí)行給定函數(shù)。

var cars = ['Mercedes-benz','BMW','Audi','Tesla'];

cars.every(function(item, index, arr){return item.length>4});       // false
cars.some(function(item, index, arr){return item.length>4});        // true
cars.filter(function(item, index, arr){return item.length>4});      // ["Mercedes-benz", "Tesla"]
cars.map(function(item, index, arr){return 'New-' + item});         // ["New-Mercedes-benz", "New-BMW", "New-Audi", "New-Tesla"]
cars.forEach(function(item, index, arr){ 
    // code
});

reduce() 和 reduceRight() 會(huì)逐個(gè)遍歷數(shù)組中的每個(gè)項(xiàng)，并用給定函數(shù)將前兩項(xiàng)的計(jì)算結(jié)果作為基礎(chǔ)參與下一個(gè)項(xiàng)的計(jì)算，依次遞歸，直至結(jié)束。reduceRight與reduce的不同之處僅僅在于遞歸順序的不同，reduceRight是從結(jié)尾向前遞歸。

var numbers = [1, 2, 3, 4, 5, 6, 7];

var sum = numbers.reduce(function(pre, cur, index, arr){
    return pre + cur;
});
console.log(sum);    // 28

總結(jié)

javascript中有很多對(duì)數(shù)組進(jìn)行操作的方法，熟練使用它們非常有助你提高寫(xiě)代碼的速度和代碼執(zhí)行的效率（一般情況下，要盡量避免自己實(shí)現(xiàn)JS已有的方法），需要注意的是部分方法是 ES5 中新增的，使用時(shí)需考慮瀏覽器支持情況。

最新評(píng)論