一、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 + "<br />") let arrBack = array.splice(2,0,8,9) document.write("array:",array + "<br />") 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 + "<br />") let arrBack = array.splice(5,3,8,9) document.write("array:",array + "<br />") 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 + "<br />") let arrBack = array.splice(-2,0,8,9) document.write("array:",array + "<br />") 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 + "<br />") let arrBack = array.splice(-2,3,8,9) document.write("array:",array + "<br />") 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) } } }, },
效果: