总结一下js中数组的一些方法
以下所有例子中的 arr 数组均为 [1, 2, 3, 4, 5]，并且每个例子之间的arr相互不影响
var arr = [1, 2, 3, 4, 5];
一、遍历（9种方法）
数组的遍历都
不会改变原数组
1. forEach
作用： 对数组进行遍历
返回值： undefined
var arr2 = arr.forEach((value, index) => {
console.log(value + "," + index); //1,0 |2,1 |3,2 |4,3 |5,4
return value + 1;
})
console.log(arr2); //undefined
2. map
作用： 对数组进行遍历
返回值： 新的数组
var ret = arr.map((value) => {
return value + 1;
})
console.log(ret); //[2,3,4,5,6]
3. every
作用：判断数组中的每一项是否满足条件，如果都满足，就返回true
返回值：true|false
var ret = arr.every((value) => {
return value > 2;
})
console.log(ret); //false
4. some
作用：判断数组中的每一项，如果有一项满足条件，就返回true
返回值：true|false
var ret = arr.some((value) => {
return value > 4;
})
console.log(ret); //true
5. reduce 迭代
作用：对数组进行迭代，然后两两进行操作，最后返回一个值
返回值：return出来的结果
var ret = arr.reduce((a, b) => {
return a + b;
})
console.log(ret); //15
6. filter 过滤
作用：筛选一部分元素
返回值：一个满足筛选条件的新数组
var ret = arr.filter((value) => {
return value > 3;
})
console.log(ret); //[4,5]
7. keys ES6新增
作用：对键遍历
返回值：Array Iterator
for (let index of arr.keys()) {
console.log(index);
}
// 0|1|2|3|4
8. values ES6新增
作用：对值遍历
返回值：Array Iterator
for (let index of arr.values()) {
console.log(index);
}
// 1|2|3|4|5
9. entries ES6新增
作用：对键值对遍历
返回值：Array Iterator
for (let [index,el] of arr.entries()) {
console.log(index,el);
}
// 0,1|1,2|2,3|3,4|4,5
二、截取数组
1. slice
作用：截取数组
返回值：截取出来的数组
是否改变原数组：否
参数：(2个)
- 参数1：开始截取的索引值，
- 参数2：结束截取的索引值，包前不包后
- 若只有一个参数则参数2默认为arr.length-1;
- 若参数为负数则索引值为arr.length + 该参数
- 若参数1大于参数2则返回空数组 (两个参数同非负或同负)
arr.slice(-2, -1) // [4]
arr.slice(4) // [5]
arr.slice(2, 0) // []
2. splice
作用：截取数组,把符合要求的元素从原数组中删除，然后返回这些元素
返回值：截取出来的数组
是否改变原数组：是
参数：(3个)
- 参数1：开始截取的索引值，
- 参数2：截取数组的长度
- 参数3：在删除元素的位置插入的新元素
arr.splice(0, 1); //[1]
arr.splice(0, 0, 1);//[] arr为[1, 1, 2, 3, 4, 5]
3. copyWithin ES6新增
作用：将指定位置(start-end)之间的成员复制到其他位置(target)（会覆盖原有成员）
返回值：改变后的数组
是否改变原数组：是
参数：(3个) 这三个参数都应该是数值，如果不是，会自动转为数值。
- target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
- start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
- end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。
arr.copyWithin(0, 3) //[4, 5, 3, 4, 5]
三、数组排序 sort
返回值：新数组
是否改变原数组：是
若直接使用sort()则其内部会自动调用toString方法将其转化为字符串按照字符串进行比较
var values = [0, 1, 5, 10, 15];
values.sort(); //0, 1, 10, 15, 5
// 从大到小
arr.sort((a, b) => {
return b - a;
});
// 从小到大
arr.sort((a, b) => {
return a - b;
});
四、反转数组 reverse
返回值：新数组
是否改变原数组：是
arr.reverse(); //[5, 4, 3, 2, 1]
五、拼接数组
1. concat
返回值：拼接后的新数组
是否改变原数组：否
参数：任意类型的值
arr.concat([6, 7, "a"]) //[1, 2, 3, 4, 5, 6, 7, "a"]
arr.concat(null, undefined, true) //[1, 2, 3, 4, 5, null, undefined, true]
2. 扩展运算符 ES6新增
返回值：拼接后的新数组
是否改变原数组：否
参数：数组
[...arr, ...[6,7,"a"]] //[1, 2, 3, 4, 5, 6, 7, "a"]
六、检测数组
1. typeof
作用：判断数组是什么类型的数据
返回值："object"
typeof(arr) // "object"
2. Array.isArray
作用：判断是否为数组
返回值：true | false
Array.isArray(arr) //true
Array.isArray({}) //false
3. instanceof Array
作用：判断是否为数组
返回值：true | false
arr instanceof Array //true
{} instanceof Array //false
4. 调用Array类型
作用：判断是否为数组
Object.prototype.toString.call(arr) //"[object Array]"
Object.prototype.toString.apply(arr) //"[object Array]"
5. constructor
作用： 通过判断数组的构造函数是否为Array判断是否是数组
arr.constructor == Array //true 表示为数组，false 表示非数组
七、转换数组
1. join
作用：把每一项的值取出来拼接,不传参数 默认使用逗号拼接,传入参数 会用这个参数去拼接每一项
返回值：字符串
是否改变原数组：否
参数：拼接方式
arr.join() //'1,2,3,4,5'
arr.join('-') //'1-2-3-4-5'
2. toString
作用：调用了join 把每一项的值取出来用逗号拼接
返回值：字符串
是否改变原数组：否
参数：无
arr.toString() //'1,2,3,4,5'
3. Array.from ES6新增
作用：将两类对象转为真正的数组
- 类似数组的对象（array-like object）
- 可遍历（iterable）的对象 （包括 ES6 新增的数据结构 Set 和 Map）
返回值：数组
参数：对象
let arrayLike = { length: 2, 0: 'a', 1: 'b' };
Array.from(arrayLike) //["a", "b"]
用处: 数组去重的简洁方法：
Array.from(new Set([1,1,1,1,2,3])) //[1,2,3]
[...new Set([1,1,1,1,2,3])] //[1,2,3]
4. Array.of ES6新增
作用：将一组值，转换为数组
返回值：数组
参数：任意值
Array.of(3, 11, 8) // [3,11,8]
Array.of(null, undefined, true) // [null, undefined, true]
Array.of(3).length // 1
八、增删方法, 除扩展运算符外都会改变原数组
1. push
作用：从后面追加元素
返回值：新数组的长度
参数： 追加的元素
arr.push(6, 7, 8) //8
2. pop
作用：从后面删除元素
返回值：删除的元素
参数： 无
arr.pop() //5
3. unshift
作用：从前面追加元素
返回值：新数组的长度
参数： 追加的元素
arr.unshift(0) //6
4. shift
作用：从前面删除元素
返回值：删除的元素
参数： 无
arr.shift() //1
5. 扩展运算符 ES6新增
作用：追加元素
返回值：新数组
是否改变原数组：否
[...arr, 6, 7] //[1, 2, 3, 4, 5, 6, 7]
九、查找元素
1. indexOf
作用：从左往右找到第一个匹配元素并把这个元素的索引返回，若无匹配值则返回-1
返回值：索引 | -1
是否改变原数组：否
参数：(2个) 匹配的元素，第n个匹配
var arr1 = ["a", "a", "z", "a", "x", "a"];
arr1.indexOf('a') // 0
arr1.indexOf('a', 4) // 5
arr1.indexOf('b') // -1
2. lastIndexOf
作用：从左往右找到找的是最后一个匹配元素并把这个元素的索引返回，若无匹配值则返回-1
返回值：索引 | -1
是否改变原数组：否
参数：匹配的元素
var arr1 = ["a", "a", "z", "a", "x", "a"];
arr1.lastIndexOf('a') // 5
arr1.lastIndexOf('b') // -1
3. includes ES6新增
作用：判断是否存在该元素，若存在则返回true，否则false
返回值：true | false
是否改变原数组：否
参数：匹配的元素
arr.includes(1) // true
arr.includes(8) // false
4. find ES6新增
作用：找出第一个符合条件的数组元素,返回符合条件的元素，没有符合条件的则返回undefined
返回值：元素 | undefined
是否改变原数组：否
参数：(2个)
- 回调函数（函数中的参数为：当前的值、当前的位置和原数组），
- 用来绑定回调函数的this对象。
arr.find((val, index, arr) => {
return val < 0
}) // undefined
arr.find((val, index, arr) => {
return val > 3
}) // 4
5. findIndex ES6新增
作用：找出第一个符合条件的数组元素,返回符合条件的元素的索引，没有符合条件的则返回-1
返回值：索引 | -1
是否改变原数组：否
参数：(2个)
- 回调函数（函数中的参数为：当前的值、当前的位置和原数组），
- 用来绑定回调函数的this对象。
arr.findIndex((val, index, arr) => {
return val < 0
}) // -1
arr.findIndex((val, index, arr) => {
return val > 3
}) // 3
十、填充数组 fill ES6新增
作用：使用给定值填充一个数组
返回值：新数组
是否改变原数组：是
参数：（3个）填充值，填充的起始位置，填充的结束位置
arr.fill(7) //[7, 7, 7, 7, 7]
arr.fill(7, 1, 2) //[1, 7, 3, 4, 5]
十一、数组扁平化 ES6新增
1. flat
作用：将嵌套数组扁平化，变成一维数组
返回值：新数组
是否改变原数组：否
参数：默认空的时候只拉平一层，如果参数为一个整数则表示拉平几层，如果不确定拉平几层则用Infinity关键字作为参数
[1, 2, [3, 4]].flat() // [1, 2, 3, 4]
[1, 2, [3, [4, [5, 6]]]].flat( Infinity ) // [1, 2, 3, 4, 5, 6]
2. flatMap
作用：先执行map()，然后将返回值组成的数组执行flat()
返回值：新数组
是否改变原数组：否
参数：
- 参数一：回调函数：( 函数中的参数：当前数组成员，当前数组成员的位置，原数组 )
- 参数二：用来绑定遍历函数里面的this
注：flatMap 只能展开一层数组
arr.flatMap(x => [x * 2]) // [2, 4, 6, 8, 10]
arr.flatMap(x => [[x * 2]]) // [[2], [4], [6], [8], [10]]
将下列数组扁平化，去重，从小到大排序
var arr1 = [
[11, 22, 22],
[13, 14, 15, 15],
[16, 17, 18, 19, [11, 12, [12, 13, [14]]]], 12
];
Array.from(new Set(arr1.flat(Infinity))).sort((a, b) => {
return a - b
})