JavaScript数组方法整理

摘要：移除数组第一项，并返回该项，并返回该项，值减一。在数组前端添加任意个项，并返回新数组的长度。整数，规定添加删除项目的位置，使用负数可从数组结尾处规定位置。第一次迭代时为数组对最后一项迭代数组对所有项，将数组元素计算为一个值从右到左

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

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

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

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

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

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

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

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

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

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

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

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

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

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"]

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]

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


参数说明


startIndex:必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

count:必需。要删除的项数。如果设置为 0，则不会删除项目。

item1, ..., itemX:可选。向数组添加的新项目。



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

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新增。

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

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]

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]

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

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

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

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