26个Javascript数组方法总结

如果世界是一台编程大舞台，那么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 ]