JavaScript 数组方法深入

学习 find/some/every/reduce/sort 等实用方法 · 难度：进阶 · +15XP

JavaScript 数组方法深入

JavaScript 数组提供了丰富的实例方法，掌握这些方法可以高效地进行数据操作，写出更简洁、更声明式的代码。从基础的 push/pop 到高阶的 reduce/flatMap，本教程将全面梳理数组方法的分类和使用场景。

数组方法分类总览

增删改查基础操作

1. push/pop 在数组末尾添加/删除元素
2. shift/unshift 在数组开头添加/删除元素
3. splice 在任意位置添加/删除元素

const arr = [1, 2, 3];
// 末尾操作
arr.push(4, 5);        // [1, 2, 3, 4, 5]  返回新长度 5
const last = arr.pop(); // [1, 2, 3, 4]      返回 5
// 开头操作
arr.unshift(0);        // [0, 1, 2, 3, 4]   返回新长度 5
const first = arr.shift(); // [1, 2, 3, 4]  返回 0
// splice: 万能方法（修改原数组）
// splice(start, deleteCount, ...items)
arr.splice(2, 1);           // 删除索引 2 的元素 -> [1, 2, 4]
arr.splice(1, 0, "a", "b"); // 在索引 1 插入 -> [1, "a", "b", 2, 4]
arr.splice(2, 2, "x");      // 替换 -> [1, "a", "x", 4]

查找与检测

const users = [
  { id: 1, name: "张三", age: 25 },
  { id: 2, name: "李四", age: 30 },
  { id: 3, name: "王五", age: 28 }
];

// find: 找第一个符合条件的元素
const user = users.find(u => u.age > 25); // { id:2, name:"李四", age:30 }
// findIndex: 找第一个符合条件的索引
const idx = users.findIndex(u => u.name === "王五"); // 2
// includes: 检查是否包含（简洁版 indexOf）
console.log([1, 2, 3].includes(2)); // true
console.log([1, 2, 3].includes(5)); // false
// indexOf / lastIndexOf
console.log([1, 2, 3, 2].indexOf(2));     // 1（首次出现）
console.log([1, 2, 3, 2].lastIndexOf(2)); // 3（最后出现）
// some / every: 条件检测
console.log(users.some(u => u.age > 30));  // false（没有超过 30 的）
console.log(users.every(u => u.age >= 18)); // true（都成年了）

排序、转换与高级操作

// sort: 排序（修改原数组）
const nums = [5, 12, 3, 8, 1];
nums.sort((a, b) => a - b); // 升序：[1, 3, 5, 8, 12]
// 注意：sort() 默认按字符串排序！[1, 12, 3, 5, 8] 是错误结果

// 按对象属性排序
users.sort((a, b) => a.age - b.age); // 按年龄升序
// slice: 截取子数组（不修改原数组）
const sub = [1, 2, 3, 4, 5].slice(1, 4); // [2, 3, 4]
// concat: 合并数组
const merged = [1, 2].concat([3, 4], [5]); // [1, 2, 3, 4, 5]
// 扩展运算符写法（推荐）
const merged2 = [...[1, 2], ...[3, 4], 5]; // [1, 2, 3, 4, 5]
// flat: 扁平化嵌套数组
const nested = [1, [2, [3, [4]]]];
console.log(nested.flat());    // [1, 2, [3, [4]]] 默认 depth=1
console.log(nested.flat(2));   // [1, 2, 3, [4]]   depth=2
console.log(nested.flat(Infinity)); // [1, 2, 3, 4] 完全扁平
// flatMap: map + flat(1) 的组合
const words = ["hello world", "foo bar"];
const letters = words.flatMap(s => s.split(" "));
console.log(letters); // ["hello", "world", "foo", "bar"]
// join: 数组转字符串
console.log(["a", "b", "c"].join(" - ")); // "a - b - c"