javascript数组如何创建与操作_常用数组方法有哪些?

10次阅读

创建数组首选字面量[],安全直观;new Array()易出错:单数字参数创建空数组,多参数才等价于字面量。

javascript数组如何创建与操作_常用数组方法有哪些?

如何创建数组:字面量最常用,构造函数要小心 直接用方括号 [] 创建是最安全、最直观的方式。比如 const arr = [1, 2, 3]。 而 new Array() 构造函数行为容易出错:

  • 传一个数字参数,如 new Array(5),会创建长度为 5 的空数组(arr.Length === 5,但所有索引都未定义),不是包含五个 undefined 的数组
  • 传多个参数,如 new Array(1, 2, 3),才等价于 [1, 2, 3]
  • jsON 解析或函数参数不确定时,[] 更稳定,不会因单个数字触发歧义

修改原数组 vs 返回新数组:必须分清这两类方法 javaScript 数组方法分两类,混淆会导致意外副作用:

  • **会修改原数组**:push()pop()shift()unshift()splice()sort()reverse()
  • **不修改原数组,返回新数组**:map()Filter()slice()concat()flat()toSorted()(ES2024)、toReversed()

常见错误:对 props 或 state 直接调用 sort(),导致原始数据被改;应该用 toSorted() 或先 slice()sort()

const original = [3, 1, 4]; original.sort(); // ❌ 原数组被修改 const sorted = [...original].sort(); // ✅ 安全 // 或 const sorted2 = original.toSorted(); // ✅ ES2024+,更语义化

遍历与查找:foreach/map/filter/find 的核心区别 它们都接收回调函数,但用途和返回值完全不同:

  • forEach():只执行,无返回值(返回 undefined),不能中断(break 无效)
  • map():返回一个新数组,长度与原数组一致,每个元素是回调的返回值
  • filter():返回新数组,只包含回调返回真值的元素
  • find():返回第一个满足条件的元素(或 undefined),适合查单个对象
  • findIndex():返回第一个满足条件的索引(或 -1),适合后续修改

注意:includes()indexOf() 查找基本类型没问题,但对象比较要用 find() + 深比较逻辑,因为 [{a:1}] .includes({a:1})false

扁平化与合并:flat() 和 concat() 不是等价替代 concat() 只浅合并一层,且对嵌套数组不做处理:

const a = [1, 2]; const b = [3, [4, 5]]; const merged = a.concat(b); // [1, 2, 3, [4, 5]]

flat() 默认也只扁平一层,但可指定深度:

const nested = [1, [2, [3, [4]]]]; nested.flat();        // [1, 2, [3, [4]]] nested.flat(2);       // [1, 2, 3, [4]] nested.flat(Infinity); // [1, 2, 3, 4]

如果要合并并完全扁平,组合使用更可靠:[...a, ...b].flat(Infinity)[].concat(...arr).flat()(需确保内部也是数组)。 实际写业务时,嵌套层级不固定就别硬靠 flat(1),先判断结构再处理更稳妥。

text=ZqhQzanResources