-
定义和功能
slice()
方法 :slice()
方法用于从一个数组(或字符串)中提取指定范围的元素(或字符),它不会改变原始数组(或字符串),而是返回一个新的数组(或字符串)。- 语法为
array.slice(start, end)
(对于数组)或string.slice(start, end)
(对于字符串)。其中start
是开始提取的索引(包含),end
是结束提取的索引(不包含)。如果省略end
参数,则提取从start
到数组(或字符串)末尾的所有元素(或字符)。
splice()
方法 :splice()
方法主要用于修改数组。它可以删除数组中的元素、插入新元素或者同时进行删除和插入操作。这个方法会直接改变原始数组。- 语法为
array.splice(start, deleteCount, item1, item2,...)
。其中start
是开始修改的索引,deleteCount
是要删除的元素个数,item1, item2,...
是要插入的新元素。
-
返回值
-
slice()
方法 :-
返回一个包含提取元素(或字符)的新数组(或新字符串)。例如: 收起
javascript
let arr = [1, 2, 3, 4, 5]; let newArr = arr.slice(1, 3); console.log(newArr); // [2, 3] console.log(arr); // [1, 2, 3, 4, 5](原始数组不变)
对于字符串也类似:
收起
javascript
let str = "Hello World"; let newStr = str.slice(0, 5); console.log(newStr); // "Hello" console.log(str); // "Hello World"(原始字符串不变)
-
-
splice()
方法 :-
返回一个包含被删除元素的数组。如果没有删除元素,则返回一个空数组。例如: 收起
javascript
let arr = [1, 2, 3, 4, 5]; let removedItems = arr.splice(1, 2); console.log(removedItems); // [2, 3] console.log(arr); // [1, 4, 5](原始数组已改变)
-
-
-
参数使用的区别
-
slice()
方法 :-
它的参数主要是用于指定提取的范围。参数可以是正数、负数。正数表示从前往后的索引,负数表示从后往前的索引。例如: 收起
javascript
let arr = [1, 2, 3, 4, 5]; // 从倒数第二个元素开始提取到末尾 let newArr = arr.slice(-2); console.log(newArr); // [4, 5]
-
-
splice()
方法 :-
参数比较灵活。
start
参数指定操作的起始位置,deleteCount
用于指定要删除的元素个数。如果deleteCount
为 0,则表示不删除元素,只插入新元素。例如:收起
javascript
let arr = [1, 2, 3, 4, 5]; // 在索引为2的位置插入两个元素 arr.splice(2, 0, 6, 7); console.log(arr); // [1, 2, 6, 7, 3, 4, 5]
-
-
-
应用场景
slice()
方法 :- 当需要从一个数组或字符串中获取部分数据,而不改变原始数据时,就可以使用
slice()
。例如,在处理数据视图或者复制数据子集时很有用。在函数式编程中,也经常用于获取数据副本,以避免副作用。
- 当需要从一个数组或字符串中获取部分数据,而不改变原始数据时,就可以使用
splice()
方法 :- 当需要对数组进行实际的修改,如删除元素、插入元素或者重新排列元素顺序时,使用
splice()
。比如在实现一个数据列表的增删操作时,就可以使用这个方法来更新数组的内容。
- 当需要对数组进行实际的修改,如删除元素、插入元素或者重新排列元素顺序时,使用
javaScript中slice()和splice()的用法与区别
Komorebi_99992024-12-21 14:33
相关推荐
太阳的后裔39 分钟前
随笔一些用C#封装的控件tianyuanwo39 分钟前
Rust语言组件RPM包编译原理与Cargo工具详解dy17173 小时前
element-plus表格默认展开有子的数据CodeCraft Studio5 小时前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64零点零一5 小时前
VS+QT的编程开发工作:关于QT VS tools的使用 qt的官方帮助2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析程序员的世界你不懂7 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇索迪迈科技7 小时前
网络请求库——Axios库深度解析gnip7 小时前
JavaScript二叉树相关概念lingchen19067 小时前
MATLAB的数值计算(三)曲线拟合与插值