创建数组首选字面量[],安全直观;new Array()易出错:单数字参数创建空数组,多参数才等价于字面量。
如何创建数组:字面量最常用,构造函数要小心
直接用方括

号
[] 创建是最安全、最直观的方式。比如
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()(ES2025)、toReversed()
常见错误:对 props 或 state 直接调用 sort(),导致原始数据被改;应该用 toSorted() 或先 slice() 再 sort()。
const original = [3, 1, 4];
original.sort(); // ❌ 原数组被修改
const sorted = [...original].sort(); // ✅ 安全
// 或
const sorted2 = original.toSorted(); // ✅ ES2025+,更语义化
遍历与查找: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),先判断结构再处理更稳妥。