js 数组splice跟slice

在 JavaScript 中,splice 和 slice 是数组(Array)对象的方法,用于处理数组,但它们的功能和用途有很大的不同。
1. splice

splice 方法用于 修改数组,可以添加、删除或替换数组中的元素。

语法

array.splice(start, deleteCount, item1, item2, ...)

  • start: 必需。表示从数组的哪个索引开始修改。
  • deleteCount: 可选。表示要删除的元素数量。如果为 0,则不删除元素。
  • item1, item2, ...: 可选。要添加到数组的新元素。
    返回值
    splice 返回一个包含被删除元素的数组。如果没有删除任何元素,则返回一个空数组。
    示例
bash 复制代码
let fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
 // 删除元素 
 let removed = fruits.splice(1, 2); 
 // 从索引 1 开始删除 2 个元素 
 console.log(fruits);
  // ['Apple', 'Date']
   console.log(removed); 
   // ['Banana', 'Cherry'] 
   // 添加元素 
   fruits.splice(1, 0, 'Blueberry', 'Coconut'); 
   // 在索引 1 处添加两个新元素 
   console.log(fruits); 
   // ['Apple', 'Blueberry', 'Coconut', 'Date'] 
   // 替换元素 
   fruits.splice(1, 1, 'Avocado'); 
   // 从索引 1 替换 1 个元素 
   console.log(fruits); 
   // ['Apple', 'Avocado', 'Coconut', 'Date']

2. slice

slice 方法用于 提取数组的片段,而不修改原始数组。它返回一个新数组,包含从原数组中提取的元素。

语法

array.slice(start, end)

  • start: 可选。表示提取的开始索引。如果省略,默认为 0。
  • end: 可选。表示提取的结束索引(不包括该索引处的元素)。如果省略,默认为数组的长度。
    返回值
    slice 返回一个新的数组,包含从原数组中提取的元素。
    示例
bash 复制代码
let fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
 // 提取片段
  let citrus = fruits.slice(1, 3); 
  // 从索引 1 提取到索引 3(不包含 3) 
  console.log(citrus); 
  // ['Banana', 'Cherry'] 
  console.log(fruits); 
  // 原数组仍然是 ['Apple', 'Banana', 'Cherry', 'Date'] 
  // 使用负索引 
  let lastFruits = fruits.slice(-2); 
  // 从倒数第二个元素开始提取 console.log(lastFruits); 
  // ['Cherry', 'Date']

总结

  • splice:用于修改原数组(添加、删除或替换元素),返回被删除的元素。
  • slice:用于提取数组的片段,返回一个新的数组,不会修改原数组。
相关推荐
刘卓航众创芯云服务部6 分钟前
Kimi K3复杂任务实测:我把团队最头疼的三个场景全跑了一遍
前端
柒星栈9 分钟前
PHP 源码怎么加密防破解?三套方案实战指南
开发语言·php·android studio
软件开发技术深度爱好者10 分钟前
小学英语单词魔法学园HTML5实现
javascript·html5·英语学习
勉灬之15 分钟前
Next.js + Prisma 跨平台部署踩坑记
开发语言·javascript·ecmascript
cll_86924189116 分钟前
一个好看的Wordpress博客文字css样式
前端·css·ui
糖果店的幽灵21 分钟前
langgraph分支之 - 动态分支(Dynamic Branch)
java·前端·javascript·人工智能·langgraph
meilindehuzi_a31 分钟前
Workflow 与 Agent 有什么区别:从 LangChain 流水线到智能体决策
前端·人工智能
三翼鸟数字化技术团队32 分钟前
一种前端大屏适配方案
前端·css
这是个栗子39 分钟前
前端开发中的常用工具函数(九)
开发语言·javascript·ecmascript·at
蓝创工坊Blue Foundry1 小时前
图片文字提取到 Excel:批量任务如何先定义要交付的字段
运维·服务器·开发语言·数据库·自动化·ocr·excel