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：a 在 b 前面
    • 大于 0：b 在 a 前面
    • 等于 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 (可选) - 结束索引，不包含。默认为数组长度。

  • 返回值: 新数组，包含从 start 到 end（不包括 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 }

注意事项

  • 如果未提供 initialValue，reduce() 将以数组的第一个元素作为初始值，并从第二个元素开始执行。
  • 当数组为空且未提供 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

参考文档：

avatar
文章
阅读
粉丝