JavaScript数组方法整理

Array的原型方法

isArray()

Array.isArray(value)
检测value是否是数组

join()

arr.join(separator)
将数组用separator分隔，并返回分割后的字符串

var arr = ['red', 'green', 'blue'];
arr2 = arr.join('|'); // "red|green|blue"
arr3 = arr.join('');  // "redgreenblue"

reverse()

arr.reverse()
颠倒数组自身顺序

var arr = [1, 2, 3, 5, 12, 100, 4];
arr.reverse(); // [4, 100, 12, 5, 3, 2, 1]

sort()

arr.sort() or arr.sort(campare)
按升序排序数组项
排序时，会调用每个数组项的toString()方法，比较得到的字符串，以确定如何排序；
即使数组中每一项都是数值，比较的也是字符串；
传入比较函数，可以解决此问题

push()

arr.push()
接受任意数量的参数，并逐个添加到数组末尾，返回修改后数组的长度；
push()与pop()方法组成栈方法LIFO(Last-In-First-Out)；
push()与shift()方法组成队列方法FIFO(First-In-First-Out)；

var colors = ['blue'];
var len = colors.push('red', 'green');
console.log(len); // 3
console.log(colors.toString()); //blue,red,green

pop()

arr.pop()
移除数组最后一项，并返回该项，length值减一。

var colors = ['blue', 'red', 'green']
colors.pop();        // "green"
colors.toString();   // ["blue", "red"]
colors.length;       // 2

shift()

arr.shift()
移除数组第一项，并返回该项，并返回该项，length值减一。

var colors = ['red','green', 'blue'];
var item = colors.shift();
console.log(item);    // red
console.log(colors);  // ["green", "blue"]

unshift()

arr.unshift()
在数组前端添加任意个项，并返回新数组的长度。

var colors = ['red'];
var len = colors.unshift('green', 'blue');
console.log(len); // 3
console.log(colors); // ["green", "blue", "red"]

concat()

arr.concat(arrX,arrX, ..., arrX)
先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。
可以用来复制数组：不给concat()传递参数的情况下，只是复制当前数组并返回该副本。

var colors = ['red','green', 'blue'];
var newColors = colors.concat('yellow', ['pink', 'black']);
var newColors2 = colors.concat(); // 复制当前数组
console.log(colors);        // ["red", "green", "blue"]
console.log(newColors);     // ["red", "green", "blue", "yellow", "pink", "black"]
console.log(newColors2);    // ["red", "green", "blue"]

slice()

arr.slice(start, end)

• 基于当前数组中一个或多个项创建一个新数组。

• slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。

  • 0个参数：复制当前数组并返回该副本；
  • 1个参数：从该参数指定位置开始到当前数组末尾的所有项；
  • 2个参数：返回起始和结束位置之间的项[start, end),不包含结束位置的项；

var arr = [1, 2, 3, 4, 5, 6, 7, 8];
var arr2 = arr.slice();
var arr3 = arr.slice(2);
var arr4 = arr.slice(2, 5);

console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr3); // [3, 4, 5, 6, 7, 8]
console.log(arr4); // [3, 4, 5]

splice()

arr.splice(startIndex, count, item1, ..., itemN)

• 参数说明

  • startIndex:必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
  • count:必需。要删除的项数。如果设置为 0，则不会删除项目。
  • item1, ..., itemX:可选。向数组添加的新项目。

• 返回值：

  • 始终返回一个数组,该数组中包含从原始数组中删除的项（若没有删除任何项，则返回一个空数组）

功能	描述	举例
删除	删除任意数量的项,只需指定2个参数； 要删除的第一项的位置、要删除的项数；	splice(1, 2)
插入	向指定位置插入多个项，只需提供3个参数； 起始位置，0（要删除的项数）、要插入的项；	splice(1, 0, 'yellow', 'purple')
替换	向指定位置插入任意数量的项，且同时删除任意数量的项； 起始位置、要删除的项数、要插入的任意数量的项	splice(2, 2, 'white', 'black')

var colors = ["red", "green", "blue", "pink"];
// 删除
var removed = colors.splice(1, 2); 
console.log(colors); // ["red", "pink"]
console.log(removed);// ["green", "blue"]
// 插入
removed = colors.splice(1, 0, 'yellow', 'purple');
console.log(colors);  // ["red", "yellow", "purple", "pink"]
console.log(removed); // []
// 替换
removed = colors.splice(1, 2, 'white', 'black');
console.log(colors);  // ["red", "white", "black", "pink"]
console.log(removed); // ["yellow", "purple"]

迭代方法

以下5个迭代方法均为ECMAScript新增。

forEach()

arrayObject.forEach(function(currentValue, index, array))

• 对数组中的每一项运行给定函数；
• 没有返回值；

var numbers = [1,2,3,4,5];
numbers.forEach(function(item, index, arr){
    console.log(item + " | " + index + " | " + arr.valueOf());
});

// 1 | 0 | 1,2,3,4,5
// 2 | 1 | 1,2,3,4,5
// 3 | 2 | 1,2,3,4,5
// 4 | 3 | 1,2,3,4,5
// 5 | 4 | 1,2,3,4,5

map()

arrayObject.map(function(currentValue, index, array))

• 对数组中对每一项运行给定函数；
• 返回每次函数调用对结果组成对数组；

var numbers = [1,2,3,4,5];
var newNumbers = numbers.map(function(item, index, arr){
    console.log(item + " | " + index + " | " + (numbers === arr));
    return item * 2;
});
console.log(newNumbers);
// 1 | 0 | true
// 2 | 1 | true
// 3 | 2 | true
// 4 | 3 | true
// 5 | 4 | true
// [2, 4, 6, 8, 10]

filter()

arrayObject.filter(function(currentValue, index, array))

• 对数组中对每一项运行给定函数；
• 返回该函数会返回true的项组成对数组；

var numbers = [1,2,3,4,5];
var newNumbers = numbers.filter(function(item, index, arr){
    console.log(item + " | " + index + " | " + (numbers === arr));
    return item % 2 === 0;
});
console.log(newNumbers); // [2, 4]

every()

arrayObject.every(function(currentValue, index, array))

• 对数组中对每一项运行给定函数；
• 如果该函数对每一项都返回true,则返回true;

var numbers = [1,2,3,4,5];
var everyResult = numbers.every(function(item, index, arr){
    console.log(item + " | " + index + " | " + (numbers === arr));
    return item % 2 === 0;
});
console.log(everyResult); // false

some()

arrayObject.some(function(currentValue, index, array))

• 对数组中对每一项运行给定函数；
• 如果该函数对人意项返回true,则返回true；

var numbers = [1,2,3,4,5];
var someResult = numbers.every(function(item, index, arr){
    console.log(item + " | " + index + " | " + (numbers === arr));
    return item > 0;
});
console.log(someResult); // true

归并方法

reduce()

arrayObject.reduce(function(prev, cur, index, array))

• 参数：

  • prev: 必需，初始值, 或者计算结束后的返回值。第一次迭代时为数组对第一项；
  • cur : 必需，当前迭代的元素；
  • index: 可选，当前元素对索引；
  • array: 可选，当前元素所属的数组对象；
• 迭代数组对所有项，将数组元素计算为一个值（从左到右➡️➡️）
• function(prev, cur, index, array)这个函数每次返回的任何值会作为第一个参数自动传给下一项；

var nums = [1,2,3,4,5];
var sum = nums.reduce(function(prev, cur, index, array){
    console.log(prev + ' | ' + cur + ' | ' + index + ' | ' + (nums===array))
    return prev + cur;
});
console.log('sum = ' + sum);

// prev  | cur | index | (nums===array)
// 可见第一次迭代发生在数组对第2项上，第一个参数是数组对第1项，第二个参数为第二项
// 1     | 2   | 1     | true  
// 3     | 3   | 2     | true
// 6     | 4   | 3     | true
// 10    | 5   | 4     | true
// sum = 15

reduceRight()

arrayObject.reduce(function(prev, cur, index, array))

• reduceRight()与reduce()功能相似，从数组对最后一项开始，向前遍历到第一项；

• 参数：

  • prev: 必需，初始值, 或者计算结束后的返回值。第一次迭代时为数组对最后一项；
• 迭代数组对所有项，将数组元素计算为一个值（从右到左⬅️⬅️）

var nums = [1,2,3,4,5];
var sum = nums.reduceRight(function(prev, cur, index, array){
    console.log(prev + ' | ' + cur + ' | ' + index + ' | ' + (nums===array))
    return prev + cur;
});
console.log('sum = ' + sum);

// prev| cur | index | (nums===array)
// 5   | 4   | 3     | true
// 9   | 3   | 2     | true
// 12  | 2   | 1     | true
// 14  | 1   | 0     | true
// sum = 15