最新的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»