JavaScript数组专题之2：数组的增删改全解析（push、pop、splice）

JS 数组系列专题文章目录

入门篇

第 1 篇：认识 JavaScript 数组——从入门到操作基础
👉 介绍数组的概念、创建方式、索引与长度的使用，以及最基础的遍历方法。适合刚接触数组的新手。

第 2 篇：数组的增删改全解析（push、pop、splice）
👉 系统讲解数组的增删改方法，包括 push、pop、shift、unshift、splice、fill，并结合小案例说明。

常用方法篇

第 3 篇：数组的查找与判断方法大全
👉 详细介绍如何在数组中查找元素，包括 indexOf、lastIndexOf、includes、find、findIndex、some、every 等。

第 4 篇：数组的排序与合并技巧（sort、concat、slice）
👉 讲解数组排序与反转的方法，以及合并、切片、字符串化的常见操作，重点讲解 sort 排序中的注意点。

进阶篇

第 5 篇：数组的迭代与转换（map、filter、reduce 全解）
👉 深入剖析高阶方法 map、filter、reduce，包括实际应用场景：数组求和、数据统计、扁平化处理等。

第 6 篇：数组的实用技巧与案例集锦
👉 介绍常见的数组处理技巧：去重（多种写法对比）、扁平化（flat 与递归实现）、字符串与数组互转、对象数组排序。

高阶篇

第 7 篇：类数组与稀疏数组——容易忽略的细节
👉 解释什么是类数组（arguments、NodeList），如何转换为真数组，稀疏数组的特性和坑点。

第 8 篇：不可变数组操作与函数式编程思路
👉 如何在不修改原数组的前提下进行操作（扩展运算符、concat、map 等），结合函数式编程的思想讲解。

实战 & 面试篇

第 9 篇：手写数组常用方法（map、filter、reduce）
👉 从源码角度模拟实现常见数组方法，帮助加深理解，提升面试竞争力。

第 10 篇：数组实战应用与高频面试题精选
👉 总结数组在实战中的应用：两数之和、数组旋转、最大最小值查找、groupBy、分页实现，涵盖面试常考题。

在编程世界中，数组（Array）就像一个有序的容器，用来存放多个数据项。它是几乎所有编程语言中最基础的数据结构之一。想象一下，你有一个购物篮，可以往里面放东西（增）、拿走东西（删）、换掉里面的东西（改），或者找找里面有没有某个东西（查）。这些操作统称为“增删改查”（CRUD：Create, Read, Update, Delete），是处理数组的核心技能。

先回顾一下前面一篇讲的基本概念

温故而知新：
JavaScript数组专题之1：认识 JavaScript 数组——从入门到操作基础

数组的基本概念

首先，什么是数组？数组是一个有序集合，可以存储多个值，这些值可以是数字、字符串、对象，甚至其他数组。数组的元素通过索引（从 0 开始的数字）来访问。

• 创建数组：在 JavaScript 中，用方括号 [] 创建空数组，或直接初始化。

  let fruits = [];  // 空数组
  let numbers = [1, 2, 3, 4];  // 初始化数组
  

• 长度：数组有 length 属性，表示元素个数。

  console.log(numbers.length);  // 输出: 4
  

• 访问元素：用索引访问，比如 numbers[0] 是 1。注意，索引从 0 开始，最后一个是 length - 1。

数组是动态的（JavaScript 中数组大小可变），但有些语言如 C++ 的数组是固定大小的。这里我们聚焦动态数组。

现在，让我们进入正题：增删改查。

增：向数组添加元素

“增”操作往数组添加新元素，常见于添加新数据。以下是相关方法。

1. push：末尾添加

• 用途：将元素添加到数组末尾，像在购物清单最后加一项。
• 时间复杂度：O(1)（高效，末尾操作不影响其他元素）。
• 代码示例：

  let shoppingList = ['apple', 'banana'];
  shoppingList.push('orange');
  console.log(shoppingList); // 输出: ['apple', 'banana', 'orange']
  

• 注意：可一次添加多个元素：shoppingList.push('pear', 'grape')。
• 案例：在购物清单末尾添加“牛奶”。

  shoppingList.push('milk');
  console.log(shoppingList); // 输出: ['apple', 'banana', 'orange', 'milk']
  

2. unshift：开头添加

• 用途：将元素添加到数组开头，像在清单最前面插队。
• 时间复杂度：O(n)（n 是数组长度，因需移动所有元素）。
• 代码示例：

  let shoppingList = ['apple', 'banana'];
  shoppingList.unshift('strawberry');
  console.log(shoppingList); // 输出: ['strawberry', 'apple', 'banana']
  

• 注意：大数组用 unshift 较慢，谨慎使用。
• 案例：优先购买“面包”，加到清单开头。

  shoppingList.unshift('bread');
  console.log(shoppingList); // 输出: ['bread', 'strawberry', 'apple', 'banana']
  

3. splice：任意位置添加

• 用途：在指定索引插入元素，灵活性高。
• 时间复杂度：O(n)（可能需移动元素）。
• 语法：splice(index, deleteCount, ...items)，deleteCount 设为 0 表示只插入。
• 代码示例：

  let shoppingList = ['apple', 'banana', 'orange'];
  shoppingList.splice(1, 0, 'mango'); // 在索引 1 插入 'mango'
  console.log(shoppingList); // 输出: ['apple', 'mango', 'banana', 'orange']
  

• 注意：可插入多个元素。
• 案例：在“苹果”后添加“葡萄”。

  shoppingList.splice(1, 0, 'grape');
  console.log(shoppingList); // 输出: ['apple', 'grape', 'mango', 'banana', 'orange']
  

删：移除数组元素

“删”操作移除元素，调整清单内容。以下是删除方法。

1. pop：删除末尾元素

• 用途：移除数组最后一个元素，返回被移除元素。
• 时间复杂度：O(1)（高效）。
• 代码示例：

  let shoppingList = ['apple', 'banana', 'orange'];
  let removed = shoppingList.pop();
  console.log(shoppingList); // 输出: ['apple', 'banana']
  console.log(removed); // 输出: 'orange'
  

• 注意：空数组 pop 返回 undefined，不报错。
• 案例：移除清单末尾的“牛奶”（买完了）。

  shoppingList.pop();
  console.log(shoppingList); // 输出: ['apple', 'grape', 'mango', 'banana']
  

2. shift：删除开头元素

• 用途：移除数组第一个元素，返回被移除元素。
• 时间复杂度：O(n)（需移动元素）。
• 代码示例：

  let shoppingList = ['apple', 'banana', 'orange'];
  let removed = shoppingList.shift();
  console.log(shoppingList); // 输出: ['banana', 'orange']
  console.log(removed); // 输出: 'apple'
  

• 注意：大数组慎用。
• 案例：买完“面包”，从清单开头移除。

  shoppingList.shift();
  console.log(shoppingList); // 输出: ['grape', 'mango', 'banana']
  

3. splice：删除任意位置元素

• 用途：从指定索引删除若干元素，返回删除的元素数组。
• 时间复杂度：O(n)。
• 代码示例：

  let shoppingList = ['apple', 'banana', 'orange', 'pear'];
  let removed = shoppingList.splice(1, 2); // 从索引 1 删除 2 个
  console.log(shoppingList); // 输出: ['apple', 'pear']
  console.log(removed); // 输出: ['banana', 'orange']
  

• 注意：deleteCount 为 0 时不删除。
• 案例：移除清单中的“芒果”和“香蕉”。

  shoppingList.splice(1, 2);
  console.log(shoppingList); // 输出: ['grape']
  

改：更新数组元素

“改”操作更新元素值，调整清单内容。

1. 直接赋值：修改指定索引

• 用途：通过索引直接改元素值，最简单。
• 时间复杂度：O(1)。
• 代码示例：

  let shoppingList = ['apple', 'banana', 'orange'];
  shoppingList[1] = 'mango';
  console.log(shoppingList); // 输出: ['apple', 'mango', 'orange']
  

• 注意：索引越界会扩展数组，填充 undefined。
• 案例：将“葡萄”改为“蓝莓”。

  shoppingList[0] = 'blueberry';
  console.log(shoppingList); // 输出: ['blueberry']
  

2. splice：替换元素（是多面手，可增删改结合）

• 用途：删除并插入，实现替换。
• 时间复杂度：O(n)。
• 代码示例：

  let shoppingList = ['apple', 'banana', 'orange'];
  shoppingList.splice(1, 1, 'mango'); // 替换索引 1 的元素
  console.log(shoppingList); // 输出: ['apple', 'mango', 'orange']
  

• 案例：将“蓝莓”替换为“草莓”。

  shoppingList.splice(0, 1, 'strawberry');
  console.log(shoppingList); // 输出: ['strawberry']
  

3. fill：填充元素（适合批量设置值）

• 用途：用固定值填充数组的部分或全部。
• 时间复杂度：O(n)。
• 语法：fill(value, start, end)，end 不包含。
• 代码示例：

  let shoppingList = ['apple', 'banana', 'orange'];
  shoppingList.fill('fruit', 1, 3); // 从索引 1 到 2 填充 'fruit'
  console.log(shoppingList); // 输出: ['apple', 'fruit', 'fruit']
  

• 注意：常用于初始化，如全填 0。
• 案例：将清单后两项标记为“已购买”。

  shoppingList.fill('purchased', 1, 3);
  console.log(shoppingList); // 输出: ['apple', 'purchased', 'purchased']
  

小案例：管理购物清单

假设我们要管理一个购物清单，综合运用上述方法：

let shoppingList = ['apple', 'banana'];

// 增：在末尾加“橙子”，开头加“面包”，索引 1 后加“葡萄”
shoppingList.push('orange');
shoppingList.unshift('bread');
shoppingList.splice(2, 0, 'grape');
console.log(shoppingList); // 输出: ['bread', 'apple', 'grape', 'banana', 'orange']

// 删：移除末尾的“橙子”，开头的“面包”，索引 2 的“香蕉”
shoppingList.pop();
shoppingList.shift();
shoppingList.splice(2, 1);
console.log(shoppingList); // 输出: ['apple', 'grape']

// 改：将“苹果”改为“草莓”，将“葡萄”标记为“已购买”
shoppingList[0] = 'strawberry';
shoppingList.fill('purchased', 1, 2);
console.log(shoppingList); // 输出: ['strawberry', 'purchased']

预告

下一篇，我们要聊聊数组的 查找与判断：

• 怎么快速找到某个元素？

• 怎么判断数组里有没有它？

• 怎么检查是不是所有元素都符合要求？

提示：这就像在班级里点名找人一样。敬请期待！ 🎉