JavaScript数组Array方法详解与实战

Array原型与方法概览

承接前文《Javascript数组Array基础介绍》，本文将深入剖析Array对象的所有可用方法。

在JavaScript中，所有数组方法均定义在Array.prototype上，值得注意的是，Array.prototype本身也是一个数组实例。

数组合并与字符串转换

array.concat()

该方法用于浅复制当前数组，并将接收到的参数附加到新数组的末尾。执行后原数组保持不变。

语法

array.concat(value1, value2, ..., valueN) 参数为需要合并的数组或非数组值

var arr1 = [1, 2, 3];
var obj = {animal : 'monkey'};
var arr2 = arr1.concat([4, 5, 6], obj, [7, 8, 9]);
// arr1 [1, 2, 3]
// arr2 [1, 2, 3, 4, 5, 6, {animal : 'monkey'}, 7, 8, 9]

obj.animal = 'tiger';
// [1, 2, 3, 4, 5, 6, {animal : 'tiger'}, 7, 8, 9]

concat可以合并数组或非数组值，但需注意：若包含对象，新数组中的对象仍引用原对象，修改会影响原数据。

array.join()

该方法返回一个字符串，将数组所有元素用指定的分隔符拼接而成，若未指定分隔符，默认使用逗号。

语法

array.join(seperator) 参数为分割符

var arr1 = [1, 2, 3];
var str = arr1.join(); // 1,2,3
str = arr1.join('#'); // 1#2#3

在组装大量字符串片段时，join方法的性能通常优于使用+运算符逐个拼接。

利用new Array(3)可以生成一个长度为三的空数组，结合join()方法可实现字符串的重复拼接。

var str = new Array(3).join('-+'); // -+-+

重复生成的字符串次数等于数组长度减一，因为字符串本身充当了分隔符的角色。

由于数组继承自Object，拥有toString()方法，利用它也能将数组拼接为字符串，但分隔符固定为逗号。

var arr1 = [1, 2, 3];
arr1.toString(); // 1,2,3

实际上，toString()会先调用数组中每个元素的toString()方法，再拼接结果。

数组元素增删操作

array.push()

该方法将一个或多个参数附加到数组末尾，并返回修改后的数组长度。此操作会直接改变原数组。

语法

array.push(value1, value2, ..., valueN); 实例

var arr1 = [1, 2, 3];
var len = arr1.push(4, 5);

console.log(len); // 5
console.log(arr1); // [1, 2, 3, 4, 5]

另一种在数组末尾插入值的方式是直接通过索引赋值，例如arr[arr.length] = value。

arr1[arr1.length] = 6; // [1, 2, 3, 4, 5, 6]  
array.pop()

pop方法用于删除数组最后一项，并返回被删除的元素。此操作会直接改变原数组。

var arr1 = [1, 2, 3];
arr.pop(); // [1, 2] 返回 3

如果数组为空，调用pop方法将返回undefined。

array.unshift()

该方法将一个或多个参数插入到数组头部，并返回修改后的数组长度。此操作会直接改变原数组。

var arr1 = [1, 2, 3];
var len = arr1.unshift(4, 5);

console.log(len); // 5
console.log(arr1); // [4, 5, 1, 2, 3]

array.shift()

该方法用于删除数组的第一项，并返回被删除的元素。此操作会直接改变原数组。

var arr1 = [1, 2, 3];
arr.shift(); // [2, 3] 返回 1

如果数组为空，调用shift方法将返回undefined。

数组排序、反转与切片

array.sort()

默认情况下，sort方法依据每个元素的toString()返回值进行字符串排序，因此通常无法得到预期的数值排序结果。

var arr1 = [1, 2, 3, 14, 24];
arr1.sort(); // [1, 14, 2, 24, 3]

sort方法可以接收一个自定义的比较函数。该函数接受两个参数，若希望第一个参数排在第二个参数前面，应返回负数；相等返回0；排在后面返回正数。默认行为为升序。

var compare = function(a, b){
  return a - b;
}

var arr2 = [1, 12, 2, 23, 3 , 5, 4];
arr2.sort(compare); // [1, 2, 3, 4, 5, 12, 23]

对于字符串排序，可以结合string.localeCompare()方法来实现更符合语言习惯的比较。

var arr3 = ['F', 'e', 'f', 'E'];
arr3.sort(function(a, b){
  return a.localeCompare(b);
});
// ['e', 'E', 'f', 'F'] 

array.reverse()

该方法用于反转数组元素的顺序，并返回数组自身引用。

var arr1 = [1, 4, 3, 2];
arr1.reverse(); // [2, 3, 4, 1]

array.slice()

该方法用于浅复制数组中的一段元素，不会改变原数组。

array.slice(start, end); 方法接受两个参数，第二个参数end可以省略，默认值为数组的长度。

var arr1 = [1, 2, 3, 4, 5, 6];

arr1.slice(4); // [5, 6]
arr1.slice(2, 4); // [3, 4]
arr1.slice(-3); // [4, 5, 6]

若传入负数，JavaScript会自动将其加上数组长度，转换为非负索引。 传入绝对值小于数组长度的负数，表示从后向前取对应数量的元素。例如示例中取了最后三个元素。

数组增删改与索引查找

array.splice()

这是数组中最强大且最常用的方法之一，支持删除、插入和替换操作。

语法

array.splice(start, count, item); 该方法移除一个或多个元素，并用新元素替代它们。start指定起始位置，count指定删除数量，item为新增加的元素（可多个，也可省略），方法返回被删除元素的数组。

var arr1 = [1, 2, 3, 4, 5];
//删除
arr1.splice(2, 1); // [1, 2, 4, 5] 返回 [3]
//插入
arr1.splice(3, 0, 6, 7); // [1, 2, 4, 6, 7, 5]
//替换
arr1.splice(1, 2, 8, 9); // [1, 8, 9, 6, 7, 5] 返回[2, 4]

接下来介绍ECMAScript5新增的方法，主要需要注意的是IE8及以下版本不支持这些方法。

indexOf() 与 lastIndexOf()

这两个方法用于查找指定项在数组中的索引位置。第二个参数表示查找起始位置，返回第一个匹配项的索引；若未找到则返回-1。 indexOf()从前往后查找，lastIndexOf()从后往前查找。

var arr1 = [1, 2, 3, 4, 3, 2, 1];
arr1.indexOf(2); // 1
arr1.indexOf(2, 3); // 5

arr1.lastIndexOf(3); // 4
arr1.lastIndexOf(3, 4) // 2

ES5数组迭代与归并方法

迭代方法

以下方法均接受两个参数：第一个是应用于每一项的回调函数，第二个是函数执行时的this作用域。 回调函数接收三个参数：当前项、当前位置索引、数组本身。

array.every()

对数组每一项运行给定函数，如果所有项都返回true，则最终返回true。

var arr1 = [1, 2, 3, 4, 5];
arr1.every(function(item, index, array){
  return item > 3;
});
// false

array.some()

对数组每一项运行给定函数，如果其中任意一项返回true，则最终返回true。

arr1.some(function(item, index, array){
  return item > 3;
});
// true

array.map()

对数组每一项运行给定函数，将每次调用的返回值组成一个新数组并返回。

arr1.map(function(item, index, array){
  return item * 2;
});
// [2, 4, 6, 8, 10]

array.filter()

对数组每一项运行给定函数，将返回true的元素以新数组形式返回。

arr1.filter(function(item, index, array){
  return item > 3;
});
// [4, 5]

array.forEach()

对数组每一项运行给定函数，不返回任何值。其功能类似于普通的for循环。

归并方法

归并方法接受两个参数：第一个是应用于每一项的自定义函数，第二个是作为归并基础的初始值。 自定义函数接收四个参数：前一项（累加器）、当前项、位置索引、数组本身。

array.reduce() 与 array.reduceRight()
var splitstr = function(prev, item, index, array){
  return prev + '#' + item;
}

var arr1 = [1, 2, 3, 4, 5];
arr1.reduce(splitstr, 8); // 8#1#2#3#4#5
arr1.reduceRight(splitstr, 8); // 8#5#4#3#2#1

小结

本文详细介绍了数组方法的诸多细节与注意事项，下一篇将介绍数组更高级的用法。此外，后续计划补充ECMAScript6新增的数组方法介绍。