欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript數(shù)組操作學(xué)習(xí)之splice()函數(shù)入門與精通

 更新時間：2024年11月16日 13:07:04   作者：周文豪  
這篇文章介紹了JavaScript數(shù)組操作中的splice()方法,詳細講解了其定義、語法和用法,并通過實例展示了如何使用該方法進行數(shù)組元素的添加、刪除和替換,需要的朋友可以參考下

一、JS中splice()方法

1、定義和用法

splice() 方法為從數(shù)組中添加/刪除項目，然后返回被刪除的項目。

注釋：該方法會改變原始數(shù)組。

2、語法

arrayObject.splice(index,howmany,item1,.....,itemX)

3、說明

splice() 方法可刪除從 index 處開始的零個或多個元素，并且用參數(shù)列表中聲明的一個或多個值來替換那些被刪除的元素。

如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數(shù)組。

二、splice入門

splice方法：通過刪除（兩個參數(shù)）或替換現(xiàn)有元素（三個參數(shù)）或者原地添加新的元素（三個參數(shù)）來修改數(shù)組，并以數(shù)組形式返回被修改的內(nèi)容。此方法會改變原數(shù)組。

參數(shù)：
index —— 必需。整數(shù)，規(guī)定添加/刪除項目的位置，使用負數(shù)可從數(shù)組結(jié)尾處規(guī)定位置（從1開始）。
howmany —— 必需。要刪除的項目數(shù)量。如果設(shè)置為 0，則不會刪除項目。
item1, …, itemX —— 可選。向數(shù)組添加的新項目。

返回值：Array —— 包含被刪除項目的新數(shù)組，如果有的話。

1、只有一個參數(shù)

splice(index) ——> 從index的位置開始，刪除之后的所有元素(包括第index個)

let array = [0,1,2,3,4,5,6]
document.write("原數(shù)組為："+ array + "<br />")
let arrBack = array.splice(2)
document.write("array：",array + "<br />")
document.write("arrBack：",arrBack)

結(jié)果：

原數(shù)組為：0,1,2,3,4,5,6
array：0,1
arrBack：2,3,4,5,6

若 index < 0 , 則刪除最后倒數(shù)第index個元素，從1開始數(shù)。

let array = [0,1,2,3,4,5,6]
document.write("原數(shù)組為："+ array + "<br />")
let arrBack = array.splice(-3)
document.write("array：",array + "<br />")
document.write("arrBack：",arrBack)

結(jié)果：

原數(shù)組為：0,1,2,3,4,5,6
array：0,1,2,3
arrBack：4,5,6

2、兩個參數(shù)（指定索引刪除）

splice(index,howmany) ——> 刪除從index位置開始的數(shù)，howmany為刪除的個數(shù)。若 howmany 小于等于 0，則不刪除。

splice(2,1)表示刪除從index=2（即第三個元素）開始，刪除一個，即第三個元素。

let array = [0,1,2,3,4,5,6]
document.write("原數(shù)組為："+ array + "<br />")
let arrBack = array.splice(2,1)
document.write("array：",array + "<br />")
document.write("arrBack：",arrBack)

結(jié)果：

原數(shù)組為：0,1,2,3,4,5,6
array：0,1,3,4,5,6
arrBack：2

splice(2,0)表示刪除從index=2（即第三個元素）開始，刪除0個，即不刪除

let array = [0,1,2,3,4,5,6]
document.write("原數(shù)組為："+ array + "<br />")
let arrBack = array.splice(2,0)
document.write("array：",array + "<br />")
document.write("arrBack：",arrBack)

結(jié)果：

原數(shù)組為：0,1,2,3,4,5,6
array：0,1,2,3,4,5,6
arrBack：

3、大于等于3個元素（新對象替換老對象）

splice(index ,howmany , item1, …, itemX )

當(dāng)index >0時
（1）、howmany 為0時，不刪除只添加 —— 在index位置前添加item1, …, itemX

（2）、howmany > 0時，刪除且添加 —— 刪除從index位置開始的數(shù)，howmany為刪除的個數(shù)，并且在index位置添加item1, …, itemX

當(dāng)index <0時，最后一個數(shù)為 -1，依次倒數(shù)第二個數(shù)為-2，...

（1）、howmany 為0時,不刪除只添加 —— 在-index位置前添加item1, …, itemX

（2）、howmany > 0時，刪除且添加 —— 刪除從-index位置開始的數(shù)，howmany為刪除的個數(shù)，并且在-index位置前(相當(dāng)于往后 -2前是 -1)添加item1, …, itemX的數(shù)

splice(2,0,8,9)表示刪除從index=2（即第三個元素）開始，刪除0個，即不刪除；并在第三個元素前添加8，9

let array = [0,1,2,3,4,5,6]
document.write("原數(shù)組為："+array + "&lt;br /&gt;")
let arrBack  = array.splice(2,0,8,9)
document.write("array：",array + "&lt;br /&gt;")
document.write("arrBack：",arrBack)

結(jié)果：

原數(shù)組為：0,1,2,3,4,5,6
array：0,1,8,9,2,3,4,5,6
arrBack：

splice(5,3,8,9)表示刪除從index=5（即第六個元素）開始，刪除3個(包含第六個)，后面只剩兩個，全部刪除；并在第六個元素位置添加8，9

let array = [0,1,2,3,4,5,6]
document.write("原數(shù)組為："+array + "&lt;br /&gt;")
let arrBack  = array.splice(5,3,8,9)
document.write("array：",array + "&lt;br /&gt;")
document.write("arrBack：",arrBack)

結(jié)果：

原數(shù)組為：0,1,2,3,4,5,6
array：0,1,2,3,4,8,9
arrBack：5,6

splice(-2,0,8,9)表示刪除從index=-2（即倒數(shù)第二個元素）開始，刪除0個，即不刪除；并在倒數(shù)第二個元素前添加8，9

let array = [0,1,2,3,4,5,6]
document.write("原數(shù)組為："+array + "&lt;br /&gt;")
let arrBack  = array.splice(-2,0,8,9)
document.write("array：",array + "&lt;br /&gt;")
document.write("arrBack：",arrBack)

結(jié)果：

原數(shù)組為：0,1,2,3,4,5,6
array：0,1,2,3,4,8,9,5,6
arrBack：

splice(-2,3,8,9)表示刪除從index=-2（即倒數(shù)第二個元素）開始，刪除3個，即5，6（只有兩個）；并在倒數(shù)第二個元素前添加8，9

let array = [0,1,2,3,4,5,6]
document.write("原數(shù)組為："+array + "&lt;br /&gt;")
let arrBack  = array.splice(-2,3,8,9)
document.write("array：",array + "&lt;br /&gt;")
document.write("arrBack：",arrBack)

結(jié)果：

原數(shù)組為：0,1,2,3,4,5,6
array：0,1,2,3,4,8,9
arrBack：5,6

三、項目實戰(zhàn)

根據(jù)索引刪除

1、當(dāng)勾選復(fù)選框，觸發(fā)change事件，執(zhí)行函數(shù)

handleItemChange(e){
      // 如果是添加勾選，則執(zhí)行以下代碼
      if(e.detail.value.length > 0){
        var itemList = e.detail.value
        itemList.forEach(item =>{
          var row = item.split(',')
          var list = []
          const obj = {name: row[1],value: row[0]}
          list.push(obj)
          this.setData({
            ids: this.data.ids.concat(row[0]),
            names: this.data.names.concat(row[1]),
            tagList: [...this.data.tagList,...list]
          })
          this.data.dataList.forEach(item =>{
            if(item.id == row[0]){
              item.checked = true
            }
          })
        })
      }else{  // 如果是去掉勾選，則執(zhí)行以下代碼
        let index = this.data.ids.findIndex(item =>e.currentTarget.dataset.id == item)
        this.data.ids.splice(index, 1);
        this.data.names.splice(index,1)
        this.data.tagList.splice(index,1)
      }
    },

2、removeTags方法如下：即將tags中的對象從數(shù)組中刪除，將auditorIds中的userId也刪除

removeTags(tag) {
          this.tags.splice(this.tags.indexOf(tag), 1);
          this.auditorIds.splice(this.auditorIds.indexOf(tag.id),1);
        },

3、刪除文件

fileRemove(val, fileList) {
        let isDelete = false
        if (val.id !== null && val.id !== 0) {
          this.$confirm('此操作將刪除文件, 是否繼續(xù)?', '提示', {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            isDelete  = true
            nfsFileApi.deleteFile(val.id).then(response => {
              if (response.success) {
                this.files = fileList;
                for (var i = 0; i < this.files.length; i++) {
                  var obj = this.files[i];
                  if (obj.id != null && obj.id !== 0 && obj.id === val.id) {
                    this.files.splice(i, 1);
                  }
                }
              } else {
                this.$message.error('刪除文件失敗');
              }
            })
          }).catch(() => {
            isDelete = false;
          })
          return isDelete
        } else {
          this.files = fileList;
          this.files.splice(this.files.indexOf(val), 1);
        }
      },

新對象替換老對象

1、往來單位關(guān)聯(lián)平臺企業(yè)

先替換企業(yè)，再更新后臺的關(guān)聯(lián)企業(yè)

updateRalationEnterPrise(row) {
      this.relationEntity.splice(0, 1, row); // 0表示指定在index為0處刪除，1表示要刪除的數(shù)量，row表示要添加到數(shù)組中的新項目。
      this.entity.relPtsEntityId = row.entityId;  // 將entity_id復(fù)制給relPtsEntityId,在后臺更新relPtsEntityId字段
      updateAgent(this.entity).then(res => {
        if (res.success) {
          this.$message.success("關(guān)聯(lián)成功")
        }
      })

    },

2、后臺通過websocket給前端發(fā)送消息，消息的內(nèi)容為id，前端收到消息后將該id的樣式改為紅色即可。

methods: {
      //初始化
      initWs() {
        if (typeof (WebSocket) === "undefined") {
          alert("您的瀏覽器不支持socket")
        } else {
          // 實例化socket 111是固定的用戶id,正式環(huán)境直接獲取當(dāng)前登錄用戶id
          // this.socket = new WebSocket(this.global.wsUrl + '111')
          // this.global.setWs(this.socket)
          this.socket = new WebSocket("ws://localhost:8888/webSocket/" + '111');
          // 監(jiān)聽socket連接
          this.socket.onopen = () => {
            console.log("socket連接成功")
          }
          // 監(jiān)聽socket錯誤信息
          this.socket.onerror = () => {
            console.error("連接錯誤")
          }
          //監(jiān)聽socket消息
          this.socket.onmessage = (msg) => {
            console.log(msg)
            //處理消息
            var serverMsg = msg.data;
            var t_id = parseInt(serverMsg)    //服務(wù)端發(fā)過來的消息，ID，string需轉(zhuǎn)化為int類型才能比較
            for (var i = 0; i < this.list.length; i++) {
              var item = this.list[i];
              if(item.id == t_id){
                item.state = -1; // 修改原來對象中的state屬性值為-1，改變顏色
                this.list.splice(i,1,item) // state值為-1的新對象替換舊對象
                break;
              }
            }
          }
          // 監(jiān)聽socket關(guān)閉信息
          this.socket.onclose = (e) => {
            console.error("socket已經(jīng)關(guān)閉")
            console.error(e)
          }
        }
      },
    },

效果：

到此這篇關(guān)于JavaScript數(shù)組操作學(xué)習(xí)之splice()函數(shù)入門與精通的文章就介紹到這了,更多相關(guān)js splice入門與精通內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論