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:用于提取数组的片段,返回一个新的数组,不会修改原数组。
相关推荐
兆子龙25 分钟前
用 Auto.js 实现挂机脚本:从找图点击到循环自动化
前端·架构
SuperEugene30 分钟前
表单最佳实践:从 v-model 到自定义表单组件(含校验)
前端·javascript·vue.js
昨晚我输给了一辆AE8631 分钟前
为什么现在不推荐使用 React.FC 了?
前端·react.js·typescript
不会敲代码131 分钟前
深入浅出 React 闭包陷阱:从现象到原理
前端·react.js
不会敲代码134 分钟前
React性能优化:深入理解useMemo和useCallback
前端·javascript·react.js
Dilettante25835 分钟前
我的 Monorepo 实践经验:从基础概念到最佳实践
前端·前端工程化
只会cv的前端攻城狮1 小时前
Elpis-Core — 融合 Koa 洋葱圈模型实现服务端引擎
前端·后端
Java小卷2 小时前
流程设计器为啥选择diagram-js
前端·低代码·工作流引擎
HelloReader2 小时前
Isolation Pattern(隔离模式)在前端与 Core 之间加一道“加密网关”,拦截与校验所有 IPC
前端
兆子龙3 小时前
从 float 到 Flex/Grid:CSS 左右布局简史与「刁钻」布局怎么搞
前端·架构