JavaScript数组操作学习之splice()函数入门与精通_Javascript

一、js中splice()方法

1、定义和用法

splice() 方法为从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组。

2、语法

arrayobject.splice(index,howmany,item1,.....,itemx)

3、说明

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayobject 中删除了元素，则返回的是含有被删除的元素的数组。

二、splice入门

splice方法：通过删除（两个参数）或替换现有元素（三个参数）或者原地添加新的元素（三个参数）来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。

参数：
index —— 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置（从1开始）。
howmany —— 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemx —— 可选。向数组添加的新项目。

返回值：array —— 包含被删除项目的新数组，如果有的话。

1、只有一个参数

splice(index) ——> 从index的位置开始，删除之后的所有元素(包括第index个)

let array = [0,1,2,3,4,5,6]
document.write("原数组为："+ array + "<br />")
let arrback = array.splice(2)
document.write("array：",array + "<br />")
document.write("arrback：",arrback)

结果：

原数组为：0,1,2,3,4,5,6
array：0,1
arrback：2,3,4,5,6

若 index < 0 , 则删除最后倒数第index个元素，从1开始数。

let array = [0,1,2,3,4,5,6]
document.write("原数组为："+ array + "<br />")
let arrback = array.splice(-3)
document.write("array：",array + "<br />")
document.write("arrback：",arrback)

结果：

原数组为：0,1,2,3,4,5,6
array：0,1,2,3
arrback：4,5,6

2、两个参数（指定索引删除）

splice(index,howmany) ——> 删除从index位置开始的数，howmany为删除的个数。若 howmany 小于等于 0，则不删除。

splice(2,1)表示删除从index=2（即第三个元素）开始，删除一个，即第三个元素。

let array = [0,1,2,3,4,5,6]
document.write("原数组为："+ array + "<br />")
let arrback = array.splice(2,1)
document.write("array：",array + "<br />")
document.write("arrback：",arrback)

结果：

原数组为：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("原数组为："+ array + "<br />")
let arrback = array.splice(2,0)
document.write("array：",array + "<br />")
document.write("arrback：",arrback)

结果：

原数组为：0,1,2,3,4,5,6
array：0,1,2,3,4,5,6
arrback：

3、大于等于3个元素（新对象替换老对象）

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

当index >0时
（1）、howmany 为0时，不删除只添加 —— 在index位置前添加item1, …, itemx

（2）、howmany > 0时，删除且添加 —— 删除从index位置开始的数，howmany为删除的个数，并且在index位置添加item1, …, itemx

当index <0时，最后一个数为 -1，依次倒数第二个数为-2，...

（1）、howmany 为0时,不删除只添加 —— 在-index位置前添加item1, …, itemx

（2）、howmany > 0时，删除且添加 —— 删除从-index位置开始的数，howmany为删除的个数，并且在-index位置前(相当于往后 -2前是 -1)添加item1, …, itemx的数

splice(2,0,8,9)表示删除从index=2（即第三个元素）开始，删除0个，即不删除；并在第三个元素前添加8，9

let array = [0,1,2,3,4,5,6]
document.write("原数组为："+array + "&lt;br /&gt;")
let arrback  = array.splice(2,0,8,9)
document.write("array：",array + "&lt;br /&gt;")
document.write("arrback：",arrback)

结果：

原数组为：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("原数组为："+array + "&lt;br /&gt;")
let arrback  = array.splice(5,3,8,9)
document.write("array：",array + "&lt;br /&gt;")
document.write("arrback：",arrback)

结果：

原数组为：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（即倒数第二个元素）开始，删除0个，即不删除；并在倒数第二个元素前添加8，9

let array = [0,1,2,3,4,5,6]
document.write("原数组为："+array + "&lt;br /&gt;")
let arrback  = array.splice(-2,0,8,9)
document.write("array：",array + "&lt;br /&gt;")
document.write("arrback：",arrback)

结果：

原数组为：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（即倒数第二个元素）开始，删除3个，即5，6（只有两个）；并在倒数第二个元素前添加8，9

let array = [0,1,2,3,4,5,6]
document.write("原数组为："+array + "&lt;br /&gt;")
let arrback  = array.splice(-2,3,8,9)
document.write("array：",array + "&lt;br /&gt;")
document.write("arrback：",arrback)

结果：

原数组为：0,1,2,3,4,5,6
array：0,1,2,3,4,8,9
arrback：5,6

三、项目实战

根据索引删除

1、当勾选复选框，触发change事件，执行函数

handleitemchange(e){
      // 如果是添加勾选，则执行以下代码
      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{  // 如果是去掉勾选，则执行以下代码
        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中的对象从数组中删除，将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('此操作将删除文件, 是否继续?', '提示', {
            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、往来单位关联平台企业

先替换企业，再更新后台的关联企业

updateralationenterprise(row) {
      this.relationentity.splice(0, 1, row); // 0表示指定在index为0处删除，1表示要删除的数量，row表示要添加到数组中的新项目。
      this.entity.relptsentityid = row.entityid;  // 将entity_id复制给relptsentityid,在后台更新relptsentityid字段
      updateagent(this.entity).then(res => {
        if (res.success) {
          this.$message.success("关联成功")
        }
      })

    },

2、后台通过websocket给前端发送消息，消息的内容为id，前端收到消息后将该id的样式改为红色即可。

methods: {
      //初始化
      initws() {
        if (typeof (websocket) === "undefined") {
          alert("您的浏览器不支持socket")
        } else {
          // 实例化socket 111是固定的用户id,正式环境直接获取当前登录用户id
          // this.socket = new websocket(this.global.wsurl + '111')
          // this.global.setws(this.socket)
          this.socket = new websocket("ws://localhost:8888/websocket/" + '111');
          // 监听socket连接
          this.socket.onopen = () => {
            console.log("socket连接成功")
          }
          // 监听socket错误信息
          this.socket.onerror = () => {
            console.error("连接错误")
          }
          //监听socket消息
          this.socket.onmessage = (msg) => {
            console.log(msg)
            //处理消息
            var servermsg = msg.data;
            var t_id = parseint(servermsg)    //服务端发过来的消息，id，string需转化为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;
              }
            }
          }
          // 监听socket关闭信息
          this.socket.onclose = (e) => {
            console.error("socket已经关闭")
            console.error(e)
          }
        }
      },
    },

效果：