JavaScript 数组增删改查常用方法详解

准备条件：理解数组特性

在开始操作之前，需要明确 JavaScript 数组的两个核心特性：一是弱类型，允许在同一数组中混合存放字符串、数字甚至对象；二是动态长度，数组大小会随着元素的增删自动调整，无需像强类型语言那样预先固定容量。

第一步：增加数组项（Add）

向数组添加元素是高频操作，根据希望元素出现的位置（末尾或开头）或是否需要保留原数组不变，有多种实现方式。

第1步：在末尾追加元素 - push()

目的：将一个或多个新元素添加到数组的最后面。
入口与动作：调用 arr.push(item1, item2, ...)。
注意：该方法会直接修改原数组，并返回新数组的长度。

var arr = [];
arr.push('a', 'b');
console.log(arr); // ['a','b']
console.log(arr.length); // 2

第2步：在头部插入元素 - unshift()

目的：将一个或多个新元素添加到数组的最前面。
入口与动作：调用 arr.unshift(item1, item2, ...)。
注意：同样修改原数组，返回新长度。

var arr = ['a', 'b'];
arr.unshift(1, 2);
console.log(arr); // [1, 2, "a", "b"]

第3步：创建新数组添加元素 - concat()

目的：将传入的参数合并到当前数组中，生成一个新数组。
入口与动作：调用 arr.concat(...)。
重要参数：此方法不会改变原数组，而是返回一个新的合并后的数组。适合不可变数据流场景。

var arr = ['a', 'b', 'c'];
var newArr = arr.concat('d', 1, ['e', 3]);
console.log(arr); // ["a", "b", "c"] (未变)
console.log(newArr); // ["a", "b", "c", "d", 1, "e", 3]

第4步：灵活位置添加/插入 - splice()

目的：在指定索引处插入元素。
入口与动作：调用 arr.splice(index, 0, newItem)。
操作说明：当第二个参数为 0 时，表示删除 0 项，仅起到插入效果。

var arr = ['a', 'b', 'c'];
// 从索引2开始，删除0个，插入'd'
arr.splice(2, 0, 'd');
console.log(arr); // ["a", "b", "d", "c"]

第二步：删除数组项（Delete）

删除操作可分为移除单个元素（头尾）和在指定位置移除多个元素两种情况。

第1步：从末尾移除 - pop()

目的：移除并返回数组的最后一个元素。
操作结果：原数组长度减 1。

var arr = ['a', 'b', 'c'];
var last = arr.pop();
console.log(last); // "c"
console.log(arr); // ["a", "b"]

第2步：从头部移除 - shift()

目的：移除并返回数组的第一个元素。
操作结果：原数组长度减 1，其余元素索引前移。

var arr = ['a', 'b', 'c'];
var first = arr.shift();
console.log(first); // "a"
console.log(arr); // ["b", "c"]

第3步：原位批量删除 - splice()

目的：从指定位置删除指定数量的元素。
入口与动作：调用 arr.splice(startIndex, deleteCount)。
返回值：返回被删除的元素组成的数组。

var arr = [1, 2, 3, 4];
// 从索引1开始，删除1个元素
var removed = arr.splice(1, 1);
console.log(removed); // [2]
console.log(arr); // [1, 3, 4]

第4步：切片复制（伪删除）- slice()

目的：提取数组的一部分作为新数组，若只保留所需部分即视为删除了其他部分。
入口与动作：调用 arr.slice(start, end)。
特点：不改变原数组。省略参数时可截取至末尾。

var arr = [1, 2, 3, 4, 5];
// 提取从索引2开始的所有元素作为“删除前两位”的结果
var subArr = arr.slice(2);
console.log(subArr); // [3, 4, 5]

第三步：改变/替换数组项（Modify）

如果需要替换现有元素，或者同时执行删除和插入，splice() 是最强大的工具。

第1步：原位替换 - splice()

目的：删除指定数量的元素后，在相同位置插入新元素。
操作顺序：先删后插。

var arr = [1, 2, 3, 4];
// 从索引1开始，删除1个元素，然后插入'x'和'y'
arr.splice(1, 1, 'x', 'y');
console.log(arr); // [1, "x", "y", 4]

第四步：查询与提取（Search & Extract）

在 JavaScript 数组操作中，“查询”通常指根据条件找到元素（如 find, indexOf），而原文侧重的是范围提取，即获取一段连续的子集。

第1步：范围提取 - slice()

目的：无损地获取数组片段。

• slice(2): 从索引 2 取到末尾。
• slice(-3): 从倒数第 3 个元素取到末尾（负数索引）。

var arr = [1, 2, 3, 4, 5];
var part = arr.slice(-2);
console.log(part); // [4, 5]

总结

JavaScript 数组操作的核心理念在于区分“修改原数组”与“生成新数组”：

• 原地修改：push, pop, shift, unshift, splice。
• 生成副本：concat, slice。

实际开发中，若需保持数据不可变性（如 React/Vue 状态管理），应优先使用 concat 或 slice；若只需简单地在列表末尾加项，push 最为直观；若涉及中间位置的增删改，splice 是最佳选择。以上就是 JavaScript 数组增删改查的详细内容，更多关于 JavaScript 数据处理与性能优化的资料请关注本站其它相关文章！