js数组(Array)常用方法小结

575 阅读9分钟

前言

  • 数组方法那么多,你是否也会经常忘记或者搞混其中某个参数或者某个方法返回值?

  • 玩转数组方法是成为js大神的前提,没错,我就是那位js大神经常玩弄的人

  • 不用放心,下面会帮你重新再搞混一下,负负得正!

js数组常用实例方法

整合一下常用的数组方法,介绍每个方法的每个参数(带有简单使用代码举例)

Snipaste_2024-10-25_11-01-23.png Snipaste_2024-09-21_17-10-24.png

方法列表(常用)

(ps:👇点击即可跳转目标方法说明,点击方法标题回到列表目录,开袋即食,方便食用,入口即化~)

更新:markDown编辑器内可以跳转锚点,但是发布文章后PC端跳转不了,手机端可以正常跳转锚点

Snipaste_2024-11-05_16-36-53.png

1. join(separator) 👈点击方法回到目录(pc端跳转不了),下同

  • 参数: separator (可选) - 一个字符串,用于分隔数组中的每个元素,默认是逗号 ,
  • 使用场景: 需要将数组中的元素以特定分隔符转换为字符串时。

示例:

const arr = ['Hello', 'World'];
const str = arr.join(' '); // "Hello World"

2. push(element1, ..., elementN)

  • 参数: element1, ..., elementN - 要添加到数组末尾的元素,可以是多个。
  • 使用场景: 需要在数组末尾添加元素时。

示例:

const arr = [1, 2, 3];
arr.push(4, 5); // arr = [1, 2, 3, 4, 5]

3. pop()

  • 参数: 无。
  • 返回值: 被删除的元素。如果数组为空,返回 undefined
  • 使用场景: 需要从数组末尾删除元素时。

示例:

const arr = [1, 2, 3];
const last = arr.pop(); // last = 3, arr = [1, 2]

4. shift()

  • 参数: 无。
  • 返回值: 被删除的元素。如果数组为空,返回 undefined
  • 使用场景: 需要从数组开头删除元素时。

示例:

const arr = [1, 2, 3];
const first = arr.shift(); // first = 1, arr = [2, 3]

5. unshift(element1, ..., elementN)

  • 参数: element1, ..., elementN - 要添加到数组开头的元素,可以是多个。
  • 返回值: 新数组的长度。
  • 使用场景: 需要在数组开头添加元素时。

示例:

const arr = [2, 3];
arr.unshift(1); // arr = [1, 2, 3]

6. sort(compareFunction)

  • 参数: compareFunction (可选) - 一个用于排序的比较函数,接受两个参数,返回值决定它们的顺序:

    • 小于 0:ab 前面
    • 大于 0:ba 前面
    • 等于 0:保持原顺序
  • 使用场景: 需要对数组进行排序时。

注意点: 使用 sort() 时,如果不提供比较函数,可能不会按预期排序。

示例:

const arr = [3, 1, 2];
arr.sort(); // arr = [1, 2, 3] (按字符串排序)
arr.sort((a, b) => a - b); // arr = [1, 2, 3] (按数字排序)

7. reverse()

  • 参数: 无。
  • 返回值: 反转后的数组。
  • 使用场景: 需要反转数组时。

示例:

const arr = [1, 2, 3];
arr.reverse(); // arr = [3, 2, 1]

8. concat(value1, ..., valueN)

  • 参数: value1, ..., valueN - 要合并到数组中的值,可以是数组或单个值。
  • 返回值: 新数组,包含合并后的所有元素。
  • 使用场景: 需要连接数组时。

示例:

const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = arr1.concat(arr2, 5); // newArr = [1, 2, 3, 4, 5]

9. slice(start, end)

  • 参数:

    • start (可选) - 开始索引,包含。默认为 0。
    • end (可选) - 结束索引,不包含。默认为数组长度。
  • 返回值: 新数组,包含从 startend(不包括 end)的元素。

  • 使用场景: 需要获取数组的部分元素时。

示例:

const arr = [1, 2, 3, 4];
const newArr = arr.slice(1, 3); // newArr = [2, 3]

10. splice(start, deleteCount, item1, ..., itemN)

  • 参数:

    • start - 要修改的起始索引。
    • deleteCount - 要删除的元素个数。
    • item1, ..., itemN (可选) - 要添加的新元素。
  • 返回值: 被删除的元素数组(如果没有删除元素,则返回空数组)。

  • 使用场景: 需要在数组中添加或删除元素时。

示例:

const arr = [1, 2, 3];
const removed = arr.splice(1, 1, 4); // arr = [1, 4, 3], removed = [2]

11. reduce(callback(accumulator, currentValue, index, array), initialValue)

  • 参数:

    • callback: 执行累积计算的函数,接受以下参数:

      • accumulator: 累加器,累计计算的结果,或为 initialValue
      • currentValue: 当前正在处理的数组元素。
      • index (可选): 当前正在处理元素的索引。
      • array (可选): 调用 reduce 的原始数组。
    • initialValue (可选): 指定第一次调用 callback 时,accumulator 的初始值。

  • 使用场景: 当需要对数组进行累加、汇总或转换为其他数据结构时,使用 reduce 是非常合适的。

示例:

  1. 计算数组总和:

    const numbers = [1, 2, 3, 4, 5];
    const sum = numbers.reduce((accumulator, currentValue) => {
      return accumulator + currentValue;
    }, 0); // initialValue 为 0
    console.log(sum); // 输出: 15
    
  2. 将数组转换为对象:

    const fruits = ['apple', 'banana', 'orange'];
    const fruitCount = fruits.reduce((accumulator, currentValue) => {
      accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
      return accumulator;
    }, {}); // initialValue 为一个空对象
    console.log(fruitCount); // 输出: { apple: 1, banana: 1, orange: 1 }
    
  3. 数组扁平化:

    const nestedArray = [[1, 2], [3, 4], [5]];
    const flatArray = nestedArray.reduce((accumulator, currentValue) => {
      return accumulator.concat(currentValue);
    }, []); // initialValue 为一个空数组
    console.log(flatArray); // 输出: [1, 2, 3, 4, 5]
    
  4. 统计数组元素的出现频率:

    const names = ['Alice', 'Bob', 'Alice', 'Charlie', 'Bob'];
    const nameCount = names.reduce((accumulator, currentValue) => {
      accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
      return accumulator;
    }, {}); // initialValue 为一个空对象
    console.log(nameCount); // 输出: { Alice: 2, Bob: 2, Charlie: 1 }
    

注意事项

  • 如果未提供 initialValuereduce() 将以数组的第一个元素作为初始值,并从第二个元素开始执行。
  • 当数组为空且未提供 initialValue 时,会抛出 TypeError

12. indexOf(searchElement, fromIndex)

  • 参数:

    • searchElement - 要查找的元素。
    • fromIndex (可选) - 开始查找的索引,默认为 0。
  • 返回值: 元素的索引,如果未找到则返回 -1。

  • 使用场景: 需要查找元素位置时。

示例:

const arr = [1, 2, 3];
const index = arr.indexOf(2); // index = 1

13. lastIndexOf(searchElement, fromIndex)

  • 参数:

    • searchElement - 要查找的元素。
    • fromIndex (可选) - 从该索引向前查找,默认为数组长度减一。
  • 返回值: 元素的最后一个索引,如果未找到则返回 -1。

  • 使用场景: 需要查找元素最后出现的位置时。

示例:

const arr = [1, 2, 3, 2];
const index = arr.lastIndexOf(2); // index = 3

14. forEach(callback(currentValue, index, array))

  • 参数: callback - 一个函数,接受三个参数:

    • currentValue - 当前处理的元素。
    • index (可选) - 当前处理元素的索引。
    • array (可选) - 调用 forEach 的数组。
  • 返回值: 无。

  • 使用场景: 需要遍历数组时。

示例:

const arr = [1, 2, 3];
arr.forEach((element, index) => {
  console.log(`Index ${index}: ${element}`); // 输出每个元素及其索引
});

15. map(callback(currentValue, index, array))

  • 参数: callback - 一个函数,接受三个参数:

    • currentValue - 当前处理的元素。
    • index (可选) - 当前处理元素的索引。
    • array (可选) - 调用 map 的数组。
  • 返回值: 新数组,包含 callback 返回值的结果。

  • 使用场景: 需要对数组中的每个元素进行转换时。

示例:

const arr = [1, 2, 3];
const newArr = arr.map((element) => element * 2); // newArr = [2, 4, 6]

16. filter(callback(currentValue, index, array))

  • 参数: callback - 一个函数,接受三个参数:

    • currentValue - 当前处理的元素。
    • index (可选) - 当前处理元素的索引。
    • array (可选) - 调用 filter 的数组。
  • 返回值: 新数组,包含所有通过测试的元素。

  • 使用场景: 需要根据条件过滤数组元素时。

示例:

const arr = [1, 2, 3, 4];
const newArr = arr.filter((element) => element > 2); // newArr = [3, 4]

17. every(callback(currentValue, index, array))

  • 参数: callback - 一个函数,接受三个参数:

    • currentValue - 当前处理的元素。
    • index (可选) - 当前处理元素的索引。
    • array (可选) - 调用 every 的数组。
  • 返回值: 如果数组中的所有元素都通过测试,则返回 true,否则返回 false

  • 使用场景: 需要检查数组所有元素是否满足条件时。

示例:

const arr = [1, 2, 3];
const allEven = arr.every((element) => element % 2 === 0); // allEven = false

18. some(callback(currentValue, index, array))

  • 参数: callback - 一个函数,接受三个参数:

    • currentValue - 当前处理的元素。
    • index (可选) - 当前处理元素的索引。
    • array (可选) - 调用 some 的数组。
  • 返回值: 如果数组中至少有一个元素通过测试,则返回 true,否则返回 false

  • 使用场景: 需要检查数组是否有符合条件的元素时。

示例:

const arr = [1, 2, 3];
const hasEven = arr.some((element) => element % 2 === 0); // hasEven = true

19. find(callback(currentValue, index, array))

  • 参数: callback - 一个函数,接受三个参数:

    • currentValue - 当前处理的元素。
    • index (可选) - 当前处理元素的索引。
    • array (可选) - 调用 find 的数组。
  • 返回值: 返回第一个满足条件的元素,如果没有找到则返回 undefined

  • 使用场景: 需要找到第一个符合条件的元素时。

示例:

const arr = [1, 2, 3];
const found = arr.find((element) => element > 1); // found = 2

20. findIndex(callback(currentValue, index, array))

  • 参数: callback - 一个函数,接受三个参数:

    • currentValue - 当前处理的元素。
    • index (可选) - 当前处理元素的索引。
    • array (可选) - 调用 findIndex 的数组。
  • 返回值: 返回第一个满足条件的元素的索引,如果没有找到则返回 -1。

  • 使用场景: 需要找到第一个符合条件的元素的索引时。

示例:

const arr = [1, 2, 3];
const index = arr.findIndex((element) => element > 1); // index = 1

21. includes(searchElement, fromIndex)

  • 参数:

    • searchElement - 要查找的元素。
    • fromIndex (可选) - 从该索引开始查找,默认为 0。
  • 返回值: 如果数组包含指定元素,则返回 true,否则返回 false

  • 使用场景: 需要检查数组中是否有特定元素时。

示例:

const arr = [1, 2, 3];
const hasTwo = arr.includes(2); // hasTwo = true

22. flat(depth)

  • 参数: depth (可选) - 要“拍平”的嵌套数组的深度,默认为 1,填入Infinity表示完全扁平化。
  • 返回值: 新数组,包含所有元素,嵌套数组被“拍平”。
  • 使用场景: 需要将多维数组转换为一维数组时。

示例:

const arr = [1, [2, [3, 4]]];
const flatArr = arr.flat(); // flatArr = [1, 2, [3, 4]]
const fullyFlat = arr.flat(2); // fullyFlat = [1, 2, 3, 4]

const arr = [1, [2, [3, [4, [5]]]]]; 
const flattened = arr.flat(Infinity);
console.log(flattened); // 输出: [1, 2, 3, 4, 5]

23. flatMap(callback(currentValue, index, array))

  • 参数: callback - 一个函数,接受三个参数:

    • currentValue - 当前处理的元素。
    • index (可选) - 当前处理元素的索引。
    • array (可选) - 调用 flatMap 的数组。
  • 返回值: 新数组,包含 callback 返回值的结果,且自动“拍平”一层。

  • 使用场景: 需要对数组进行映射并拍平结果时。

示例:

const arr = [1, 2, 3];
const flatMapped = arr.flatMap((element) => [element, element * 2]); // flatMapped = [1, 2, 2, 4, 3, 6]

仅供参考,欢迎补充~

Snipaste_2024-10-25_11-01-45.png

参考文档