javascript中的Array對象怎么使用

本文小編為大家詳細介紹“javascript中的Array對象怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“javascript中的Array對象怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

創建數組和數組檢測

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()的參數可以是一個或多個數組，該方法會將這些數組中的項都添加到新構建的結果數組中。如果傳遞的參數不是數組，這些值會被簡單的添加到結果數組的末尾處。

1.連接2個數組

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

2.連接3個數組

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.連接值到數組

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()

上面提到的方法都是在數組的結尾或頭部進行操作，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中的Array對象怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。