JS數(shù)組中的splice()方法及用原生寫法分享

更新時間：2024年11月16日 12:56:13 投稿：mdxy-dxy

這篇文章主要介紹了JS中數(shù)組的splice()方法,包括其用途、參數(shù)（起始位置、刪除元素個數(shù)、添加元素等）、不同參數(shù)情況的處理方式,還詳細講解了用原生JS手寫splice()方法的思路和代碼實現(xiàn)

一、splice是什么

splice()方法是用來對數(shù)組進行增、刪操作，該方法返回被刪除的元素，改變原數(shù)組

二、splice()方法接受三個及以上的參數(shù):

第一個參數(shù): 第一個參數(shù)是起始位置（數(shù)組的索引）
第二個參數(shù): 第二個參數(shù)是要刪除的元素個數(shù)，如果該參數(shù)是負數(shù)則默認為0
第三個參數(shù)及往后參數(shù): 這些參數(shù)是準備要添加進數(shù)組的參數(shù)

三、參數(shù)介紹

1.如果第一個參數(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]

如果第一個參數(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) // []

如果第一個參數(shù)是一個負數(shù) 從數(shù)組末端開始刪除元素刪除的個數(shù)為參數(shù)值

let arr = [1, 2, 3, 4, 5]
let newArr = arr.splice(-2) // 從數(shù)組末端刪除 2 個元素
console.log(arr) // [1, 2, 3]
console.log(newArr) // [4, 5]

如果第一個參數(shù)為負數(shù)并且該負數(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]

四、當有兩個參數(shù)時

第一個參數(shù)為起始位置，第二個參數(shù)是要刪除元素的個數(shù)，如果第二個參數(shù)為負數(shù)則默認為0

 let arr = [1, 2, 3, 4, 5]
let newArr = arr.splice(2, 2) // 兩個參數(shù)  起始值從索引0開始算 這里起始值為3 刪除兩個元素包括自身
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  刪除兩個元素包括自身
console.log(arr1) // [1,2,3]
console.log(newArr1) // [4, 5]

五、原生JS手寫splice()方法

思路

1、當參數(shù)只有一個時，判斷該參數(shù)的特殊情況和正常情況

特殊情況:

(1). 當參數(shù)的值為undefined 那么直接將該參數(shù)賦值為0 (2). 當該參數(shù)的值比數(shù)組最后一個元素的索引值還大那么直接返回一個空數(shù)組 (3). 當該參數(shù)為0，或者該參數(shù)的絕對值比數(shù)組的長度還大或者傳遞進來的不是數(shù)字，那么給最終要返回的數(shù)組賦值，并且原數(shù)組的長度設置為0

正常情況:

1、該參數(shù)是一個合理的正數(shù)和合理的負數(shù)，那么通過for循環(huán)給新數(shù)組賦值，減少原數(shù)組的長度

2、當參數(shù)有兩個時，先判斷第二個參數(shù)是否合理，為負數(shù)或者不是數(shù)字轉(zhuǎn)換為0

調(diào)用自定義的方法，把第一個參數(shù)傳進去獲取被刪除的所有元素，在通過slice方法截取出第二個參數(shù)要被刪除的個數(shù)

3、當參數(shù)有三個及以上時，通過判斷第一個參數(shù)得到一個起始位置start，

如果第一個參數(shù)為負數(shù)且它的絕對值大于原數(shù)組的長度，那么起始位置就是0，否則就是原數(shù)組的長度加上第一個參數(shù)，如果第一個參數(shù)為正數(shù)且在數(shù)組最后一個元素索引的范圍內(nèi)，那么起始位置就是第一個參數(shù)

調(diào)用自定義方法，把前面兩個參數(shù)傳進去，獲得被刪除的元素，用（middle）表示，此時的this(原數(shù)組)就是剩余的元素,把left先賦值給最后將要返回的數(shù)組，在將middle清空，將第三個及以上的參數(shù)push進middle中，這樣就得到了由新元素組成的數(shù)組，此時的原數(shù)組就是剩下的參數(shù)，通過起始位置截取this，得到end數(shù)組，在把this起始位置前的元素刪除掉，那么就得到了頭部(this)，中間部分(middle)，右邊(end)，再分別把中間部分和右邊部分push到this中就得到了一個改變后的新數(shù)組

 Array.prototype.mySplice = function () {
        // 最終返回的新數(shù)組
        let newArr = []
        // 一個參數(shù)
        if (arguments.length === 1) {
          // 如果第一個參數(shù)傳入的是undefined或null 直接賦值為0
          if (arguments[0] === undefined) {
            arguments[0] = 0
          }
          // 如果第一個參數(shù)比數(shù)組最后一個索引還大 那就一個都不會刪除 直接返回空數(shù)組
          if (arguments[0] > this.length - 1) {
            return newArr
          }
          // 如果第一個參數(shù)是負數(shù)小于原數(shù)組的負值    第一個參數(shù)為0     第一個參數(shù)傳入進來的不是數(shù)字
          if (arguments[0] <= -this.length || arguments[0] == 0 || typeof arguments[0] === 'string') {
            // 給newArr賦值
            newArr = [...this]
            // 清空原數(shù)組
            this.length = 0
            return newArr
          }
          // 如果是一個合理的負數(shù)
          if (arguments[0] < 0 && arguments[0] > -this.length) {
            // 轉(zhuǎn)為正數(shù)
            arguments[0] *= -1
            // 遍歷第一個參數(shù)的起始位置
            for (let i = 0; i < arguments[0]; i++) {
              // 從第0項起給newArr
              newArr[i] = this[this.length - arguments[0] + i]
            }
            // 如果第一個參數(shù)為負數(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
          }
        }
 
        // 兩個參數(shù)
        if (arguments.length === 2) {
          // 第二個參數(shù)為負數(shù)默認為0     為字符串              為undefined 或null
          if (arguments[1] < 0 || typeof arguments[1] === 'string' || arguments[1] === undefined) {
            arguments[1] = 0
          }
          //  刪除部分   假如只有一個參數(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
        }
 
        // 三個參數(shù)及以上
        if (arguments.length >= 3) {
          // 定義哪里開始刪除的位置
          let start = null
          // 如果 第一個參數(shù)比原數(shù)組的負長度還小 那就賦值為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() 算是最強大的了，它可以用于插入、刪除或替換數(shù)組的元素。

刪除：用于刪除元素，兩個參數(shù)，第一個參數(shù)（要刪除第一項的位置），第二個參數(shù)（要刪除的項數(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ù)組指定位置插入任意項元素。三個參數(shù)，第一個參數(shù)（其實位置），第二個參數(shù)（0），第三個參數(shù)（插入的項）

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ù)組指定位置插入任意項元素，同時刪除任意數(shù)量的項，三個參數(shù)。第一個參數(shù)（起始位置），第二個參數(shù)（刪除的項數(shù)），第三個參數(shù)（插入任意數(shù)量的項）

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: