数组操作方法大全（包括ES6方法）

一、concat()——连接两个或多个数组。该方法不会改变原数组，仅会返回被连接数组的一个副本

var arr1 = [1,2,3];
var arr2 = [4,5];
var arr3 = arr1.concat(arr2);
console.log(arr1);     //[1, 2, 3]
console.log(arr3);     //[1, 2, 3, 4, 5]

二、join()——把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的，默认使用“,”分隔，不会改变原数组

var arr = [2,3,4];
console.log(arr.join());     //2,3,4
console.log(arr);     //[2, 3, 4]

三、push()——向数组的末尾添加一个或多个元素，并返回新的长度。末尾添加，返回的是长度，会改变原数组。push方法可以一次添加多个元素push(data1,data2….)

var a = [2,3,4];
var b = a.push(5);
console.log(a);     //[2,3,4,5]
console.log(b);     //4

四、pop()——删除并返回数组的最后一个元素。返回最后一个元素，会改变原数组

var arr = [2,3,4];
console.log(arr.pop());     //4
console.log(arr);     //[2,3]

五、shift()——删除数组的第一个元素。返回第一个元素，会改变原数组

var arr = [2,3,4];
console.log(arr.shift());     //2
console.log(arr);     //[3,4]

六、unshift()——向数组的开头添加一个或多个元素，并返回新的长度。开头添加，返回的是长度，会改变原数组。unshift方法可以一次添加多个元素push(data1,data2….)

var arr = [2,3,4,5];
console.log(arr.unshift(3,6));     //6
console.log(arr);     //[3, 6, 2, 3, 4, 5]

七、slice()——返回一个新的数组，包含从start到end（不包括该元素）的arrayObject中的元素。返回选定的元素，不会改变原数组

var arr = [2,3,4,5];
console.log(arr.slice(1,3));     //[3,4]
console.log(arr);     //[2,3,4,5]

八、splice()——删除从index处开始的零个或多个元素，并且用参数列表中的一个或多个值来替换被删除的元素。如果从arrayObject中删除了元素，则返回的是含有被删除元素的数组，该方法会直接对数组进行修改（第二个参数是0，代表的是添加元素，不是0代表的是删除元素）

var a = [5,6,7,8];
console.log(a.splice(1,0,9));     //[]
console.log(a);      // [5, 9, 6, 7, 8]
var b = [5,6,7,8];
console.log(b.splice(1,2,3));     //[6, 7]
console.log(b);     //[5, 3, 8]

九、substring()和substr()

1、相同点：如果只有一个参数，两者的作用一样，都是截取字符串从当前下标开始直到字符串最后的字符串片段 substr(startIndex); substring(startIndex);

var str = '123456789';
console.log(str.substr(2));       //  "3456789"
console.log(str.substring(2));     //  "3456789"

2、不同点：第二个参数：substr（startIndex,lenth）： 第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；substring（startIndex, endIndex）： 第二个参数是截取字符串最终的下标 （截取2个位置之间的字符串，‘含头不含尾’）

console.log("123456789".substr(2,5));       //  "34567"
console.log("123456789".substring(2,5));     //  "345"

十、sort()——按照 Unicode Code 位置排序，默认升序，会改变原数组

var fruit = ['cherries', 'apples', 'bananas'];
console.log(fruit.sort());     // ['apples', 'bananas', 'cherries']
var scores = [1, 10, 21, 2];
console.log(scores.sort());     // [1, 10, 2, 21]
console.log(scores) ;           // [1, 10, 2, 21]

十一、reverse()——颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组

var arr = [2,3,4];
console.log(arr.reverse());     //[4, 3, 2]
console.log(arr);     //[4, 3, 2]

十二、indexOf() 和 lastIndexOf()——都接受两个参数：查找的值、查找的起始位置。如果不存在，返回 -1，存在，返回位置。indexOf是从前往后查找，lastIndexOf是从后往前查找

var a = [2, 9, 9];
a.indexOf(2);     // 0
a.indexOf(7);     // -1
​
if (a.indexOf(7) === -1) {
    // element doesn't exist in array
}

var numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2);     // 3
numbers.lastIndexOf(7);     // -1
numbers.lastIndexOf(2, 3);     // 3
numbers.lastIndexOf(2, 2);     // 0
numbers.lastIndexOf(2, -2);      // 0
numbers.lastIndexOf(2, -1);      // 3

十三、every()——对数组的每一项都运行给定的函数，每一项都返回true，则最后返回true

function isBigEnough(element, index, array) {
    return element < 10;
}    
console.log([2, 5, 8, 3, 4].every(isBigEnough));     // true

十四、some()——对数组的每一项都运行给定的函数，任意一项都返回 ture，则最后返回 true

function compare(element, index, array) {
    return element > 10;
}    
[2, 5, 8, 1, 4].some(compare);     // false
[12, 5, 8, 1, 4].some(compare);     // true

十五、filter()——对数组的每一项都运行给定的函数，返回结果为true的项组成的数组

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];
var longWords = words.filter(function(word){
    return word.length > 6;
});
console.log(longWords)     // ["exuberant", "destruction", "present"]

十六、map()——对数组的每一项都运行给定的函数，返回每次函数调用的结果组成的一个新数组，不会改变原数组

var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
    return x * 2;
});
console.log(doubles )     // [2, 10, 20, 30]
console.log(numbers )     // [1, 5, 10, 15]

十七、forEach()——数组遍历

const items = ['item1', 'item2', 'item3'];
const copy = [];    
items.forEach(function(item){
    copy.push(item)
});
console.log(copy)     // ['item1', 'item2', 'item3']

十八 、reduce()和 reduceRight()**

这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。

这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。

传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

下面代码用reduce()实现数组求和，数组一开始加了一个初始值10。

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum); //25

ES6新增的操作数组的方法

十九、find()——传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索

const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number"))     // 1

二十、findIndex()——传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，并终止搜索

const arr = [1, "2", 3, 3, "2"]
console.log(arr.findIndex(n => typeof n === "number"))     // 0
console.log(arr.findIndex(n => typeof n === "string"))     // 1

二十一、fill()——用新元素替换掉数组内的元素，可以指定替换下标范围，arr.fill(value, start, end)

const arr = [1, 2, 3, 4, 5]
console.log(arr.fill(10, 1, 3))     // [1, 10, 10, 4, 5]

二十二、copyWithin()——选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围，arr.copyWithin(target, start, end)

const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3))     // [1,2,3,1,2] 从下标为3的元素开始，复制数组，所以4, 5被替换成1, 2
const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(3, 1))      // [1,2,3,2,3] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，所以4, 5被替换成2, 3
const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.copyWithin(3, 1, 2))      // [1,2,3,2,5] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，结束位置为2，所以4被替换成2

二十三、from()——将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组

const bar = ["a", "b", "c"];
console.log(Array.from(bar));     // ["a", "b", "c"]
console.log(Array.from('foo'));     // ["f", "o", "o"]

二十四、of()——用于将一组值转换为数组。这个方法的主要目的是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异

console.log(Array());     // []
console.log(Array(3));     // [, , ,] 或 [ empty x 3 ]
console.log(Array(3, 11, 8));     // [3, 11, 8]
console.log(Array.of(7));       // [7]
console.log(Array.of(1, 2, 3));     // [1, 2, 3]
console.log(Array(7));          // [ , , , , , , ] 或 [ empty x 7 ]
console.log(Array(1, 2, 3));      // [1, 2, 3]

二十五、entries() 返回迭代器——返回键值对

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
    console.log(v)     // [0, 'a'] [1, 'b'] [2, 'c']
}
​
//Set
const arr1 = new Set(['a', 'b', 'c']);
for(let v of arr1.entries()) {
    console.log(v)     // ['a', 'a'] ['b', 'b'] ['c', 'c']
}
​
//Map
const arr2 = new Map();
arr2.set('a', 'a');
arr2.set('b', 'b');
for(let v of arr2.entries()) {
    console.log(v)     // ['a', 'a'] ['b', 'b']
}

二十六、values() 返回迭代器——返回键值对的value

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {
    console.log(v)     //'a' 'b' 'c'
}
​
//Set
const arr1 = new Set(['a', 'b', 'c']);
for(let v of arr1.values()) {
    console.log(v)     // 'a' 'b' 'c'
}
​
//Map
const arr2 = new Map();
arr2.set('a', 'a');
arr2.set('b', 'b');
for(let v of arr2.values()) {
    console.log(v)     // 'a' 'b'
}

二十七、keys() 返回迭代器——返回键值对的key

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.keys()) {
    console.log(v)     // 0 1 2
}
​
//Set
const arr1 = new Set(['a', 'b', 'c']);
for(let v of arr1.keys()) {
    console.log(v)     // 'a' 'b' 'c'
}
​
//Map
const arr2 = new Map();
arr2.set('a', 'a');
arr2.set('b', 'b');
for(let v of arr2.keys()) {
    console.log(v)     // 'a' 'b'
}

二十八、includes()——判断数组中是否存在该元素，参数：查找的值、起始位置，可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN，会判断错误

var arr = [1, 2, 3];
console.log(arr .includes(2));     // true
console.log(arr .includes(4));     // false
console.log(arr .indexOf(2))     // 1
console.log(arr .indexOf(4))     // -1