前端vue數(shù)組去重的三種方法代碼實(shí)例
更新時間：2024年06月12日 09:22:43 作者：Wonderful?U
數(shù)組去重是我面試時候經(jīng)常會問到應(yīng)聘者的一個問題,所以下面這篇文章主要給大家介紹了關(guān)于前端vue數(shù)組去重的三種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
前言
隨著開發(fā)語言及人工智能工具的普及，使得越來越多的人會主動學(xué)習(xí)使用一些開發(fā)工具，本文主要介紹了Vue數(shù)組去重的幾種方法。
一、數(shù)組去重說明
數(shù)組去重是將數(shù)組中的重復(fù)元素移除，僅保留唯一的元素。你可以使用多種方式來實(shí)現(xiàn)這一點(diǎn)，具體取決于編程語言和需求。
二、Vue數(shù)組去重的3種方法
Vue中常見的幾種數(shù)組去重方法包括：
方法一
- 使用ES6 Set數(shù)據(jù)結(jié)構(gòu)：Set是一種集合，它只存儲唯一的值，因此可以用來去除數(shù)組中的重復(fù)元素。
let arr = [1, 2, 2, 3, 4, 4, 5]; let uniqueArr = [...new Set(arr)]; console.log(uniqueArr);
方法二
2. 使用Array.prototype.filter()方法：利用filter()方法遍歷數(shù)組，篩選出第一次出現(xiàn)的元素。
let arr = [1, 2, 2, 3, 4, 4, 5, 5, 6, 7];
let uniqueArr = arr.filter((item, index, array) => {
return array.indexOf(item) === index;
});
console.log(uniqueArr);
方法三
3. 使用Array.prototype.reduce()方法：利用reduce()方法逐個將元素添加到一個新數(shù)組中，但僅當(dāng)該元素在新數(shù)組中不存在時。
let arr = [1, 2, 2, 3, 4, 4, 5, 5, 9];
let uniqueArr = arr.reduce((acc, cur) => {
if (!acc.includes(cur)) {
acc.push(cur);
}
return acc;
}, []);
console.log(uniqueArr);
這些都是常見的Vue數(shù)組去重方法，你可以根據(jù)自己的需求選擇其中一種使用。
總結(jié)
到此這篇關(guān)于前端vue數(shù)組去重的三種方法的文章就介紹到這了,更多相關(guān)vue數(shù)組去重方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue簡易版無限加載組件實(shí)現(xiàn)原理與示例代碼
這篇文章主要給大家介紹了關(guān)于Vue簡易版無限加載組件實(shí)現(xiàn)原理與示例代碼的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue中provide和inject的使用，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
element上傳組件循環(huán)引用及簡單時間倒計時的實(shí)現(xiàn)
這篇文章主要介紹了element上傳組件循環(huán)引用及簡單時間倒計時的實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
如果你寫過vue，對v-bind這個指令一定不陌生。 下面小編將從源碼層面去帶大家剖析一下v-bind背后的原理,需要的小伙伴可以參考下面章的具體內(nèi)容2021-09-09
vue前端獲取/切換麥克風(fēng)、播放采集音頻和采集音量大小完整代碼
這篇文章主要給大家介紹了關(guān)于vue前端獲取/切換麥克風(fēng)、播放采集音頻和采集音量大小的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
Vue3中實(shí)現(xiàn)代碼高亮的兩種方法(prismjs和highlight.js)
最近忙著開發(fā)自己的博客系統(tǒng),在做界面展示的時候,需要讓代碼高亮,于是經(jīng)過在網(wǎng)上查閱,發(fā)現(xiàn)有兩款比較好用的插件實(shí)現(xiàn)代碼高亮,分別是prismjs和highlight.js,下面我分別介紹下,方便給需要的同學(xué)參考2025-04-04
媒體查詢@media常見的不生效原因包括格式書寫錯誤,例如and后必須有空格；樣式?jīng)_突,后面的CSS會覆蓋前面的；CSS本身存在問題,比如塊元素浮動導(dǎo)致父級元素?zé)o高度而背景顏色不顯示；漏掉了meta屬性中的viewport屬性,正確書寫和排列CSS代碼2024-10-10
Vue封裝localStorage設(shè)置過期時間的示例詳解
這篇文章主要介紹了Vue封裝localStorage設(shè)置過期時間的相關(guān)資料,在這個示例中,我們在MyComponent.vue組件的setup函數(shù)中導(dǎo)入了setItemWithExpiry和getItemWithExpiry函數(shù),并在函數(shù)內(nèi)部使用它們來設(shè)置和獲取帶有過期時間的localStorage數(shù)據(jù),需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue數(shù)據(jù)變化但頁面刷新問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式
這篇文章主要介紹了Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03