javascript中的Array對象 —— 數組的合並、轉換、迭代、排序、堆棧


Array 是javascript中經常用到的數據類型。javascript 的數組其他語言中數組的最大的區別是其每個數組項都可以保存任何類型的數據。本文主要討論javascript中數組的聲明、轉換、排序、合並、迭代等等基本操作。

原文:http://www.cnblogs.com/kelsen/p/4850274.html

創建數組和數組檢測

1、使用Array構造函數 創建數組。

//創建一個空數組
var cars = new Array();

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

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

這里要注意的是,當只傳遞一個參數給Array構造函數時,如果參數是數字則會創建一個指定長度的數組,如果參數是一個字符串則創建一個只包含該字符串的長度為1 的數組。

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

另外使用 Array 構造函數創建數組時也可以省略掉 new 操作符,和上面的一樣只是去掉new關鍵字即可,這里不做演示。

2、使用 數組字面量法 創建數組

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

//創建一個空數組
var cars = [];

//創建一個包含3個項的數組
var cars = ['Mercedes-benz','BMW','Audi'];

在讀取和設置數組的值時,只需通過方括號提供相應項的索引即可

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

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

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

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

數組轉換

toString() 方法可以返回由數組中項組成的字符串,項與項之間由“,”連接。當進行轉換時會調用數組中每個項的 toString() 方法;toLocaleString()會返回與tostring類似的結果,只不過其調用的是數組中每項的 toLocaleString();valueOf會返回數組本身;join()函數接受一個字符串類型的參數,返回之類似tostring(),不同之處在於該函數使用傳遞給他的參數作為數組項之間的連接符。

隊列和棧

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

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()從數組的前端移除項。shift配合push使用可以實現 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()

該方法會基於當前數組中的所有項創建一個新數組,先創建一個當前數組的副本,然后將接受到的參數添加到這個副本的末尾,最后返回新構建的數組。如果沒有為方法提供參數,則會僅復制當前數組並返回該副本。傳遞給concat()的參數可以是一個或多個數組,該方法會將這些數組中的項都添加到新構建的結果數組中。如果傳遞的參數不是數組,這些值會被簡單的添加到結果數組的末尾處。

splice()

上面提到的方法都是在數組的結尾或頭部進行操作,splice() 不同,它可用於在數組的任意位置刪除指定數量的項並在當前位置插入新項。

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

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

替換任意數量的項,需指定三個參數:第一個參數指定需替換的第一個項的位置,第二個參數指定需替換的項的個數,第三個以后的參數為要替換的新項。如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()。這兩個方法都接收兩個參數,第一個參數為要查找的項,第二個參數為在數組中查找時的起點位置。這兩個方法的唯一區別在於indexOf由前往后查找,lastindexof是由后往前查找。它們都返回要查找的項在數組中的位置,如果沒找到則返回 -1 。在比較參數是否與數組中的項相等時是使用全等操作符(===)。

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

數組排序

實際應用中經常會遇到要對數組進行排序的情況,javascript中有兩個可以直接用來排序的法:reverse()和sort()。一個用來反轉數組排序,另一個用來排序。

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()方法可以反轉數組中的項。sort() 方法在排序時會調用較數組中各項的toString()然后進行比較,所以在對numbers 排序后,數組項“16”排在了"2"和“3”前面。由此可見,默認情況下sort()在排序時並不總是如人所願。其實sort方法還可以接收一個比較函數作為參數以干預sort()的排序行為。

比較函數接受兩個參數,第一個參數應該位於第二個參數前則返回負數,如果兩個參數相等返回0,如果第一個參數應該位於第二個參數后面則返回正數。

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

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

數組迭代

ES5中定義了迭代數組的方法,每個方法都接受兩個參數,第一個參數為要在每個項上執行的函數,第二個參數為作用域對象(可選)。傳入這些方法的函數接受3個參數:數組中的項、該項在數組中的索引、數組本身。

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

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

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

map() 對數組中的每個項執行給定函數,返回每個數組項的執行結果組成的數組。

forEach() 對數組中的每個項執行給定函數。

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() 會逐個遍歷數組中的每個項,並用給定函數將前兩項的計算結果作為基礎參與下一個項的計算,依次遞歸,直至結束。reduceRight與reduce的不同之處僅僅在於遞歸順序的不同,reduceRight是從結尾向前遞歸。

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

 

總結

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM