最新的Web開發教程
 

JavaScript數組方法


JavaScript數組的優勢在於陣列的方法。


數組轉換為字符串

JavaScript方法toString()數組轉換為(逗號分隔)數組值的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

結果

Banana,Orange,Apple,Mango
試一試»

join()方法也加入所有的數組元素連接成一個字符串。

它的行為就像toString()但除了可以指定分隔符:

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

結果

Banana * Orange * Apple * Mango
試一試»

膨化和推

當你使用數組,很容易刪除元素,並添加新的元素。

這是彈出並且推壓是:

彈出項目數組或物品推一個數組。


跳跳

pop()方法從數組中刪除最後一個元素:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // Removes the last element ("Mango") from fruits
試一試»

pop()方法返回的是“蹦出來”的價值:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // the value of x is "Mango"
試一試»

推動

push()方法添加一個新的元素添加到陣列(末):

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  Adds a new element ("Kiwi") to fruits
試一試»

push()方法返回新數組長度:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi");   //  the value of x is 5
試一試»

移動元素

變速相當於彈出時,第一元件,而不是最後的工作。

shift()方法刪除第一個數組元素和“轉變”的所有其他元素,以一個較低的指數。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // Removes the first element "Banana" from fruits
試一試»

unshift()方法添加到數組的新元素(開頭)和“unshifts”舊的元素:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // Adds a new element "Lemon" to fruits
試一試»

shift()方法返回一個被“移出”的字符串。

unshift()方法返回新的數組長度。


變化的元素

數組元素使用的是自己的索引號訪問:

數組索引從0開始。[0]是第一個數組元素,[1]是第二,[2]是第三...

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // Changes the first element of fruits to "Kiwi"
試一試»

length屬性提供了一種簡便的方式將新元素追加到一個數組:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // Appends "Kiwi" to fruit
試一試»

刪除元素

由於JavaScript數組是對象,元件可通過使用JavaScript操作者被刪除delete

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // Changes the first element in fruits to undefined
試一試»

使用delete可以將陣列中未定義的孔。 使用pop()shift()來代替。


拼接數組

splice()方法可以用於新的項目添加到一個數組:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
試一試»

第一個參數(2)定義,其中新的元素應添加的位置(接合)。

第二個參數(0)定義了許多內容應該被刪除

參數(的剩餘部分"Lemon" , "Kiwi" )定義了要添加新元素。


使用splice()刪除元素

巧妙的參數設置,你可以使用splice()刪除元素,而不會在陣列中留下“空洞”:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // Removes the first element of fruits
試一試»

第一個參數(0)定義了新的元素應添加的位置(接合)。

第二個參數(1)定義有多少元素應該被刪除

參數的其餘部分被省略。 沒有新的元素將被添加。


對數組排序

sort()方法字母順序排列的數組:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // Sorts the elements of fruits
試一試»

倒車數組

reverse()方法顛倒數組中的元素。

你可以用它來以降序排列的數組:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // Sorts the elements of fruits
fruits.reverse();         // Reverses the order of the elements
試一試»

數字排序

默認情況下, sort()函數對值作為字符串

這非常適用於字符串( "Apple"來之前, "Banana" )。

然而,如果數字排序字符串,“25”是比“100”大的,因為“2”是比“1”大。

正因為如此,該sort()方法將數字進行排序時,產生不正確的結果。

您可以通過提供一個比較功能解決這個問題:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
試一試»

要么

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a>b});
試一試»

使用同樣的伎倆,以數組排序下降:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
試一試»

要么

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b>a});
試一試»

比較功能

比較功能的目的是定義一個替代排序順序。

比較函數應該返回一個負數,零或正值,根據不同的參數:

function(a, b){return a-b}

sort()函數比較兩個值,它發送的值的比較功能,並根據返回(負,零,正)值進行排序的值。

例:

當比較40和100的sort()方法調用比較function(40,100)

的函數計算40-100,並返回-60(負值)。

排序功能將整理40為低於100的值。


找到最高(或最低)值

如何找到一個數組的最高價值?

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
// now points[0] contains the highest value
試一試»

和最低的:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
// now points[0] contains the lowest value
試一試»

加入數組

concat()方法,通過連接兩個數組創建新的數組:

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias","Linus"];
var myChildren = myGirls.concat(myBoys);     // Concatenates (joins) myGirls and myBoys
試一試»

concat()方法可以使用任意數量的數組參數:

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias","Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);     // Concatenates arr1 with arr2 and arr3
試一試»

切片數組

slice()方法切片出一塊數組到一個新的數組。

本例中切片出從陣列元件1(起始的陣列的一部分"Orange" ):

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
試一試»

slice()方法創建一個新的數組。 它不會刪除源數組的元素。

本例中切片出從陣列元件3(起始的陣列的一部分"Apple" ):

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);
試一試»

slice()方法可以採取兩種參數,像slice(1,3)

然後,該方法選擇從起動的參數元素,並且最多(但不包括)的端參數。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
試一試»

如果省略了結束的說法,就像在第一示例中, slice()方法切片出數組的其餘部分。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);
試一試»

valueOf()方法

valueOf()方法是一個數組的默認行為。 它轉換成一個陣列為原始值。

當原始值預計的JavaScript將自動轉換一個數組的字符串。

由於這個原因, 所有這些實施例將產生相同的結果

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
試一試»

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.valueOf();
試一試»

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
試一試»

所有JavaScript對象都有valueOf()和一個toString()方法。


完整陣列參考

對於一個完整的參考,請訪問我們完整的JavaScript陣列參考

引用包含所有數組的屬性和方法的說明和示例。


自測練習用!

練習1» 練習2» 練習3» 練習4» 練習5»