当前位置: 首页 > news >正文

JavaScript中.splice()的用法

JavaScript Array splice() 方法详解

Array.prototype.splice() 是 JavaScript 数组的核心方法,用于在指定位置添加/删除元素,并返回被删除的元素,同时直接修改原数组。其语法为:

array.splice(startIndex, deleteCount, item1, item2, ...)
参数说明:
  • startIndex:操作起始位置(索引从 0 开始)
  • deleteCount:要删除的元素数量(若为 0 则不删除)
  • item1, item2...:要添加的新元素(可选)

使用示例

1. 删除元素
let fruits = ['🍎', '🍌', '🍇', '🍊'];
let removed = fruits.splice(1, 2);  // 从索引1开始删除2个元素console.log(fruits);  // 输出: ['🍎', '🍊'] (原数组被修改)
console.log(removed); // 输出: ['🍌', '🍇'] (返回被删除元素)
2. 添加元素
let colors = ['red', 'green', 'blue'];
colors.splice(1, 0, 'yellow', 'purple'); // 在索引1处添加元素console.log(colors); 
// 输出: ['red', 'yellow', 'purple', 'green', 'blue']
3. 替换元素
let numbers = [10, 20, 30, 40];
let replaced = numbers.splice(2, 1, 99); // 将索引2的元素替换为99console.log(numbers);  // 输出: [10, 20, 99, 40]
console.log(replaced); // 输出: [30] (被替换的元素)
4. 删除末尾元素
let arr = [1, 2, 3, 4, 5];
arr.splice(-2, 1); // 倒数第2位开始删除1个元素console.log(arr); // 输出: [1, 2, 3, 5]

关键特性

  1. 修改原数组:与 slice() 不同,splice() 直接改变原数组
  2. 负索引支持startIndex 可为负数(从末尾倒数)
  3. 返回被删除元素:始终返回数组(无删除时返回空数组)
  4. 高效操作:适合需要同时添加/删除的场景

⚠️ 注意:当 deleteCount 大于剩余元素数时,会删除从起始位置到末尾的所有元素。


与 slice() 对比

方法修改原数组返回内容主要用途
splice()被删除的元素添加/删除元素
slice()新数组(子数组)提取子数组
// 示例对比
let a = [1,2,3];
a.splice(0,1);    // 返回 [1], a变为[2,3]
let b = [1,2,3];
b.slice(0,1);     // 返回 [1], b仍为[1,2,3]
http://www.dtcms.com/a/299611.html

相关文章:

  • Vue 插槽
  • 数据结构自学Day14 -- 利用归并排序思想实现“外排序”
  • 【MySQL 数据库】MySQL基本查询(第二节)
  • 达梦[-2894]:间隔表达式与分区列类型不匹配
  • 「iOS」————继承链与对象的结构
  • 全球节点的概念
  • 原理篇..
  • mysql的lts版本与Innovation版本区别
  • 考研复习-数据结构-第八章-排序
  • 【工具类】Linux 环境利用 uv 安装多版本 python
  • AI 编程还有多远?我们如何迎接 AI 编程时代?
  • MGRE综合实验
  • 大模型开发工具的汇总
  • 小架构step系列26:Spring提供的validator
  • 秋招Day19 - 分布式 - 分布式事务
  • Android 修改系统时间源码阅读
  • DeepSeek算法学习笔记
  • RabbitMQ--Springboot解决消息丢失
  • Spring Boot集成RabbitMQ终极指南:从配置到高级消息处理
  • Linux进程控制:掌握系统的核心脉络
  • Git版本控制
  • FC(Function Calling)和MCP详解(区别、作用、运用场景)
  • 2.JVM跨平台原理(字节码机制)
  • 【Bluedroid】btif_av_sink_execute_service之服务器禁用源码流程解析
  • 零基础学后端-PHP语言(第二期-PHP基础语法)(通过php内置服务器运行php文件)
  • 机器语言基本概念
  • android开发中的协程和RxJava对比
  • DOM元素添加技巧全解析
  • LangChain + MCP 构建带可视化图表功能的ChatBI智能体
  • Git 创建一个完全没有提交历史的 master 分支