JavaScript中数组slice和splice的对比小结

今天重温了一下Javascript,看到了数组的方法,其中有两个比较相似的方法——splice和splice,看着很像,就是多了一个p,但是用法却相当不一样。

在使用中,可以通过选择一个具有强语义表达性的 API 来减少混淆的发生。

1、slice

slice是指定在一个数组中的元素创建一个新的数组,即原数组不会变


定义和用法
slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
语法
stringObject.slice(start,end)
参数 描述
start 要抽取的片断的起始下标。如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。
end 紧接着要抽取的片段的结尾的下标。若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。
返回值
一个新的字符串。包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。
说明
String 对象的方法 slice()、substring() 和 substr() (不建议使用)都可返回字符串的指定部分。slice() 比 substring() 要灵活一些,因为它允许使用负数作为参数。slice() 与 substr() 有所不同,因为它用两个字符的位置来指定子串,而 substr() 则用字符位置和长度来指定子串。
还要注意的是,String.slice() 与 Array.slice() 相似。

例子:

'abc'.slice(1,2)   // "b"
[14, 3, 77].slice(1, 2) // [3]
var x = [14, 3, 77];
var y = x.slice(1, 2);
console.log(x);   // [14, 3, 77]
console.log(y);   // [3]

2、splice

splice是JS中数组功能最强大的方法,它能够实现对数组元素的删除、插入、替换操作,返回值为被操作的值。

定义和用法
splice() 方法用于插入、删除或替换数组的元素。
语法
arrayObject.splice(index,howmany,element1,.....,elementX)
参数 描述
index
必需。规定从何处添加/删除元素。
该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany
必需。规定应该删除多少元素。必须是数字,但可以是 "0"。
如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
element1 可选。规定要添加到数组的新元素。从 index 所指的下标处开始插入。
elementX 可选。可向数组添加若干元素。
返回值
如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组
说明
splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
提示和注释
注释:请注意,splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。

例子:

  splice删除:color.splice(1,2) (删除color中的1、2两项);

     splice插入:color.splice(1,0,'brown','pink') (在color键值为1的元素前插入两个值);

     splice替换:color.splice(1,2,'brown','pink')  (在color中替换1、2元素);

虽然 splice(15.4.4.12 节)也需要(至少)两个参数,但它的意义则完全不同。

[14, 3, 77].slice(1, 2)  // [3]
[14, 3, 77].splice(1, 2) // [3, 77]

var x = [14, 3, 77]
var y = x.splice(1, 2)
console.log(x)   // [14]
console.log(y)   // [3, 77]




JavaScript数组有两个常用的方法:slicesplice。 1. slice 方法: slice 方法是用于从数组提取指定范围的元素,然后返回一个新的数组。它接受两个参数,即开始索引和结束索引(不包括结束索引本身),如果省略结束索引,则会一直提取到数组末尾。原始数组不会被修改。 示例: ```javascript const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi']; const slicedFruits = fruits.slice(1, 4); // 从索引 1 到 4(不包括 4)提取元素 console.log(slicedFruits); // 输出:['banana', 'orange', 'grape'] const slicedFruits2 = fruits.slice(2); // 从索引 2 开始提取元素到数组末尾 console.log(slicedFruits2); // 输出:['orange', 'grape', 'kiwi'] console.log(fruits); // 输出原始数组,不受 slice 方法影响:['apple', 'banana', 'orange', 'grape', 'kiwi'] ``` 2. splice 方法: splice 方法用于修改原始数组,它可以用于删除、插入或替换数组的元素。它接受三个或更多参数,第一个参数是开始索引,第二个参数是需要删除的元素个数,之后的参数是要插入到数组的新元素(可选)。splice 方法会返回一个包含被删除元素的数组。 示例: ```javascript const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi']; const deletedFruits = fruits.splice(2, 2); // 从索引 2 开始删除 2 个元素 console.log(deletedFruits); // 输出:['orange', 'grape'] console.log(fruits); // 输出被修改后的数组:['apple', 'banana', 'kiwi'] fruits.splice(1, 0, 'pear', 'melon'); // 从索引 1 开始插入新元素 console.log(fruits); // 输出被修改后的数组:['apple', 'pear', 'melon', 'banana', 'kiwi'] fruits.splice(4, 1, 'mango'); // 从索引 4 开始替换一个元素 console.log(fruits); // 输出被修改后的数组:['apple', 'pear', 'melon', 'banana', 'mango'] ``` 希望这些示例能够帮助你理解 slicesplice 方法的用法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值