JavaScript数组方法

数组方法

       ECMAScript在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的。

1. join()

Array.join()方法将数组中所有元素都专户为字符串并连接在一起,返回最后生成的字符串。可以指定一个可选的字符串在生在的字符串中来分隔数组的各个元素。如果不指定分隔符,默认使用逗号。代码如下:

1
2
3
4
var a = [1, 2, 3];     // 创建一个包含三个元素的数组
a.join(); // => "1,2,3"
a.join(" "); // => "1 2 3"
a.join(""); // => "123"

Array.join() 方法是String.split()方法的逆向操作,后者是将字符串分割成若干块来创建一个数组。

2. reverse()

Array.reverse()方法将数组中的元素颠倒顺序,返回逆向的数组。它采取了替换;换句话说,它不通过重新排列的元素创建新的数组,而是在原先的数组中重新排列他们。例如,下面的代码使用reverse()join()方法生成字符串“3,2,1”:

1
2
var a = [1,2,3];
a.reverse().join(); // => "3,2,1",并且现在的a是[3,2,1]
3. sort()

Array.sort()方法将数组中的元素排序并返回排序后的数组。当不带参数调用sort()时,数组元素以字母表顺序排列(如有必要将临时转化为字符串进行比较):

1
2
3
var a = new Array("banana", "cherry", "apple");
a.sort();
var s = a.join(", ”); // s = "apple, banana, cherry"

如果参数包含undefined元素,它们会被排到数组的尾部。
为了按照其他方式而非字母表顺序进行排序,必须给sort()方法传递一个比较函数。该函数决定了它的两个参数在排好序的数组中的先后顺序。假设第一个参数应该在前,比较函数应该返回一个小鱼0的数值。反之,假设第一个参数应该在后,函数应该返回一个大于0的数值。并且,假设两个值相等(也就是说,他们的顺序无关紧要),函数应该返回0。因此,例如,用数值大小而非字母表顺序进行数组排序,代码如下:

1
2
3
4
5
6
7
8
var a = [33, 4, 1111, 222];
a.sort(); // 字母表顺序: 1111, 222, 33, 4
a.sort(function (a, b) { // 数值顺序: 4, 33, 222, 1111
return a - b; // 根据顺序,返回负数、0、正数
})
a.sort(function (a, b) { // 数值大小相反顺序
return b - a;
})

另外一个数组元素排序的例子,也许需要对一个字符串数组执行不区分大小写的字母表排序,比较函数首先将参数都转化为小写字符串(使用toLowerCase()方法),再开始比较:

1
2
3
4
5
6
7
8
9
10
11
12
13
a = ['ant', 'Bug', 'cat', 'Dog']
a.sort(); // 区分大小写的排序: ['Bug','Dog','ant','cat']
a.sort(function (s, t) { // 不区分大小写的排序
var a = s.toLowerCase();
var b = t.toLowerCase();
if (a < b) {
return -1;
}
if (a > b) {
return 1;
}
return 0;
}); // => ['ant','Bug','cat','Dog']
4. concat()

Array.concat()方法创建并返回一个新数组,它的元素包括调用concat()的元时数组的元素和concat()的每个参数。如果这些参数中的任何一个自身是数组,则连接的是数组的元素,而非数组本身。但要注意,concat()不会递归扁平化数组的数组。concat()也不会修改调用的数组。示例如下:

1
2
3
4
5
var a = [1, 2, 3];
a.concat(4, 5); // 返回[1, 2, 3, 4, 5]
a.concat([4, 5]); // 返回[1, 2, 3, 4, 5]
a.concat([4, 5], [6, 7]); // 返回[1, 2, 3, 4, 5, 6, 7]
a.concat(4, [5, [6, 7]]); // 返回[1, 2, 3, 4, 5, [6, 7]]
5. slice()

Array.slice()方法返回指定数组的一个片段或子数组。它的两个参数分别指定了片段的开始和结束的位置。返回的数组包含第一个参数指定的位置和所有到但不包含第二参数指定的位置的所有数组元素。如果只指定一个参数,返回的数组将包含从开始位置到数组结尾的所有元素。如果参数中出现了负数,它表示相对数组中最后一个元素的位置。例如,参数-1指定了最后一个元素,而-3指定了倒数第三个元素。但是slice()不会修改调用的数组。例如:

1
2
3
4
5
var a = [1, 2, 3, 4, 5];
a.slice(0, 3); // 返回[1, 2, 3]
a.slice(3); // 返回[4, 5]
a.slice(1, -1); // 返回[2, 3, 4]
a.slice(-3, -2); // 返回[3]
6.splice()

Array.splice()方法是在数组中插入或删除元素的通用方法。不同于slice()concat()splice()会修改调用的数组。但是,splice()slice()拥有非常相似的名字,但它们的功能却有本质的区别。
splice()能够从数组中删除元素、插入元素到数组中或者同时完成这两种操作。在插入或删除点之后的数组元素会根据需要增加或减小它们的索引值,因此数组的其他部分仍然保持连续的。splice()的第一个参数指定了插入和(或)删除的起始位置。第二个参数指定了应该从数组中删除的元素个数。如果省略第二个参数,从起始点开始到数组结尾的所有元素都将被删除。splice()返回一个由删除元素组成的数组,或者如果没有删除元素就返回一个空数组。例如:

1
2
3
4
var a = [1, 2, 3, 4, 5, 6, 7, 8];
a.splice(4); // 返回[5, 6, 7, 8];a是[1,2,3,4]
a.splice(1, 2); // 返回[2, 3];a是[1,4]
a.splice(1, 1); // 返回[4];a是[1]

splice()的前两个参数指定了需要删除的数组元素。紧随其后的任意个数的参数指定了需要插入到数组中的元素,从第一个参数指定的位置开始插入。例如:

1
2
3
var a = [1, 2, 3, 4, 5];
a.splice(2, 0, 'a', 'b'); // 返回[],a是[1, 2, "a", "b", 3, 4, 5]
a.splice(2, 2, [1, 2], 3); // 返回["a", "b"],a是[1, 2, [1, 2], 3, 3, 4, 5]

区别于concat()splice()会插入数组本身而非数组的元素。

7. push()和pop()

push()pop()方法允许将数组当做栈来调用。push() 方法在数组的尾部添加一个或多个元素,并返回数组新的长度。pop() 方法则相反:它删除数组的最后一个元素,减小数组长度并返回它删除的值。两个方法都修改并替换原始数组而非生成一个修改版的新数组。组合使用push()pop() 能够用JavaScript数组实现现金后出的栈。例如:

1
2
3
4
5
6
7
8
var stack = [];     // stack: []
stack.push(1, 2); // stack: [1, 2]
stack.pop(); // stack: [1]
stack.push(3); // stack: [1, 3]
stack.pop(); // stack: [1]
stack.push([4, 5]); // stack: [1, [4, 5]]
stack.pop(); // stack: [1]
stack.pop(); // stack: []
8. unshift()和shift()

unshift()shift()方法的行为非常类似于push()pop(),不一样的是前者是在数组的头部而非尾部进行元素的插入和删除操作。 unshift() 在数组的头部添加一个或多个元素,并将已存在的元素移动到更高索引的位置来获得足够的空间,最后返回数组新的长度。shift()删除数组的第一个元素并将其返回,然后把所有随后的元素下移一个位置来填补数组头部的空缺。例如:

1
2
3
4
5
6
7
8
var a = [];            // a:[]
a.unshift(1); // a:[1] 返回:1
a.unshift(22); // a:[22, 1] 返回:2
a.shift(); // a:[1] 返回:22
a.unshift(3, [4, 5]); // a:[3, [4, 5], 1] 返回:3
a.shift(); // a:[[4, 5], 1] 返回:3
a.shift(); // a:[1] 返回:[4, 5]
a.shift(); // a:[] 返回:1

当使用多个参数调用 unshift()时它的行为很奇怪。参数是一次性插入的(就像splice()方法)而非一次一个地插入。这意味着最终的数组中插入的元素的顺序和它们在参数列表中的顺序一致。而假如元素是一次一个地插入,它们的顺序应该是反过来的。

8. toString()和toLocaleString()

数组和其他JavaScript对象一样拥有toString()方法。针对数组,该方法将其每个元素转化为字符串(如有必要将调用元素的toString()方法)并且输出用逗号分隔的字符串列表。但是要注意输出不包括方括号或其他任何形式的包裹数组值的分隔符。例如:

1
2
3
[1, 2, 3].toString();       // 生成"1,2,3"
["a", "b", "c"].toString(); // 生成"a,b,c"
[1, [2, 'c']].toString(); // 生成"1,2,c"

这里于不适用任何参调用join()方法返回的字符串是一样的。
toLocaleString()toString()方法的本地化版本。它调用元素的toLocaleString()方法将每个数组元素转化为字符串,并且使用本地化(和自定义实现的)分隔符将这些字符串连接起来生成最终的字符串。

上次更新 2020-04-01