JavaScript清空數(shù)組的四種方法
1、前言
前兩天在工作當(dāng)中遇到一個問題,在vue3中使用reactive生成的響應(yīng)式數(shù)組如何清空,當(dāng)然我一般清空都是這么寫:
let array = [1,2,3]; array = [];
不過這么用在reactive代理的方式中還是有點(diǎn)問題，比如這樣:
let array = reactive([1,2,3]);
watch(()=>[...array],()=>{
console.log(array);
},)
array = reactive([]);
很顯然，因?yàn)閬G失了對原來響應(yīng)式對象的引用，這樣就直接失去了監(jiān)聽。
2、清空數(shù)據(jù)的幾種方式
當(dāng)然，作為一名十年代碼經(jīng)驗(yàn)常年摸魚的我，立馬就給出了幾個解決方案。
2.1 使用ref()
使用ref,這是最簡便的方法:
const array = ref([1,2,3]);
watch(array,()=>{
console.log(array.value);
},)
array.value = [];2.2 使用slice
slice顧名思義，就是對數(shù)組進(jìn)行切片，然后返回一個新數(shù)組,感覺和go語言的切片有點(diǎn)類似。當(dāng)然用過react的小伙伴應(yīng)該經(jīng)常用slice，清空一個數(shù)組只需要這樣寫:
const array = ref([1,2,3]);
watch(array,()=>{
console.log(array.value);
},)
array.value = array.value.slice(0,0);
不過需要注意要使用ref。
2.3 length賦值為0
個人比較喜歡這種,直接將length賦值為0：
const array = ref([1,2,3]);
watch(array,()=>{
console.log(array.value);
},{
deep:true
})
array.value.length = 0;
而且，這種只會觸發(fā)一次，但是需要注意watch要開啟deep:
不過，這種方式，使用reactive會更加方便，也不用開啟deep:
const array = reactive([1,2,3]);
watch(()=>[...array],()=>{
console.log(array);
})
array.length = 0;
2.4 使用splice
副作用函數(shù)splice也是一種方案，這種情況同時也可以使用reactive:
const array = reactive([1,2,3]);
watch(()=>[...array],()=>{
console.log(array);
},)
array.splice(0,array.length)
不過要注意，watch會觸發(fā)多次:
當(dāng)然也可以使用ref,但是注意這種情況下，需要開啟deep:
const array = ref([1,2,3]);
watch(array,()=>{
console.log(array.value);
},{
deep:true
})
array.value.splice(0,array.value.length)
但是可以看到ref也和reactive一樣，會觸發(fā)多次。
3、總結(jié)
到此這篇關(guān)于JavaScript清空數(shù)組的四種方法的文章就介紹到這了,更多相關(guān)JavaScript清空數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文介紹了一款基于HTML，CSS，JAVASCRIPT的簡潔靈活的流行前端框架，需要了解的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)折疊展開效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
javascript數(shù)組常見操作方法實(shí)例總結(jié)【連接、添加、刪除、去重、排序等】
這篇文章主要介紹了javascript數(shù)組常見操作方法,結(jié)合實(shí)例形式總結(jié)分析了javascript數(shù)組的連接、添加、刪除、去重、排序等操作,代碼注釋附帶較為詳細(xì)的說明,需要的朋友可以參考下2019-06-06
使用JavaScript下載圖片并保存到本地的詳細(xì)解釋和代碼示例
在前端開發(fā)中經(jīng)常會遇到需要將圖片從網(wǎng)絡(luò)上下載并保存到本地的需求,這篇文章主要給大家介紹了關(guān)于使用JavaScript下載圖片并保存到本地的詳細(xì)解釋和代碼示例,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
JavaScript中的流程控制語句是編寫復(fù)雜邏輯和控制程序執(zhí)行順序的關(guān)鍵元素,這篇文章主要介紹了JavaScript流程控制語句的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-12-12
這篇文章主要介紹了JavaScript中的eval()函數(shù)使用介紹,本文講解了eval()的使用、eval()的返回值、變量環(huán)境(variable environment)等內(nèi)容,需要的朋友可以參考下2014-12-12
通過Three.js的材質(zhì)和幾何體,我們可以很方便的創(chuàng)建基礎(chǔ)3D模型,下面這篇文章主要給大家介紹了關(guān)于three.js載入常用類型3D模型的幾種方法,需要的朋友可以參考下2024-04-04
基于JavaScript實(shí)現(xiàn)在線PDF壓縮工具
這篇文章主要為大家詳細(xì)介紹了如何基于JavaScript實(shí)現(xiàn)在線PDF壓縮工具,整體思路是優(yōu)先處理?PDF?內(nèi)已經(jīng)存在的?JPEG?圖片資源,再把處理后的內(nèi)容重新保存成新的?PDF?文件,感興趣的小伙伴可以了解下2026-04-04
Javascript中浮點(diǎn)數(shù)相乘的一個解決方法
這篇文章主要介紹了Javascript中浮點(diǎn)數(shù)相乘的一個解決方法,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了JS雙擊變input框批量修改內(nèi)容的實(shí)現(xiàn)代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12