Array数组常用方法总结（javascript版）

不改变原数组的方法

‌1. concat()‌
合并数组，返回一个新数组，原数组不变。
语法：array1.concat(array2[, array3[,...,arrayX]])
['a'].concat(['b'],['c']) // 原数组不变，return [a,b,c]

2. slice()🌟
slice译为切片，提取数组的一部分，返回一个新的数组，原数组不变。
语法：slice([start[, end]])，start可选，默认0，end可选，默认最大索引。
['a','b','c'].slice(1, 2) // 原数组不变，return 切片数组['b']

‌3. forEach()‌
‌遍历数组，无返回值。
语法：array.forEach(function(currentValue[, index[, arr]]), [thisValue])。thisValue可选，对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
如果省略了 thisValue ，“this” 的值为 “undefined”

‌4. map()‌——ES6
遍历数组，返回一个新数组。
语法：array.map(function(currentValue[, index[, arr]]), [thisValue])，thisValue可选。

‌5. filter()‌——ES6
筛选数组，返回符合条件的元素组成的新数组。
语法：array.filter(function(currentValue[, index[, arr]]), [thisValue])，thisValue可选。

‌6. find()‌——ES6
找到第一个符合条件的元素。若没有找到，返回undefined。
语法：array.find(function(currentValue[, index[, arr]]), [thisValue])，thisValue可选。
‌7. findIndex()‌——ES6
找到第一个符合条件的元素的下标。若没有找到，返回-1。
语法：array.findIndex(function(currentValue[, index[, arr]]), [thisValue])，thisValue可选。
‌8. some()‌——ES6
判断数组中是否有元素满足条件。
语法：array.some(function(currentValue[, index[, arr]]), [thisValue])，thisValue可选。
‌9. every()‌——ES6
判断数组中是否有元素满足条件。
语法：array.every(function(currentValue[, index[, arr]]), [thisValue])，thisValue可选。
‌10. includes()‌——ES6
判断数组中是否包含某个元素。
‌数组‌语法：array.includes(element[, start])
‌字符串‌语法：string.includes(substring, start)
只能搜索基本元素，不能搜索对象等复杂类型，搜索对象要用find、some等。
['a','b','c'].includes('c') // true
[{a:1}].includes({a:1}) // false
‌11. indexOf()‌
‌查找元素在数组中第一次出现的位置。
语法：array.indexOf(item[, start])
只能搜索基本元素。
['a','b','c'].indexOf('c') // 2
[{a:1}].indexOf({a:1}) // -1
‌12. lastIndexOf()‌
查找元素在数组中的最后一个位置。
语法：array.indexOf(item[, start])，item是要找的元素（只能搜索基本元素），start是从哪个索引开始找，可选，默认0。
['c','a','b','c'].lastIndexOf('c') // 3
[{a:1}].lastIndexOf({a:1}) // -1

‌13. join()‌
‌将数组元素连接成一个字符串。
语法：array.join([separator])，separator可选，默认逗号。
[111,222].join() // '111,222'
[{a:1},3].join() // "[object Object],3"
['a','b','c'].join('、') // 原数组不变，return 'a、b、c'
‌14. toString()‌
‌将数组转换为字符串。
语法：array.toString()
效果等于array.join()

‌15. Array.isArray()‌
‌判断一个对象是否是数组。
语法：Array.isArray(array)‌

‌16. keys()‌——ES6
返回键的迭代器。
语法‌：array.keys()
Object.keys([111,222]) // ["0", "1"]
[111,222].keys() // Array Iterator[0,1]
‌17. values()‌——ES6
返回值的迭代器。
语法‌：array.values()
[111,222].values() // Array Iterator[111,222]
‌18. entries()‌——ES6
‌返回数组的键值对迭代器‌。
语法‌：array.entries()
[111,222].entries() // Array Iterator[[0, 111],[1, 222]]
可用于遍历二维数组、排序等。

怎么遍历迭代器‌？🌟

for…of循环
next()
iterator.next()返回一个对象，对于有元素的数组，是{value: item1, done: false}。next.done用于指示迭代器是否完成，每次迭代时更新且为false，直到迭代器结束时为true。

const iterator = [111,222].entries();
// iterator类似于[{value: 111, done: false}, {value: 222, done: false}, {value: undefined, done: true}]
for(let item of iterator) {...
}
let entry = iterator.next();
while (!entry.done) {console.log(entry.value); //打印111=>打印222entry = iterator.next();
}

19. reduce()🌟——ES6
用于将一个数组中的值逐个累加或处理，最后获得一个单一的值。使用场景：数组求和、二维数组转一维、数组去重、按属性分类、替代filter和map等。
语法：arr.reduce(callback, [initialValue])

callback
- 参数
  - previousValue：上次回调返回的值 / 初始值
  - currentValue：当前元素值
  - currentIndex：当前索引
  - array：调用reduce的数组
- 返回值
  - 上一次回调的返回值将作为下一次回调的previousValue
  - 一定要记得return，否则下一次回调的previousValue就变成undefined了
initialValue
- 第一次调用callback时，用initialValue作为previousValue。
- 若不写initialValue，则callback从arr[1]开始，将arr[0]第一次的previousValue。

const sum = [1,2,3].reduce((prev,curr) => prev + curr, 0) // 原数组不变，return 1+2+3=6

20. reduceRight()🌟——ES6
反向的reduce()

‌21. Array.from()‌——ES6
arrayLike 转化成真数组。
参考：https://blog.csdn.net/JaxsonWang/article/details/101496076

Array.from({'0': 'a','1': 'b','2': 'c',length: 3
}) // ['a', 'b', 'c']
Array.from([1, 2, 3], item => item * item) // [1, 4, 9]

‌22. Array.of()‌——ES6
用于将一组值，转换为数组。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

‌23. flat()‌——ES6
将数组扁平化处理，返回一个新数组。
语法：array.flat([tierNum])，tierNum是要拉平数组的层数，默认一层。
[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]

‌24. flatMap()‌——ES6
先把原数组map，再返回扁平化后的map的结果，原数组不变。
语法：array.flatMap(callback(currentValue[, index[, array]])[, thisArg])

let arr = [1, 2, 3, 4];arr.flatMap(item => [item, item * 2]); // return [1, 2, 3, 6, 4, 8]// 相当于arr.map(item => [item, item * 2]).flat();// [1, 2, 3, 4] => [[1, 2], [3, 6], [4, 8]] => [1, 2, 3, 6, 4, 8]

‌25. …——ES6
[...'hello'] // ["h", "e", "l", "l", "o"]
const [a, ...rest] = [1,2,3] // a=1,rest=[2,3]
const arr = [1, ...[2, 3]] // arr=[1, 2, 3]

改变原数组的方法

1. push()
从尾插入，返回新长度
['a'].push('b','c') // 原数组变成[a,b,c]，return 3
2. pop()
从尾删除，返回被删除元素
['a','b','c'].pop() // 原数组变成[a,b]，return c
3. unshift()
从头插入，返回新长度
['c'].unshift('a','b') // 原数组变成[a,b,c]，return 3
4. shift()
从头删除，返回被删除元素
['a','b','c'].shift() // 原数组变成['b','c']，return 'a'

5. reverse()
颠倒数组中元素的顺序。
语法：array.reverse()
['a','b','c'].reverse() // 原数组变成['c','b','a']，return ['c','b','a']

6. fill()——ES6
将一个固定值替换数组的元素。
语法：array.fill(value[, start[, end]])
['a','b','c'].reverse() // 原数组变成['c','b','a']，return ['c','b','a']

7. splice()🌟
splice译为拼接，添加、删除or替换数组元素，并返回切片数组。
语法：splice(start[, deleteCount[, item1,item2,,,]])
['a','c'].splice(1,0,'b') // 原数组变成[a,b,c]，return 切片数组[]
['a','b','c'].splice(1) // 原数组变成[a]，return 被删除的切片数组[b,c]
['a','b','c'].splice(1,1,'b2') // 原数组变成['a','b2','c']，return 被替换的切片数组[b]

8. sort()——ES6🌟
对数组的元素进行排序。
语法：array.sort([compareFuc])
sort(compareFuc)，compareFuc可以用(a,b)=>return xx。若xx>0，则把b排在a前面，反之则把a排在b前面。(a,b)=>a-b则升序，(a,b)=>b-a则降序。
sort在数组小于10个元素时使用插入排序，数组更大时使用快速排序，对于在快速排序中产生的子数组也一样，小数组用插入排序，大数组用快速排序。
sort处理大量数据会比较慢。
[{name: 'a',age: 5},{name: 'b',age: 3},{name: 'c',age: 4}].sort() // 原数组变成排序后的数组，return 排序后的数组[{age: 3},{age: 4},{age: 5}]
[5,3,4].sort((a,b) => b-a) // 原数组变成排序后的数组，return 排序后的数组[5,4,3]

9. copyWithin()——ES6
‌将数组元素复制到数组中的另一个位置，覆盖现有值。
语法：array.copyWithin(target[, start[, end]])，复制索引start～索引end-1的切片数组（start默认0，end默认为arr.length），再从数组中的target索引处开始覆盖，直到超出数组原长度或切片数组贴完了。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 1); // 首先复制索引1到索引4的内容["Orange", "Apple", "Mango"]，再将其从索引2开始覆盖，fruits变成["Banana", "Orange", "Orange", "Apple"]// 或fruits.copyWithin(0, 3, 4); // 首先复制索引3到索引4-1的内容["Mango"]，再将其从索引0开始覆盖，fruits变成["Mango", "Orange", "Apple", "Mango"]