跳到主要内容

Array 数组

数组方法​

白话理解，一看就懂

1. concat() 合并两个或多个数组​

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

语法：concat(value0, value1, /* … ,*/ valueN)
const array1 = ['a', 'b', 'c']
const array2 = ['d', 'e', 'f']
const array3 = array1.concat(array2)
console.log(array3)
// Expected output: Array ["a", "b", "c", "d", "e", "f"]

2. at() 查找数组中对应索引的值​

at() 方法接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。

语法：at(index)
const array1 = [5, 12, 8, 130, 44]
console.log(array1.at(1))
// 12
console.log(array1.at(-1))
// 44

3. copyWithin() 在数组内部复制替换自己的内容​

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

语法：copyWithin(target, start, end)
const array1 = ['a', 'b', 'c', 'd', 'e']

console.log(array1.copyWithin(1, 3, 5))
//  Array ["a", "d", "e", "d", "e"]

4. entries() 数组转数组迭代器，包含每个索引的键/值对。​

entries() 方法返回一个新的数组迭代器 (en-US)对象，该对象包含数组中每个索引的键/值对。

语法：entries()
const array1 = ['a', 'b', 'c']
const iterator1 = array1.entries()
console.log(iterator1.next().value)
// Array [0, "a"]
console.log(iterator1.next().value)
// Array [1, "b"]

5. every() 测试数组中的每个元素是否为真。​

every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。

语法：every(callbackFn)，every(callbackFn, thisArg)
const isBelowThreshold = (currentValue) => currentValue < 40
const array1 = [1, 30, 39, 29, 10, 13]
console.log(array1.every(isBelowThreshold))
// true

6. fill() 对数组中的内容进行替换填充；​

fill() 方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为 array.length）内的全部元素。它返回修改后的数组。

语法参数：fill(value, start, end)
const array1 = [1, 2, 3, 4]

// Fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4))
//  Array [1, 2, 0, 0]

// Fill with 5 from position 1
console.log(array1.fill(5, 1))
// Array [1, 5, 5, 5]

console.log(array1.fill(6))
// Array [6, 6, 6, 6]

7. filter() 根据条件筛查数组中的元素内容；​

filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。

语法参数：filter(callbackFn, thisArg)
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']
const result = words.filter((word) => word.length > 6)
console.log(result)
// Array ["exuberant", "destruction", "present"]

8. find() 查找数组中满足条件的第一个值；​

  • find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
  • findLast() 反向查找
语法参数：find(callbackFn, thisArg)
const array1 = [5, 12, 8, 130, 44]
const found = array1.find((element) => element > 10)
console.log(found)
// 12

9. findIndex() 查找数组中满足条件的第一个值的索引；​

  • findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。
  • findLastIndex() 反向查找
语法参数：findIndex(callbackFn, thisArg)
const array1 = [5, 12, 8, 130, 44]
const isLargeNumber = (element) => element > 13
console.log(array1.findIndex(isLargeNumber))
// 3

10. flat() 将多级数组压平​

flat() 方法创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中。

语法参数：flat() flat(depth)
const arr1 = [0, 1, 2, [3, 4]]
console.log(arr1.flat())
// Array [0, 1, 2, 3, 4]
const arr2 = [0, 1, [2, [3, [4, 5]]]]
console.log(arr2.flat())
// Array [0, 1, 2, Array [3, Array [4, 5]]]
console.log(arr2.flat(2))
// Array [0, 1, 2, 3, Array [4, 5]]
console.log(arr2.flat(Infinity))
// Array [0, 1, 2, 3, 4, 5]

11. flatMap()​

flatMap() 方法对数组中的每个元素应用给定的回调函数，然后将结果展开一级，返回一个新数组。它等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法（arr.map(...args).flat()），但比分别调用这两个方法稍微更高效一些。

语法参数：flatMap(callbackFn), flatMap(callbackFn, thisArg)
const arr1 = [1, 2, 1]
const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1))
console.log(result)
// Array [1, 2, 2, 1]

12. forEach() 循环输出数组每个元素​

forEach() 方法对数组的每个元素执行一次给定的函数。

语法参数：forEach(callbackFn),forEach(callbackFn, thisArg)
const array1 = ['a', 'b', 'c']
array1.forEach((element) => console.log(element))
// "a"
// "b"
// "c"

13. Array.from() 将字符串字符转成数组，将数组每个元素进行处理。​

Array.from() 静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例。 转换异步的可迭代对象到数组，可以使用 Array.fromAsync()。

语法：Array.from(arrayLike, mapFn, thisArg)
console.log(Array.from('foo'))
// Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], (x) => x + x))
// Array [2, 4, 6]

14. Array.fromAsync()​

Array.fromAsync() 静态方法可以由一个异步可迭代对象、可迭代对象或类数组对象创建一个新的、浅拷贝的 Array 实例。

15. includes() 数组中是否存在某个值​

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

includes 翻译： /ɪnˈkluːdz/ 包括

const array1 = [1, 2, 3]
console.log(array1.includes(2))
// true
const pets = ['cat', 'dog', 'bat']
console.log(pets.includes('cat'))
//  true
console.log(pets.includes('at'))
//  false

16. indexOf() 查找数组中某个值的索引​

  • indexOf() 方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。
  • lastIndexOf() 方法返回数组中给定元素最后一次出现的索引，如果不存在则返回 -1。该方法从 fromIndex 开始向前搜索数组。
语法：indexOf(searchElement, fromIndex)
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']
console.log(beasts.indexOf('bison'))
// Expected output: 1
// Start from index 2
console.log(beasts.indexOf('bison', 2))
// Expected output: 4
console.log(beasts.indexOf('giraffe'))
// Expected output: -1
语法：lastIndexOf(searchElement, fromIndex)
const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo']
console.log(animals.lastIndexOf('Dodo'))
// 3
console.log(animals.lastIndexOf('Tiger'))
// 1

17. map() 根据函数条件创建一个新数组​

  • map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
  • every() 判断每个元素是否为真。
map() 返回新数组
const array1 = [1, 4, 9, 16]
const map1 = array1.map((x) => x * 2)
console.log(map1)
// Array [2, 8, 18, 32]
every() 返回布尔值
const isBelowThreshold = (currentValue) => currentValue < 40
const array1 = [1, 30, 39, 29, 10, 13]
console.log(array1.every(isBelowThreshold))
// true

18. Array.of() 根据参数，创建新数组。​

Array.of() 静态方法通过可变数量的参数创建一个新的 Array 实例，而不考虑参数的数量或类型。

语法：Array.of(element0, element1, /* … ,*/ elementN)
console.log(Array.of('foo', 2, 'bar', true))
// Array ["foo", 2, "bar", true]
console.log(Array.of())
// Array []

19.pop() 删除 数组中最后一个元，返回该值​

  • pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。
  • shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法会更改数组的长度。
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']
console.log(plants.pop())
// "tomato"
console.log(plants)
// Array ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop()
console.log(plants)
// Array ["broccoli", "cauliflower", "cabbage"]

20. push() 添加 元素到数组的末尾，返回数组长度。​

push() 方法将指定的元素添加到数组的末尾，并返回新的数组长度。

const animals = ['pigs', 'goats', 'sheep']
const count = animals.push('cows')
console.log(count)
// 4
console.log(animals)
// Array ["pigs", "goats", "sheep", "cows"]
animals.push('chickens', 'cats', 'dogs')
console.log(animals)
// Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

21. reduce() 累加元素值​

  • reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
  • 第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被用作初始值，迭代器将从第二个元素开始执行（即从索引为 1 而不是 0 的位置开始）。
  • 下面的例子能够帮助你理解 reduce() 的用处——计算数组所有元素的总和：

react 的状态管理器 Redux 命名就是来源于此。Redux == Flux + reduce。所以 Redux 中的 Reducer 功能跟这个有点类似。​

const array1 = [1, 2, 3, 4]
// 0 + 1 + 2 + 3 + 4
const initialValue = 0
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
)
console.log(sumWithInitial)
// 10

22. reduceRight()​

  • reduceRight() 方法对累加器（accumulator）和数组的每个值（按从右到左的顺序）应用一个函数，并使其成为单个值。
  • 对于从左至右遍历的相似方法，请参阅 reduce()。
const array1 = [
  [0, 1],
  [2, 3],
  [4, 5],
]
const result = array1.reduceRight((accumulator, currentValue) =>
  accumulator.concat(currentValue)
)
console.log(result)
// Array [4, 5, 2, 3, 0, 1]

23.reverse() 反转数组中的元素​

  • reverse() 方法就地反转数组中的元素，并返回同一数组的引用。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。换句话说，数组中的元素顺序将被翻转，变为与之前相反的方向。

  • 要在不改变原始数组的情况下反转数组中的元素，使用 toReversed()。

reverse 翻译 /rɪˈvɜːrs/ 使反转

const array1 = ['one', 'two', 'three']
console.log('array1:', array1)
// "array1:" Array ["one", "two", "three"]
const reversed = array1.reverse()
console.log('reversed:', reversed)
// "reversed:" Array ["three", "two", "one"]
// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1)
// "array1:" Array ["three", "two", "one"]

24. shift() 删除 数组中第一个元素，返回该值。​

  • shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

  • shift 翻译 /ʃɪft/ 转移

  • shirt 衬衫

const array1 = [1, 2, 3]
const firstElement = array1.shift()
console.log(array1)
// Array [2, 3]
console.log(firstElement)
// 1

25. slice() 从数组中切出一块，组成新数组​

  • slice() 方法返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 start，不包括 end），其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。

  • slice 翻译 /slaɪs/ 片

语法：slice(start, end)
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']

console.log(animals.slice(2))
// Expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4))
// Expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5))
// Expected output: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2))
// Expected output: Array ["duck", "elephant"]
console.log(animals.slice(2, -1))
// Expected output: Array ["camel", "duck"]
console.log(animals.slice())
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

26. some() 数组中是否存在满足条件的值，返回布尔值​

  • some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false。它不会修改数组。

  • some 翻译 一些

语法：some(callbackFn, thisArg)
const array = [1, 2, 3, 4, 5]
// Checks whether an element is even
const even = (element) => element % 2 === 0
console.log(array.some(even))
// Expected output: true

27. sort() 数组元素排序​

  • sort() 方法就地对数组的元素进行排序，并返回对相同数组的引用。默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序。
  • 由于它取决于具体实现，因此无法保证排序的时间和空间复杂度。
  • 如果想要不改变原数组的排序方法，可以使用 toSorted()。
const months = ['March', 'Jan', 'Feb', 'Dec']
months.sort()
console.log(months)
// Array ["Dec", "Feb", "Jan", "March"]
const array1 = [1, 30, 4, 21, 100000]
array1.sort()
console.log(array1)
// Array [1, 100000, 21, 30, 4]

28. splice() 将内容粘接到数组内部中​

  • splice() 方法通过移除或者替换已存在的元素和/或添加新元素就地改变一个数组的内容。

  • 要创建一个删除和/或替换部分内容而不改变原数组的新数组，请使用 toSpliced()。要访问数组的一部分而不修改它，参见 slice()。

  • splice 翻译 /splaɪs/ 粘接

语法
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)
实例
const months = ['Jan', 'March', 'April', 'June']
months.splice(1, 0, 'Feb')
// Inserts at index 1
console.log(months)
// Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May')
// Replaces 1 element at index 4
console.log(months)
// Array ["Jan", "Feb", "March", "April", "May"]

29. toLocaleString()​

  • toLocaleString() 方法返回一个字符串，表示数组中的所有元素。每个元素通过调用它们自己的
  • toLocaleString 方法转换为字符串，并且使用特定于语言环境的字符串（例如逗号“,”）分隔开。
const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')]
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' })
console.log(localeString)
// Expected output: "1,a,12/21/1997, 2:12:00 PM",
// This assumes "en" locale and UTC timezone - your results may vary

30. toReversed()​

Array 实例的 toReversed() 方法是 reverse() 方法对应的复制版本。它返回一个元素顺序相反的新数组。

31. toSorted()​

Array 实例的 toSorted() 方法是 sort() 方法的复制方法版本。它返回一个新数组，其元素按升序排列。

// 不传入函数
toSorted()

// 传入箭头函数
toSorted((a, b) => {
  /* … */
})

// 传入比较函数
toSorted(compareFn)

// 內联比较函数
toSorted(function compareFn(a, b) {
  /* … */
})

32. toSpliced()​

Array 实例的 toSpliced() 方法是 splice() 方法的复制版本。它返回一个新数组，并在给定的索引处删除和/或替换了一些元素。

toSpliced(start)
toSpliced(start, deleteCount)
toSpliced(start, deleteCount, item1)
toSpliced(start, deleteCount, item1, item2, itemN)

33. toString() 将数组转成字符串​

const array1 = [1, 2, 'a', '1a']
console.log(array1.toString())
// "1,2,a,1a"

34. unshift() 添加 到数组开头，返回新长度​

unshift() 方法将指定元素添加到数组的开头，并返回数组的新长度。

const array1 = [1, 2, 3]
console.log(array1.unshift(4, 5))
// 5
console.log(array1)
// Array [4, 5, 1, 2, 3]

35. values()​

values() 方法返回一个新的数组迭代器 (en-US)对象，该对象迭代数组中每个元素的值。

const array1 = ['a', 'b', 'c']
const iterator = array1.values()
for (const value of iterator) {
  console.log(value)
}
// "a"
// "b"
// "c"

36. with()​

  • Array 实例的 with() 方法是使用方括号表示法修改指定索引值的复制方法版本。它会返回一个新数组，其指定索引处的值会被新值替换。
array.with(index, value)

37. join() 数组链接成字符串​

  • join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。
  • 如果数组只有一个元素，那么将返回该元素而不使用分隔符。
const elements = ['Fire', 'Air', 'Water']
console.log(elements.join())
// output: "Fire,Air,Water"
console.log(Array.prototype.join.call(elements))
// output: "Fire,Air,Water"

console.log(elements.join(''))
// output: "FireAirWater"
console.log(elements.join('-'))
// output: "Fire-Air-Water"