当前位置: 首页 > 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.xdnf.cn/news/1191871.html

相关文章:

  • 从零开始大模型之编码注意力机制
  • HTML5 Canvas 绘制圆弧效果
  • 适用于5V/12V低输入的负载点电源应用20V/6A单片式双通道同步降压调整器
  • 面试150 IPO
  • C#其他知识点
  • 实验-OSPF多区域
  • ubuntu下docker安装thingsboard物联网平台详细记录(附每张图)
  • KTO:基于行为经济学的大模型对齐新范式——原理、应用与性能突破
  • 栈----3.字符串解码
  • C语言函数精讲:从入门到精通( 指针(5))
  • 秋招Day20 - 微服务 - 概念
  • kafka的消费者负载均衡机制
  • 嵌入式硬件篇---有线串口通信问题
  • OpenCV图像梯度、边缘检测、轮廓绘制、凸包检测大合集
  • IntelliJ IDEA 中左上方未显示项目根目录问题
  • 数据库索引详解:原理、设计原则与应用场景
  • 渲染篇(二):解密Diff算法:如何用“最少的操作”更新UI
  • Word文档转HTML查看器(字体颜色、字体背景、超链接、图片、目录等全部转换为html),统计Word文档段落数量、图片数量、表格数量、列表数量
  • HTML5元素相关补充
  • 小架构step系列26:Spring提供的validator
  • CS231n-2017 Lecture7训练神经网络(二)笔记
  • 三防平板搭载2D扫描头:工业数据采集的革新利器
  • Vue3 学习教程,从入门到精通,Vue3 样式绑定语法详解与案例(17)
  • 零基础 “入坑” Java--- 十四、【练习】图书小系统
  • 一、Spring框架结构组成详解
  • Transformer:颠覆NLP的自注意力革命
  • C++___快速入门(上)
  • 图解网络-小林coding笔记(持续更新)
  • Creating Strings
  • [特殊字符] 嵌入式队列精要指南:数据流的艺术与实战