JS數(shù)組中的splice()方法及用原生寫法分享
一、splice是什么
splice()方法是用來對數(shù)組進(jìn)行增、刪操作,該方法返回被刪除的元素,改變原數(shù)組
二、splice()方法接受三個(gè)及以上的參數(shù):
- 第一個(gè)參數(shù): 第一個(gè)參數(shù)是起始位置(數(shù)組的索引)
- 第二個(gè)參數(shù): 第二個(gè)參數(shù)是要?jiǎng)h除的元素個(gè)數(shù),如果該參數(shù)是負(fù)數(shù)則默認(rèn)為0
- 第三個(gè)參數(shù)及往后參數(shù): 這些參數(shù)是準(zhǔn)備要添加進(jìn)數(shù)組的參數(shù)
三、參數(shù)介紹
1.如果第一個(gè)參數(shù)為正數(shù) 從索引 1 開始刪除后面的所有元素包括自身
let arr = [1, 2, 3, 4, 5] let newArr = arr.splice(1) // 從索引 1 開始刪除后面的所有元素包括自身 console.log(arr) // [1] console.log(newArr) // [2, 3, 4, 5]
如果第一個(gè)參數(shù)大于最大索引值 則返回空數(shù)組
let arr = [1, 2, 3, 4, 5] let newArr = arr.splice(5) // 大于最大索引值(4) console.log(arr) // [1, 2, 3, 4, 5] console.log(newArr) // []
如果第一個(gè)參數(shù)是一個(gè)負(fù)數(shù) 從數(shù)組末端開始刪除元素刪除的個(gè)數(shù)為參數(shù)值
let arr = [1, 2, 3, 4, 5] let newArr = arr.splice(-2) // 從數(shù)組末端刪除 2 個(gè)元素 console.log(arr) // [1, 2, 3] console.log(newArr) // [4, 5]
如果第一個(gè)參數(shù)為負(fù)數(shù)并且該負(fù)數(shù)的絕對值要小于或等于數(shù)組長度
let arr = [1, 2, 3, 4, 5] let newArr = arr.splice(-5) // 該參數(shù)的絕對值小于等于數(shù)組長度 console.log(arr) // [] console.log(newArr) // [1, 2, 3, 4, 5]
四、當(dāng)有兩個(gè)參數(shù)時(shí)
第一個(gè)參數(shù)為起始位置,第二個(gè)參數(shù)是要?jiǎng)h除元素的個(gè)數(shù),如果第二個(gè)參數(shù)為負(fù)數(shù)則默認(rèn)為0
let arr = [1, 2, 3, 4, 5] let newArr = arr.splice(2, 2) // 兩個(gè)參數(shù) 起始值從索引0開始算 這里起始值為3 刪除兩個(gè)元素包括自身 console.log(arr) // [1,2,5] console.log(newArr) // [3, 4] let arr1 = [1, 2, 3, 4, 5] let newArr1 = arr1.splice(-2, 2) // 從數(shù)組末尾開始算起始值為數(shù)組元素中的3 刪除兩個(gè)元素包括自身 console.log(arr1) // [1,2,3] console.log(newArr1) // [4, 5]
五、原生JS手寫splice()方法
思路
1、當(dāng)參數(shù)只有一個(gè)時(shí),判斷該參數(shù)的特殊情況和正常情況
特殊情況:
(1). 當(dāng)參數(shù)的值為undefined 那么直接將該參數(shù)賦值為0 (2). 當(dāng)該參數(shù)的值比數(shù)組最后一個(gè)元素的索引值還大 那么直接返回一個(gè)空數(shù)組 (3). 當(dāng)該參數(shù)為0,或者該參數(shù)的絕對值比數(shù)組的長度還大或者傳遞進(jìn)來的不是數(shù)字,那么給最終要返回的數(shù)組賦值,并且原數(shù)組的長度設(shè)置為0
正常情況:
1、該參數(shù)是一個(gè)合理的正數(shù)和合理的負(fù)數(shù),那么通過for循環(huán)給新數(shù)組賦值,減少原數(shù)組的長度
2、當(dāng)參數(shù)有兩個(gè)時(shí),先判斷第二個(gè)參數(shù)是否合理,為負(fù)數(shù)或者不是數(shù)字轉(zhuǎn)換為0
調(diào)用自定義的方法,把第一個(gè)參數(shù)傳進(jìn)去獲取被刪除的所有元素,在通過slice方法截取出第二個(gè)參數(shù)要被刪除的個(gè)數(shù)
3、當(dāng)參數(shù)有三個(gè)及以上時(shí), 通過判斷第一個(gè)參數(shù)得到一個(gè)起始位置start,
如果第一個(gè)參數(shù)為負(fù)數(shù)且它的絕對值大于原數(shù)組的長度,那么起始位置就是0,否則就是原數(shù)組的長度加上第一個(gè)參數(shù),如果第一個(gè)參數(shù)為正數(shù)且在數(shù)組最后一個(gè)元素索引的范圍內(nèi),那么起始位置就是第一個(gè)參數(shù)
調(diào)用自定義方法,把前面兩個(gè)參數(shù)傳進(jìn)去,獲得被刪除的元素,用(middle)表示,此時(shí)的this(原數(shù)組)就是剩余的元素,把left先賦值給最后將要返回的數(shù)組,在將middle清空,將第三個(gè)及以上的參數(shù)push進(jìn)middle中,這樣就得到了由新元素組成的數(shù)組,此時(shí)的原數(shù)組就是剩下的參數(shù),通過起始位置截取this,得到end數(shù)組,在把this起始位置前的元素刪除掉,那么就得到了頭部(this),中間部分(middle),右邊(end),再分別把中間部分和右邊部分push到this中就得到了一個(gè)改變后的新數(shù)組
Array.prototype.mySplice = function () {
// 最終返回的新數(shù)組
let newArr = []
// 一個(gè)參數(shù)
if (arguments.length === 1) {
// 如果第一個(gè)參數(shù)傳入的是undefined或null 直接賦值為0
if (arguments[0] === undefined) {
arguments[0] = 0
}
// 如果第一個(gè)參數(shù)比數(shù)組最后一個(gè)索引還大 那就一個(gè)都不會(huì)刪除 直接返回空數(shù)組
if (arguments[0] > this.length - 1) {
return newArr
}
// 如果第一個(gè)參數(shù)是負(fù)數(shù)小于原數(shù)組的負(fù)值 第一個(gè)參數(shù)為0 第一個(gè)參數(shù)傳入進(jìn)來的不是數(shù)字
if (arguments[0] <= -this.length || arguments[0] == 0 || typeof arguments[0] === 'string') {
// 給newArr賦值
newArr = [...this]
// 清空原數(shù)組
this.length = 0
return newArr
}
// 如果是一個(gè)合理的負(fù)數(shù)
if (arguments[0] < 0 && arguments[0] > -this.length) {
// 轉(zhuǎn)為正數(shù)
arguments[0] *= -1
// 遍歷第一個(gè)參數(shù)的起始位置
for (let i = 0; i < arguments[0]; i++) {
// 從第0項(xiàng)起給newArr
newArr[i] = this[this.length - arguments[0] + i]
}
// 如果第一個(gè)參數(shù)為負(fù)數(shù) 就是從數(shù)組末尾開始刪除第一位參數(shù)值的元素
this.length -= arguments[0]
return newArr
}
// 如果是正數(shù) 并且在合理范圍內(nèi)
if (arguments[0] > 0 && arguments[0] <= this.length - 1) {
for (let i = this.length - 1; i > arguments[0] - 1; i--) {
// 將刪除的元素賦值給newArr
newArr[i - arguments[0]] = this[i]
// 每循環(huán)一次數(shù)組長度減1
this.length--
}
return newArr
}
}
// 兩個(gè)參數(shù)
if (arguments.length === 2) {
// 第二個(gè)參數(shù)為負(fù)數(shù)默認(rèn)為0 為字符串 為undefined 或null
if (arguments[1] < 0 || typeof arguments[1] === 'string' || arguments[1] === undefined) {
arguments[1] = 0
}
// 刪除部分 假如只有一個(gè)參數(shù) 拿到被刪除的部分
let deletePart = this.mySplice(arguments[0])
// 剩下的 從合適的位置截取出不需要被刪除的元素
let residue = deletePart.slice(arguments[1])
// 截取出被刪除的放入新數(shù)組中 從0開始截取出被刪除的元素
let newArr = deletePart.slice(0, arguments[1])
// 遍歷沒有被刪除的元素 push到this中
for (let i = 0; i < residue.length; i++) {
this.push(residue[i])
}
return newArr
}
// 三個(gè)參數(shù)及以上
if (arguments.length >= 3) {
// 定義哪里開始刪除的位置
let start = null
// 如果 第一個(gè)參數(shù)比原數(shù)組的負(fù)長度還小 那就賦值為0
if (arguments[0] <= -this.length) {
arguments[0] = 0
start = 0
} else {
// 轉(zhuǎn)為正數(shù)后的起始值: 例子 start = 6 + -1
start = this.length + arguments[0]
}
// 有效正數(shù)范圍內(nèi)的起始值
if (arguments[0] >= 0 && arguments[0] < this.length) {
start = arguments[0]
}
// 拿到被刪除的元素 arr = [1, 2, 3, 4, 5, 6] arr.mySplice(3,2,0,0)
let result = this.mySplice(arguments[0], arguments[1]) // resulte:[5,6]
// 截取被刪除的元素
let newArr = result.slice(0, arguments[1]) // 獲取返回值 newArr:[5,6]
// 將要添加的元素放入被刪除的素組中
for (let i = 2; i < arguments.length; i++) {
result.push(arguments[i]) // resulte:[5,6,0,0]
}
// 刪除被刪除的元素 剩下的就是需要添加的元素
for (let i = 0; i < newArr.length; i++) {
result.shift(arguments[i]) // results:[0,0]
}
// start:3 this:[1,2,3,4]
let end = this.slice(start === 0 ? arguments[1] : start) // end:[6]
if (start === 0) {
for (let i = 0; i < result.length; i++) {
this.unshift(result[i])
}
} else {
for (let i = 0; i < end.length; i++) {
this.pop() // this:[1,2,3]
}
for (let i = 0; i < result.length; i++) {
this.push(result[i]) // this:[1,2,3,0,0]
}
for (let i = 0; i < end.length; i++) {
this.push(end[i]) // this:[1,2,3,0,0,6]
}
}
return newArr
}
}六、js中splice()詳解(插入、刪除或替換數(shù)組的元素)
處理數(shù)組的方法很多,javascript 的splice() 算是最強(qiáng)大的了,它可以用于插入、刪除或替換數(shù)組的元素。
刪除:用于刪除元素,兩個(gè)參數(shù),第一個(gè)參數(shù)(要?jiǎng)h除第一項(xiàng)的位置),第二個(gè)參數(shù)(要?jiǎng)h除的項(xiàng)數(shù))
Remove 1 element from index 3 var myFish = ["angel", "clown", "drum", "mandarin", "surgeon"]; var removed = myFish.splice(3, 1); // removed is ["mandarin"] // myFish is ["angel", "clown", "drum", "surgeon"]
插入:向數(shù)組指定位置插入任意項(xiàng)元素。三個(gè)參數(shù),第一個(gè)參數(shù)(其實(shí)位置),第二個(gè)參數(shù)(0),第三個(gè)參數(shù)(插入的項(xiàng))
Remove 0 elements from index 2, and insert "drum" var myFish = ["angel", "clown", "mandarin", "surgeon"]; var removed = myFish.splice(2, 0, "drum"); // myFish is ["angel", "clown", "drum", "mandarin", "surgeon"] // removed is [], no elements removed
替換:向數(shù)組指定位置插入任意項(xiàng)元素,同時(shí)刪除任意數(shù)量的項(xiàng),三個(gè)參數(shù)。第一個(gè)參數(shù)(起始位置),第二個(gè)參數(shù)(刪除的項(xiàng)數(shù)),第三個(gè)參數(shù)(插入任意數(shù)量的項(xiàng))
Remove 1 element from index 2, and insert "trumpet" var myFish = ["angel", "clown", "drum", "surgeon"]; var removed = myFish.splice(2, 1, 'trumpet'); // myFish is ["angel", "clown", "trumpet", "surgeon"] // removed is ["drum"]
到此這篇關(guān)于JS數(shù)組中的splice()方法及用原生寫法分享的文章就介紹到這了,更多相關(guān)JS splice()用法介紹內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于BootStrap的Metronic框架實(shí)現(xiàn)頁面鏈接收藏夾功能按鈕移動(dòng)收藏記錄(使用Sortable進(jìn)行拖動(dòng)排序)
這篇文章主要介紹了基于BootStrap的Metronic框架實(shí)現(xiàn)頁面鏈接收藏夾功能按鈕移動(dòng)收藏記錄(使用Sortable進(jìn)行拖動(dòng)排序)的相關(guān)資料,非常不錯(cuò),需要的朋友可以參考下2016-08-08
Easyui form combobox省市區(qū)三級聯(lián)動(dòng)
這篇文章主要介紹了Easyui form combobox省市區(qū)三級聯(lián)動(dòng) 的相關(guān)資料,需要的朋友可以參考下2016-01-01
使用JS進(jìn)行目錄上傳(相當(dāng)于批量上傳)
腳本使用了WScript.Shell和Scripting.FileSystemObject的組件,所以必須要在IE下面和打開安全選項(xiàng)中運(yùn)行; 另外還用到了Jquery. 代碼只是客戶端代碼, 至于服務(wù)器的接收代碼網(wǎng)上好多了2010-12-12
一文分享50個(gè)極致實(shí)用JavaScript單行代碼(收藏即用)
本文整理了50個(gè)生產(chǎn)可用的原生單行JS/TS代碼片段,覆蓋字符串處理、數(shù)組運(yùn)算、日期格式化等高頻開發(fā)場景,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2026-04-04
JavaScript中數(shù)組嵌套對象排序方法的示例詳解
在?JavaScript?中,可以使用?sort()?方法對包含嵌套對象的數(shù)組進(jìn)行排序,本文將通過三個(gè)簡單的示例為大家進(jìn)行簡單的介紹,需要的可以參考下2024-03-03
IE中JS跳轉(zhuǎn)丟失referrer問題的2個(gè)解決方法
這篇文章主要介紹了IE中JS跳轉(zhuǎn)丟失referrer問題的2個(gè)解決方法,算是IE的一個(gè)BUG吧,本文提供了2個(gè)方法解決這個(gè)問題,需要的朋友可以參考下2014-07-07

