JavaScript數(shù)組操作學(xué)習(xí)之splice()函數(shù)入門(mén)與精通
一、JS中splice()方法
1、定義和用法
splice() 方法為從數(shù)組中添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目。
注釋?zhuān)涸摲椒〞?huì)改變?cè)紨?shù)組。
2、語(yǔ)法
arrayObject.splice(index,howmany,item1,.....,itemX)
3、說(shuō)明
splice() 方法可刪除從 index 處開(kāi)始的零個(gè)或多個(gè)元素，并且用參數(shù)列表中聲明的一個(gè)或多個(gè)值來(lái)替換那些被刪除的元素。
如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數(shù)組。
二、splice入門(mén)
splice方法：通過(guò)刪除（兩個(gè)參數(shù)）或替換現(xiàn)有元素（三個(gè)參數(shù)）或者原地添加新的元素（三個(gè)參數(shù)）來(lái)修改數(shù)組，并以數(shù)組形式返回被修改的內(nèi)容。此方法會(huì)改變?cè)瓟?shù)組。
參數(shù)：
index —— 必需。整數(shù)，規(guī)定添加/刪除項(xiàng)目的位置，使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置（從1開(kāi)始）。
howmany —— 必需。要?jiǎng)h除的項(xiàng)目數(shù)量。如果設(shè)置為 0，則不會(huì)刪除項(xiàng)目。
item1, …, itemX —— 可選。向數(shù)組添加的新項(xiàng)目。
返回值：Array —— 包含被刪除項(xiàng)目的新數(shù)組，如果有的話(huà)。
1、只有一個(gè)參數(shù)
splice(index) ——> 從index的位置開(kāi)始，刪除之后的所有元素(包括第index個(gè))
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個(gè)元素，從1開(kāi)始數(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、兩個(gè)參數(shù)（指定索引刪除）
splice(index,howmany) ——> 刪除從index位置開(kāi)始的數(shù)，howmany為刪除的個(gè)數(shù)。若 howmany 小于等于 0，則不刪除。
splice(2,1)表示刪除從index=2（即第三個(gè)元素）開(kāi)始，刪除一個(gè)，即第三個(gè)元素。
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（即第三個(gè)元素）開(kāi)始，刪除0個(gè)，即不刪除
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個(gè)元素（新對(duì)象替換老對(duì)象）
splice(index ,howmany , item1, …, itemX )
當(dāng)index >0時(shí)
（1）、howmany 為0時(shí)，不刪除只添加 —— 在index位置前添加item1, …, itemX
（2）、howmany > 0時(shí)，刪除且添加 —— 刪除從index位置開(kāi)始的數(shù)，howmany為刪除的個(gè)數(shù)，并且在index位置添加item1, …, itemX
當(dāng)index <0時(shí)，最后一個(gè)數(shù)為 -1，依次倒數(shù)第二個(gè)數(shù)為-2，...
（1）、howmany 為0時(shí),不刪除只添加 —— 在-index位置前添加item1, …, itemX
（2）、howmany > 0時(shí)，刪除且添加 —— 刪除從-index位置開(kāi)始的數(shù)，howmany為刪除的個(gè)數(shù)，并且在-index位置前(相當(dāng)于往后 -2前是 -1)添加item1, …, itemX的數(shù)
splice(2,0,8,9)表示刪除從index=2（即第三個(gè)元素）開(kāi)始，刪除0個(gè)，即不刪除；并在第三個(gè)元素前添加8，9
let array = [0,1,2,3,4,5,6]
document.write("原數(shù)組為："+array + "<br />")
let arrBack = array.splice(2,0,8,9)
document.write("array：",array + "<br />")
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（即第六個(gè)元素）開(kāi)始，刪除3個(gè)(包含第六個(gè))，后面只剩兩個(gè)，全部刪除；并在第六個(gè)元素位置添加8，9
let array = [0,1,2,3,4,5,6]
document.write("原數(shù)組為："+array + "<br />")
let arrBack = array.splice(5,3,8,9)
document.write("array：",array + "<br />")
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ù)第二個(gè)元素）開(kāi)始，刪除0個(gè)，即不刪除；并在倒數(shù)第二個(gè)元素前添加8，9
let array = [0,1,2,3,4,5,6]
document.write("原數(shù)組為："+array + "<br />")
let arrBack = array.splice(-2,0,8,9)
document.write("array：",array + "<br />")
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ù)第二個(gè)元素）開(kāi)始，刪除3個(gè)，即5，6（只有兩個(gè)）；并在倒數(shù)第二個(gè)元素前添加8，9
let array = [0,1,2,3,4,5,6]
document.write("原數(shù)組為："+array + "<br />")
let arrBack = array.splice(-2,3,8,9)
document.write("array：",array + "<br />")
document.write("arrBack：",arrBack)結(jié)果：
原數(shù)組為：0,1,2,3,4,5,6
array：0,1,2,3,4,8,9
arrBack：5,6
三、項(xiàng)目實(shí)戰(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中的對(duì)象從數(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);
}
},新對(duì)象替換老對(duì)象
1、往來(lái)單位關(guān)聯(lián)平臺(tái)企業(yè)
先替換企業(yè)，再更新后臺(tái)的關(guān)聯(lián)企業(yè)
updateRalationEnterPrise(row) {
this.relationEntity.splice(0, 1, row); // 0表示指定在index為0處刪除，1表示要?jiǎng)h除的數(shù)量，row表示要添加到數(shù)組中的新項(xiàng)目。
this.entity.relPtsEntityId = row.entityId; // 將entity_id復(fù)制給relPtsEntityId,在后臺(tái)更新relPtsEntityId字段
updateAgent(this.entity).then(res => {
if (res.success) {
this.$message.success("關(guān)聯(lián)成功")
}
})
},2、后臺(tái)通過(guò)websocket給前端發(fā)送消息，消息的內(nèi)容為id，前端收到消息后將該id的樣式改為紅色即可。
methods: {
//初始化
initWs() {
if (typeof (WebSocket) === "undefined") {
alert("您的瀏覽器不支持socket")
} else {
// 實(shí)例化socket 111是固定的用戶(hù)id,正式環(huán)境直接獲取當(dāng)前登錄用戶(hù)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)聽(tīng)socket連接
this.socket.onopen = () => {
console.log("socket連接成功")
}
// 監(jiān)聽(tīng)socket錯(cuò)誤信息
this.socket.onerror = () => {
console.error("連接錯(cuò)誤")
}
//監(jiān)聽(tīng)socket消息
this.socket.onmessage = (msg) => {
console.log(msg)
//處理消息
var serverMsg = msg.data;
var t_id = parseInt(serverMsg) //服務(wù)端發(fā)過(guò)來(lái)的消息，ID，string需轉(zhuǎn)化為int類(lèi)型才能比較
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
if(item.id == t_id){
item.state = -1; // 修改原來(lái)對(duì)象中的state屬性值為-1，改變顏色
this.list.splice(i,1,item) // state值為-1的新對(duì)象替換舊對(duì)象
break;
}
}
}
// 監(jiān)聽(tīng)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ù)入門(mén)與精通的文章就介紹到這了,更多相關(guān)js splice入門(mén)與精通內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- JS數(shù)組中的splice()方法及用原生寫(xiě)法分享
- JS中splice添加或刪除數(shù)組元素
- js常用函數(shù)push()、pop()、shift()、unshift()、slice()和splice()等詳解
- JavaScript 使用 splice 方法刪除數(shù)組元素可能導(dǎo)致的問(wèn)題分析
- js數(shù)組刪除問(wèn)題(splice和delete的用法)
- Javascript數(shù)組的?splice?方法詳細(xì)介紹
- JavaScript基礎(chǔ)學(xué)習(xí)之splice()函數(shù)詳解
- javascript數(shù)組中的concat方法和splice方法
- JavaScript中splice的使用方法詳解
- 淺談js數(shù)組splice刪除某個(gè)元素爬坑
- javascript數(shù)組元素刪除方法delete和splice解析
- JS數(shù)組splice操作實(shí)例分析
- JavaScript中join()、splice()、slice()和split()函數(shù)用法示例
- js刪除數(shù)組中的元素delete和splice的區(qū)別詳解
- JavaScript中splice與slice的區(qū)別
- 原生JS中slice()方法和splice()區(qū)別
- 淺談js數(shù)組和splice的用法
- JavaScript中數(shù)組slice和splice的對(duì)比小結(jié)
相關(guān)文章
JavaScript的類(lèi)型、值和變量小結(jié)
這篇文章主要介紹了JavaScript的類(lèi)型、值和變量小結(jié)的相關(guān)資料,需要的朋友可以參考下2015-07-07
javascript 刪除select中的所有option的實(shí)例
這篇文章主要介紹了javascript 刪除select中的所有option的實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
javascript實(shí)現(xiàn)加載xml文件的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)加載xml文件的方法,涉及JavaScript針對(duì)xml文件對(duì)象的相關(guān)加載與獲取操作實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了微信小程序下拉框搜索功能的實(shí)現(xiàn)方法，內(nèi)容比較簡(jiǎn)單容易理解 ,需要的朋友可以參考下2019-07-07
原生JavaScript實(shí)現(xiàn)動(dòng)態(tài)省市縣三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例代碼
像平時(shí)購(gòu)物選擇地址時(shí)一樣，通過(guò)選擇的省動(dòng)態(tài)加載城市列表，通過(guò)選擇的城市動(dòng)態(tài)加載縣區(qū)列表，從而可以實(shí)現(xiàn)省市縣的三級(jí)聯(lián)動(dòng)，下面使用原生的JavaScript來(lái)實(shí)現(xiàn)這個(gè)功能，需要的朋友參考下吧2016-02-02
svg插入foreignObject無(wú)法響應(yīng)事件解決
這篇文章主要為大家介紹了svg插入foreignObject無(wú)法響應(yīng)事件解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
詳解axios中封裝使用、攔截特定請(qǐng)求、判斷所有請(qǐng)求加載完畢）
這篇文章主要介紹了axios中封裝使用、攔截特定請(qǐng)求、判斷所有請(qǐng)求加載完畢的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
微信小程序?qū)崿F(xiàn)手勢(shì)解鎖的示例詳解
手勢(shì)解鎖是生活中常用的解鎖方式，本文將通過(guò)微信小程序?qū)崿F(xiàn)手勢(shì)解鎖這一功能，本實(shí)例以工具的形式可以嵌入到不同的項(xiàng)目之中，感興趣的可以了解一下2022-04-04
SeaJS是一個(gè)遵循CommonJS規(guī)范的JavaScript模塊加載框架。本文給大家分享sea.js知識(shí)總結(jié)，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
微信小程序開(kāi)發(fā)常見(jiàn)問(wèn)題及解決方案
這篇文章主要介紹了微信小程序開(kāi)發(fā)常見(jiàn)問(wèn)題及解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07