JS Array 常用方法

JavaScript 中的数组（Array）提供了丰富的方法来操作数据。为了方便理解和记忆，通常将这些方法分为‌修改原数组‌、‌生成新数组‌以及‌遍历/查找‌等类别。

以下是 JS Array 常用方法的详细整理：

一、 修改原数组的方法 (Mutating Methods)

这些方法会直接改变调用它们的原始数组。

方法	描述	返回值
‌push()‌	将一个或多个元素添加到数组的‌末尾‌。	新数组的长度
‌pop()‌	删除并返回数组的‌最后一个‌元素。	被删除的元素
‌unshift()‌	将一个或多个元素添加到数组的‌开头‌。	新数组的长度
‌shift()‌	删除并返回数组的‌第一个‌元素。	被删除的元素
‌reverse()‌	反转数组中元素的顺序。	反转后的数组引用
‌sort()‌	对数组元素进行排序。默认按 Unicode 编码排序（即字符串顺序）。若需数值排序，需传入比较函数 (a, b) => a - b。	排序后的数组引用
‌splice()‌	在指定索引处删除、替换或插入元素。语法：arr.splice(start, deleteCount, item1, ...)- start: 开始修改的位置- deleteCount: 要删除的元素个数- item...: 要添加的新元素	包含被删除元素的数组（若无删除则返回空数组）
‌fill()‌	用固定值填充数组中的元素。语法：arr.fill(value, start, end)	修改后的数组
‌copyWithin()‌	复制数组的一部分到同一数组的另一位置。语法：arr.copyWithin(target, start, end)	修改后的数组

二、 生成新数组的方法 (Non-Mutating Methods)

这些方法不会改变原始数组，而是返回一个新的数组或值。

方法	描述	返回值
‌concat()‌	合并两个或多个数组。	新的合并数组
‌slice()‌	提取数组的一部分，返回一个新数组。语法：arr.slice(start, end)（不包含 end）	新的子数组
‌join()‌	将数组所有元素连接成一个字符串。语法：arr.join(separator)，默认分隔符为逗号。	字符串
‌map()‌	创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。	新数组
‌filter()‌	创建一个新数组，包含通过所提供函数实现的测试的所有元素。	新数组
‌reduce()‌	对数组中的每个元素执行一个由您提供的 reducer 函数，将其结果汇总为单个返回值。	单个累积值
‌flat()‌	按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。	新数组
‌flatMap()‌	首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。相当于 map + flat(1)。	新数组

三、 遍历与查找方法 (Iteration & Search)

主要用于检测、查找或遍历数组元素。

方法	描述	返回值
‌forEach()‌	对数组的每个元素执行一次提供的函数。‌无返回值‌（undefined）。	undefined
‌find()‌	返回数组中满足提供的测试函数的‌第一个‌元素的值。否则返回 undefined。	元素值 或 undefined
‌findIndex()‌	返回数组中满足提供的测试函数的‌第一个‌元素的‌索引‌。否则返回 -1。	索引 或 -1
‌indexOf()‌	返回在数组中可以找到一个给定元素的‌第一个‌索引，如果不存在则返回 -1。	索引 或 -1
‌lastIndexOf()‌	返回指定元素在数组中的‌最后一个‌索引，如果不存在则返回 -1。	索引 或 -1
‌includes()‌	判断数组是否包含某个指定的值。	true 或 false
‌some()‌	测试数组中是不是至少有 1 个元素通过了被提供的函数测试。	true 或 false
‌every()‌	测试数组中是不是‌所有‌元素都通过了被提供的函数测试。	true 或 false
‌keys()‌	返回一个包含数组中每个索引键的 Iterable 对象。	迭代器
‌values()‌	返回一个包含数组中每个值的 Iterable 对象。	迭代器
‌entries()‌	返回一个包含数组中每个 [key, value] 对的 Iterable 对象。	迭代器

四、 ES6+ 静态方法 (Static Methods)

直接通过 Array 构造函数调用的方法。

• Array.from()‌: 从类似数组或可迭代对象创建一个新的、浅拷贝的数组实例。
• ‌Array.of()‌: 根据一组参数创建新的数组实例，用于解决 new Array() 构造函数的行为差异（例如 Array(7) 创建长度为7的空数组，而 Array.of(7) 创建 ``）。
• ‌Array.isArray()‌: 判断传递的值是否是一个 Array。

五、 常见使用示例

1. 增删改查基础操作

let arr = [1, 2, 3];

// 增
arr.push(4);       // [1, 2, 3, 4]
arr.unshift(0);    // [0, 1, 2, 3, 4]

// 删
arr.pop();         // 移除 4, 返回 4
arr.shift();       // 移除 0, 返回 0

// 改/插/删 (splice)
arr.splice(1, 1, 99); // 从索引1开始，删除1个元素，插入99。原数组变为 [1, 99, 3]

// 查
console.log(arr.indexOf(99)); // 1
console.log(arr.includes(99)); // true

2. 排序注意事项

sort() 默认将元素转换为字符串进行比较，因此数字排序时会出错（如 10 会排在 2 前面）。

let nums = [10, 5, 40, 25, 100, 1];

// 错误用法
nums.sort(); 
// 结果: [1, 10, 100, 25, 40, 5] (按字符串Unicode排序)

// 正确用法：升序
nums.sort((a, b) => a - b); 
// 结果: [1, 5, 10, 25, 40, 100]

// 正确用法：降序
nums.sort((a, b) => b - a); 
// 结果: [100, 40, 25, 10, 5, 1]

3. 高阶函数处理数据

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 20 }
];

// 筛选年龄大于 20 的用户
const adults = users.filter(user => user.age > 20);

// 提取名字列表
const names = users.map(user => user.name);

// 检查是否所有人都成年
const allAdults = users.every(user => user.age >= 18);

掌握这些方法可以极大地提高 JavaScript 代码的可读性和开发效率。在实际开发中，推荐优先使用不修改原数组的方法（如 map, filter, slice），以保持数据的不可变性（Immutability），这在 React/Vue 等现代前端框架中尤为重要。