JavaScript清空數(shù)組的四種方法
1、前言
前兩天在工作當(dāng)中遇到一個(gè)問題,在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)常年摸魚的我，立馬就給出了幾個(gè)解決方案。
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)行切片，然后返回一個(gè)新數(shù)組,感覺和go語言的切片有點(diǎn)類似。當(dāng)然用過react的小伙伴應(yīng)該經(jīng)常用slice，清空一個(gè)數(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
個(gè)人比較喜歡這種,直接將length賦值為0：
const array = ref([1,2,3]);
watch(array,()=>{
console.log(array.value);
},{
deep:true
})
array.value.length = 0;
而且，這種只會(huì)觸發(fā)一次，但是需要注意watch要開啟deep:
不過，這種方式，使用reactive會(huì)更加方便，也不用開啟deep:
const array = reactive([1,2,3]);
watch(()=>[...array],()=>{
console.log(array);
})
array.length = 0;
2.4 使用splice
副作用函數(shù)splice也是一種方案，這種情況同時(shí)也可以使用reactive:
const array = reactive([1,2,3]);
watch(()=>[...array],()=>{
console.log(array);
},)
array.splice(0,array.length)
不過要注意，watch會(huì)觸發(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一樣，會(huì)觸發(fā)多次。
3、總結(jié)
到此這篇關(guān)于JavaScript清空數(shù)組的四種方法的文章就介紹到這了,更多相關(guān)JavaScript清空數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
想做一個(gè)鏈接點(diǎn)擊后不做任何事情，方法有很多，不過不利于用戶體驗(yàn)，javascript:void(0)可以有效解決這個(gè)問題2014-04-04
js實(shí)現(xiàn)下拉框二級聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)下拉框二級聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)人臉識別，實(shí)現(xiàn)添加信息和上傳照片功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
本篇我們用同樣的原理，把文字用CLIP屬性分的更細(xì)，分別著色，然后組合到一起，實(shí)現(xiàn)自左到右更精確的色彩漸變。問題是文字細(xì)化分割需要用到很多很多個(gè)元素，所以這里我們要用程序來控制，自動(dòng)生成這些元素。2008-11-11
前端利用PrintJs實(shí)現(xiàn)批量打印文件功能
在項(xiàng)目中遇到一個(gè)問題需要實(shí)現(xiàn)批量打印功能,研究了測試了一番解決了,把相關(guān)的功能記錄下,這篇文章主要介紹了前端利用PrintJs實(shí)現(xiàn)批量打印文件功能的相關(guān)資料,需要的朋友可以參考下2025-02-02
這篇文章主要給大家介紹了關(guān)于js數(shù)組的基本使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
阿里巴巴技術(shù)文章分享 Javascript繼承機(jī)制的實(shí)現(xiàn)
這篇文章主要介紹了阿里巴巴技術(shù)文章，分享的是一篇關(guān)于Javascript實(shí)現(xiàn)繼承機(jī)制的文章，感興趣的小伙伴們可以參考一下2016-01-01
高效的獲取當(dāng)前元素是父元素的第幾個(gè)子元素
例如處理事件的時(shí)候，有時(shí)候需要知道當(dāng)前點(diǎn)擊的是第幾個(gè)子節(jié)點(diǎn)，而HTML DOM本身并沒有直接提供相應(yīng)的屬性，需要自己來計(jì)算。感興趣的朋友可以了解下本文2013-10-10
javascript實(shí)現(xiàn)頁面刷新時(shí)自動(dòng)清空表單并選中的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)頁面刷新時(shí)自動(dòng)清空表單并選中的方法,涉及javascript中reset與focus方法的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
TypeScript學(xué)習(xí)之強(qiáng)制類型的轉(zhuǎn)換
眾所周知TypeScript是一種由微軟開發(fā)的自由和開源的編程語言。它是JavaScript的一個(gè)超集，而且本質(zhì)上向這個(gè)語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊蹋旅孢@篇文章主要介紹了TypeScript中強(qiáng)制類型的轉(zhuǎn)換,需要的朋友可以參考借鑒下。2016-12-12