17370845950

JavaScript数组方法的核心在于区分“是否修改原数组”：push/pop/shift/unshift/splice/sort/reverse会改变原数组；map/filter/slice/concat/flat返回新数组；reduce需注意初始值；includes/find/findIndex语义明确且支持NaN。

JavaScript 数组的常用方法不是“要不要学”，而是你已经在用、只是没意识到它们是独立方法——比如 push 和 pop 看似简单，但它们的返回值、是否改变原数组、在异步或循环中误用，才是实际出问题的地方。

哪些方法会直接修改原数组？

这类方法副作用明显，常被误用于链式调用或遍历时的条件删除，结果逻辑错乱。

• push()、pop()、shift()、unshift()：增删首尾元素，返回新长度或被删元素，原数组变
• splice()：万能修改器，可删、插、替，返回被删元素数组，原数组变
• sort()：默认按字符串 Unicode 排序，[10, 2, 1] 会变成 [1, 10, 2]；必须传比较函数才符合数值预期
• reverse()：就地翻转，不返回新数组

⚠️ 常见坑：forEach 中对数组用 push 或 splice，会导致跳过后续元素（因索引位移）；应改用 filter + map 组合或倒序遍历。

哪些方法返回新数组且不改原数组？

这是函数式编程习惯的基础，适合 React 等状态不可变场景。但要注意浅拷贝陷阱。

• map()：每个元素映射为新值，返回等长新数组；若回调无返回值，对应项为 undefined
• filter()：返回满足条件的元素组成的新数组；注意 Boolean 类型判断（如 filter(Boolean) 可去空值）
• slice()：截取子数组，slice(1) 从下标 1 开始到末尾；slice() 无参数 = 浅拷贝
• concat()：合并数组，[1].concat([2], 3) → [1,2,3]；注意它不递归扁平化嵌套数组
• flat()：ES2019 新增，[1, [2, [3]]].flat(2) → [1,2,3]；默认只展一层

⚠️ 常见坑：map() 和 filter() 回调里写 return 忘加花括号，箭头函数单表达式自动返回，但多语句必须显式 return；否则全返回 undefined。

reduce 是不是总比 for 循环慢？

不是。性能差异微乎其微，真正影响的是可读性与错误率——尤其涉及累加、分组、扁平化、查找唯一值等复合逻辑时。

const scores = [{name: 'a', score: 85}, {name: 'b', score: 92}];
const total = scores.reduce((sum, item) => sum + item.score, 0); // 177

// 分组：按首字母归类
const grouped = names.reduce((acc, name) => {
  const key = name[0].toLowerCase();
  acc[key] = acc[key] || [];
  acc[key].push(name);
  return acc;
}, {});

⚠️ 常见坑：reduce() 第二个参数（初始值）不能省略，否则第一次迭代的 acc 是第一个元素，item 是第二个，极易越界或类型错配；数组为空时更会直接报错。

includes、find、findIndex 这三个查法怎么选？

别再全用 indexOf !== -1 了。它们语义明确，且支持 NaN 和对象引用判断（find / findIndex 支持自定义条件）。

• includes(value)：只关心“是否存在”，返回布尔值；可查 NaN（indexOf(NaN) 永远 -1）
• find(cb)：返回第一个匹配元素（值本身），找不到返回 undefined
• findIndex(cb)：返回第一个匹配元素下标，找不到返回 -1

⚠️ 常见坑：find 和 findIndex 的回调必须有返回值；写成 item => { item.id === 5 }（少 return）会导致永远返回 undefined，匹配失败。

真正难的不是记住方法名，而是每次调用前下意识问一句：这个操作要改原数组吗？我需要的是值、索引、还是布尔判断？返回的是单个结果还是新数组？漏掉这一问，后面调试半小时都可能卡在同一个隐式转换或副作用上。