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

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

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

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

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

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

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

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

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

這種方法使用一對方括號'[]'表示數(shù)組，直接把數(shù)組項書寫在方括號中，多個數(shù)組項之間用逗號 ',' 隔開。注意：為避免兼容性問題請不要在最后一個項后面添加 ‘,’ 。

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

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

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

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

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

通過數(shù)組的 length 屬性可讀取數(shù)組的長度，但是該屬性不是只讀的，通過修改該屬性可以變更數(shù)組的長度。如果新length小于原length則會刪掉原數(shù)組中多余的數(shù)組項；若新length大于原length則數(shù)組中仍保持原來的數(shù)組項，但是length被增加到了新length,當(dāng)訪問這些不存在的項時會返回 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、檢測數(shù)組

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

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

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

隊列和棧

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

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()類似，還有shift()方法，不同之處在于，shift()從數(shù)組的前端移除項。shift配合push使用可以實現(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()

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

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

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

2.連接3個數(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ù)量的項并在當(dāng)前位置插入新項。

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

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

替換任意數(shù)量的項，需指定三個參數(shù)：第一個參數(shù)指定需替換的第一個項的位置，第二個參數(shù)指定需替換的項的個數(shù)，第三個以后的參數(shù)為要替換的新項。如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"]

項的位置

ES5中提供了兩個位置方法 indexOf() 和 lastIndexOf()。這兩個方法都接收兩個參數(shù)，第一個參數(shù)為要查找的項，第二個參數(shù)為在數(shù)組中查找時的起點位置。這兩個方法的唯一區(qū)別在于indexOf由前往后查找，lastindexof是由后往前查找。它們都返回要查找的項在數(shù)組中的位置，如果沒找到則返回 -1 。在比較參數(shù)是否與數(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ù)組排序

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

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

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

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

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

數(shù)組迭代

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

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

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

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

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

forEach() 對數(shù)組中的每個項執(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() 會逐個遍歷數(shù)組中的每個項，并用給定函數(shù)將前兩項的計算結(jié)果作為基礎(chǔ)參與下一個項的計算，依次遞歸，直至結(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中有很多對數(shù)組進(jìn)行操作的方法，熟練使用它們非常有助你提高寫代碼的速度和代碼執(zhí)行的效率（一般情況下，要盡量避免自己實現(xiàn)JS已有的方法），需要注意的是部分方法是 ES5 中新增的，使用時需考慮瀏覽器支持情況。

最新評論