如果世界是一台编程大舞台，那么JavaScript 数组就是一支舞蹈团队，而数组方法则是舞者们的舞步。无论是翩翩起舞的“push”，还是轻盈旋转的“slice”，他们凭借着独特韵律，一起编织出美妙的编程乐章。这里整理了26个常用的数组方法，让我们一起看看吧。
数组遍历
for循环
for循环可以用于处理任何遍历或迭代的需要。并且可以在指定条件下中断循环。缺点是它需要显式地管理循环的索引和条件，比较繁琐。
const fruits = ["Apple", "Banana", "strawberry", "tangerine", "durian"]
for (var i = 0; i < fruits.length; i++) {
console.log(fruits[i], i)
}
forEach
forEach专门用于遍历数组，直接访问当前元素和索引。缺点是不可以中断，当不需要进行中断时，forEach是很好的选择。
const fruits = ["Apple", "Banana", "strawberry", "tangerine", "durian"]
arr.forEach((item, index) => {
console.log(item, index);
})
for…of
for...of 是ES6新增的方法，可以用于直接访问数组中每个元素的值，并且可以配合break、continue、 throw等语句提前结束循环。
缺点是无法获取索引，如果你想获取索引，使用for循环或者forEach更合适。
const fruits = ["apple", "banana", "strawberry", "tangerine", "durian"]
for (let fruit of fruits) {
console.log(fruit); // apple banana
if (fruit === 'banana') {
break
}
}
此外，for...of 还可以用于遍历字符串、Map、Set等。
const str = 'apple'
for (let key of str) {
console.log(key) // a p p l e
}
filter
该方法会过滤数组中的项，返回一个新数组，该新数组由所有执行函数后返回true的元素组成。
const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter(num => num > 3)
console.log(newArr) // [ 4, 5 ]
map
map方法主要用于运行指定的函数获取一个新数组，该方法不会改变原数组，如果你不想改变原数组，又想对元素进行处理后拿到一个新数组，可以选择用map。
const arr = [1, 2, 3, 4, 5]
const newArr = arr.map((value, index) => {
return value * 2
})
console.log(newArr) // [ 2, 4, 6, 8, 10 ]
reduce
reduce方法主要用于将数组中每个元素执行完指定的函数后，输出一个最终的结果。reduce的使用场景有很多，比如求和、求积、找最大值和最小值，或者将数组元素转成一个对象等。并且reduce方法不会改变原来的数组。
reduce的接受两个参数，第一个参数为执行的函数，第二个参数为累加器的初始值。具体实现如下：
求和
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, num) => {
return accumulator + num
}, 10)
console.log(sum); // 15
求最大值
let numbers = [5, 3, 9, 8, 4, 2];
let max = numbers.reduce((accumulator, value) => Math.max(accumulator, value));
console.log(max); // 9
上面的accumulator标识上一次累加的结果。
查找数组中的指定内容
find
find的方法返回第一个符合条件的元素（即执行函数返回的true的项），如果数组中没有一项符合条件，则返回undefined。
let numbers = [{ number: 1 }, { number: 2 }, { number: 3 }, ]
const isLargeItem = numbers.find((obj) => {
return obj.number > 1;
})
console.log(isLargeItem) // { number: 2 }
findIndex
findIndex方法返回第一个符合条件的元素的索引（即执行函数返回的true的项的索引），与find方法类似，但是注意这里返回的是索引而不是值。如果数组中没有一项符合条件，则返回-1。
let numbers = [1, 2, 3]
const isLargeNumber = numbers.findIndex((value) => {
return value > 1;
})
console.log(isLargeNumber) // 1
lastIndexOf
lastIndexOf返回数组中符合条件的最后一个元素的索引，如果不存在，则返回-1。
lastIndexOf接受两个参数：
- 第一个参数：表示要查找的元素
- 第二个参数：指定开始搜索的位置
let numbers = [5, 3, 9, 8, 6, 3, 2]
console.log(numbers.lastIndexOf(3)) // 5
console.log(numbers.lastIndexOf(3, 3)) // 3
some
some 用于检查数组中是否有符合条件的项，只要数组中有一个项是满足条件的，就返回true，如果一项都没有，则返回false。
let numbers = [5, 3, 9, 8, 6, 3, 2]
const flag = numbers.some(value => value >= 9)
console.log(flag) // true
every
every 用于检查数组中所有的项是否都满足指定的条件，如果是，则返回true，但是只要有一项都不满足条件的，都会返回false。
let numbers = [5, 3, 9, 8, 6, 3, 2]
const flag = numbers.every(value => value > 3)
const flag2 = numbers.every(value => value >= 2)
console.log(flag) // false
console.log(flag2) // true
includes()
includes()方法判断数组中是否包含指定的元素，包含则返回true, 否则返回false。
const arr = [1, 2, 3, 4, 5]
console.log(arr.includes(3)) // true
console.log(arr.includes(6)) // false
*值得注意的是，当数组中含有NaN时，使用includes()方法也会返回true。这是includes()方法方法与indexOf()方法的重要区别，当元素值为NaN时，使用indexOf()方法则会返回-1，相当于false。
let arr = [1, 2, NaN, 4, 5];
console.log(arr.includes(NaN)) // true
console.log(arr.indexOf(NaN)) // -1
此外includes()方法还可用于查找字符串中是否含有指定的内容：
const str = 'hello world'
console.log(str.includes('hello')) // true
indexOf()
indexOf()方法返回数组中指定元素的下标，如果不存在则返回-1。
const arr = [1, 2, 3, 4, 5]
console.log(arr.indexOf(3)) // 2
同includes(), indexOf()方法也可用于查找字符串：
const str = 'hello'
console.log(str.indexOf('o')) // 4
at()
at()方法接收一个整数值作为参数并返回该索引对应的元素，允许使用正整数和负整数作为索引。如果索引位置超过数组长度，将返回undefined
let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.at(1)) // 'b'
console.log(arr.at(-1)) // 'e'
at()方法的优点是它允许使用负索引来访问数组的尾部元素，这是传统数组索引做不到的
*值得注意的是，at()方法对于低版本的浏览器有兼容性问题，使用时需要注意。
数组操作
reverse()
reverse()方法用于反转数组中元素的顺序。该方法会改变原始数组，并返回新的数组。
const arr = [1, 2, 3, 4, 5]
const newArr = arr.reverse()
console.log(arr) // [ 5, 4, 3, 2, 1 ]
console.log(newArr) // [ 5, 4, 3, 2, 1 ]
sort()
sort()方法用于数组的排序，该方法会改变原始数组，并返回新的数组。值得注意的是，排序是基于字符串的Unicode编码进行的，而不是基于数组的大小。
let arr = [11, 2, 22, 1];
arr.sort()
console.log(arr) // [ 1, 11, 2, 22 ]
可以看出，上面的排序2在11的后面，并不是根据数组大小进行排序的，如果想要根据数字大小排序，可以提供一个比较函数作为参数。
let arr = [11, 2, 22, 1]
const newArr = arr.sort((a, b) => a - b)
console.log(newArr) // [ 1, 2, 11, 22 ]
console.log(arr) // [ 1, 2, 11, 22 ]
push()
push()方法用于在数组末尾添加一个或者多个元素，该方法会改变原数组，并返回一个新数组的长度。
const fruits = ['apple', 'banana']
const newLen = fruits.push('durian')
console.log(newLen) // 3
console.log(fruits) // [ 'apple', 'banana', 'durian' ]
pop()
pop()方法用于删除数组末尾的元素，该方法会改变原数组，并返回被删除的元素。
const fruits = [ 'apple', 'banana', 'durian', 'tangerine', 'strawberry' ]
const element = fruits.pop()
console.log(fruits) // [ 'apple', 'banana', 'durian', 'tangerine' ]
console.log(element) // strawberry
unshift()
unshift()方法用于在数组的开头添加一个（或多个）元素，该方法会改变原数组，并返回新数组的长度。
const fruits = ['apple', 'banana']
const newLen = fruits.unshift('durian')
console.log(newLen) // 3
console.log(fruits) // [ 'durian', 'apple', 'banana' ]
shift()
shift()方法用于删除数组的第一个元素，该方法会改变原数组，并返回被删除的元素。
const fruits = [ 'apple', 'banana', 'durian', 'tangerine', 'strawberry' ]
const element = fruits.shift()
console.log(fruits) // [ 'banana', 'durian', 'tangerine', 'strawberry' ]
console.log(element) // apple
splice()
splice()方法主要在数组中添加/删除项，然后返回被删除的项。该方法会改变原始数组。它接收的参数是：(1)开始的位置，(2)删除元素的数量，(3)要添加进数组的元素(可选)。
添加元素
const fruits = [ 'apple', 'banana', 'durian']
fruits.splice(1, 0, 'tangerine')
console.log(fruits) // [ 'apple', 'tangerine', 'banana', 'durian' ]
删除元素
const fruits = [ 'apple', 'banana', 'durian']
fruits.splice(1, 1)
console.log(fruits) // [ 'apple', 'durian' ]
slice
slice()从已有的数组中返回选定的元素，该方法会返回一个新数组，不改变原始数组。它接收的参数是：(1)开始选取的位置(包含当前位置)，(2)结束选取的位置(不包含当前位置，可选)。
const fruits = [ 'apple', 'banana', 'durian', 'tangerine', 'strawberry' ]
const selectedFruits = fruits.slice(1, 2)
console.log(selectedFruits) // [ 'banana' ]
此外，slice()还可以用于截取字符串：
const str = 'Hello World！'
const newStr = str.slice(0, 5)
console.log(newStr) // Hello
如果参数是负数，slice() 会从字符串的末尾开始计数：
const str = 'Hello World！'
const newStr = str.slice(-1)
console.log(newStr) // ！
concat()
concat()方法用于合并两个或更多数组并返回新的数组，而不会修改原始数组。
const arr1 = [1, 3]
const arr2 = [3, 4, 5]
const arr3 = [6]
const concatArr = arr1.concat(arr2, arr3)
console.log(concatArr) // [ 1, 3, 3, 4, 5, 6 ]
该方法还可以添加单个元素到数组中：
const fruits = ['apple', 'banana']
const newFruits = fruits.concat('durian')
console.log(newFruits) // [ 'apple', 'banana', 'durian' ]
join()
join()方法主要用于把数组用分隔符转成字符串，分隔符不传默认为,。
const fruits = [ '1', '2', '3' ]
console.log(fruits.join()) // 1,2,3
console.log(fruits.join('')) // 123
console.log(fruits.join('-')) // 1-2-3
创建数组
Array.of()
Array.of()是JavaScript的内置函数，它创建一个新的Array实例，从传入参数中获取元素。
Array.of(1) // [1]
Array.of(1, 2, 3) // [1, 2, 3]
Array.of()初始化数组
const arr = Array.of(...Array(5).keys())
console.log(arr) // [ 0, 1, 2, 3, 4 ]
Array.from()
Array.from()是 JavaScript 的一个内置函数，它可以将类数组或可迭代的对象转成数组。
将字符串转换成字母组成的数组
const str = 'Hello'
const arr = Array.from(str)
console.log(arr) // [ 'H', 'e', 'l', 'l', 'o' ]
将set转成Array
let set = new Set(['a', 'b', 'c'])
const arr = Array.from(set)
console.log(arr) // [ 'a', 'b', 'c' ]
Array.from()还可以接收一个映射函数作为第二个参数，用来修改新数组的每一个元素。
const arr = Array.from([1, 2, 3], x => x + x)
console.log(arr) // [ 2, 4, 6 ]
Array.from()初始化一个数组
const arr = Array.from({ length: 5 }, (v, i) => i)
console.log(arr) // [ 0, 1, 2, 3, 4 ]
原文链接：https://juejin.cn/post/7325739662034976818 作者：前端一叶子
