vue3+ts數(shù)組去重方及reactive/ref響應(yīng)式顯示流程分析
更新時間：2023年04月29日 09:49:23 作者：anjushi_
這篇文章主要介紹了vue3+ts數(shù)組去重方法-reactive/ref響應(yīng)式顯示,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
vue3+ts數(shù)組去重方法-reactive/ref響應(yīng)式顯示
簡單數(shù)組
數(shù)組使用reactive定義（推薦）
var arr: number[] = reactive([1, 2, 3, 4, 5, 6, 1, 2, 3])
// 變量都替換為arrX.ar
var arrX = reactive({
ar: [1, 2, 3, 4, 5, 6, 1, 2, 3]
})數(shù)組使用ref定義
// 變量都替換為ar.value var ar = ref([1, 2, 3, 4, 5, 6, 1, 2, 3])
使用 Set 和 擴展運算符（…）將集合轉(zhuǎn)換回數(shù)組
const noRepeat1 = function () {
arr = [...new Set(arr)];
console.log("...set " + newArr);
}...set 1,2,3,4,5,6
使用 Set 和 Array.from() 方法將集合轉(zhuǎn)換回數(shù)組
const noRepeat1 = function () {
arr = Array.from(new Set(arr));
console.log("Array.from " + arr);
}Array.from 1,2,3,4,5,6
使用 filter 和 indexOf 進行判斷
const noRepeat2 = function () {
// 檢查指定數(shù)組中符合條件的所有元素
arr = arr.filter(function (item, index) {
return arr.indexOf(item) === index; // 因為indexOf 只能查找到第一個
});
console.log("filter-indexOf " + arr);
}filter-indexOf 1,2,3,4,5,6
使用 splice 和 indexOf 進行判斷
const noRepeat3 = function () {
// 原地修改
for (let i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) != i) {
arr.splice(i, 1);//刪除數(shù)組元素后數(shù)組長度減1后面的元素前移
i--; //數(shù)組下標(biāo)回退
}
}
console.log("原地 splice " + arr);
}原地 splice 1,2,3,4,5,6
使用 map 進行判斷，需要新建數(shù)組存儲
var newArr: number[] = reactive([]);
const noRepeat4 = function () {
newArr.length = 0; //如果newArr已經(jīng)有值，需要置空
// 創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素
let map = new Map();
arr.forEach((item) => {
if (!map.has(item)) {
map.set(item, true)
newArr.push(item)
}
})
console.log("map " + newArr);
}map 1,2,3,4,5,6
使用 includes 進行判斷，需要新建數(shù)組存儲
var newArr: number[] = reactive([]);
const noRepeat5 = function () {
// 創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素
arr.forEach((item) => {
if (!newArr.includes(item)) {
newArr.push(item)
}
})
console.log("includes " + newArr);
}includes 1,2,3,4,5,6
對象數(shù)組
使用reactive定義
// 給arrOb賦值，但reactive永遠(yuǎn)是響應(yīng)式的（推薦）
const state = reactive({
arrOb: [
{ key: '01', value: '樂樂' },
{ key: '02', value: '博博' },
{ key: '03', value: '淘淘' },
{ key: '04', value: '哈哈' },
{ key: '01', value: '樂樂' },
],
});
// 直接賦值操作可能會導(dǎo)致失去響應(yīng)式的效果
const state2 = reactive([
{ key: '01', value: '樂樂' },
{ key: '02', value: '博博' },
{ key: '03', value: '淘淘' },
{ key: '04', value: '哈哈' },
{ key: '01', value: '樂樂' },
]);使用冒泡排序的前后對比 和 splice，原地修改
const noRepeatObject0 = function () {
for (let i = 0; i < state.arrOb.length - 1; i++) {
for (let j = i + 1; j < state.arrOb.length; j++) {
if (state.arrOb[i].key == state.arrOb[j].key) {
state.arrOb.splice(j, 1);
//因為數(shù)組長度減小1，所以直接 j++ 會漏掉一個元素，所以要 j--
j--;
}
}
}
console.log("挨個對比 - object list")
console.log(state.arrOb)
};
使用 object 判斷 key ，新建數(shù)組存儲
使用 object 對象訪問屬性的方法，判斷對象中是否存在key，新建數(shù)組存儲
interface Item {
key: string;
value: string;
}
var stateRes: Item[] = reactive([])
type stringKey = Record<string, boolean>
const noRepeatObject1 = function () {
var obj: stringKey = {};
for (let i = 0; i < state2.length; i++) {
if (!obj[state2[i].key]) {
stateRes.push(state2[i]);
obj[state2[i].key] = true;
}
}
console.log("obj - object list")
console.log(stateRes)
};
利用 reduce 方法遍歷數(shù)組，可原地修改
interface Item {
key: string;
value: string;
}
type stringKey2 = Record<string, number>
const noRepeatObject2 = function () {
var obj: stringKey2 = {};
state.arrOb = state.arrOb.reduce(function (item, next) {
obj[next.key] ? '' : obj[next.key] = true && item.push(next);
return item;
}, [] as Item[]);
console.log("reduce - object list")
console.log(state.arrOb)
};
利用 map 方法遍歷數(shù)組，可原地修改
const noRepeatObject3 = function () {
let map = new Map();
for (let item of state2) {
if (!map.has(item.key)) {
map.set(item.key, item);
}
}
// 數(shù)組定義：reactive([]); reactive({ arr: [] });
// xx.length = 0;
// xx.push(...map.values());
// 數(shù)組定義：reactive({ arr: [] });
state4.arrOb = [...map.values()];
console.log("map - object list")
console.log(state2)
};
全部結(jié)果
關(guān)于響應(yīng)式
const dataArray1 = reactive({ arr: [] }); // 創(chuàng)建一個響應(yīng)式對象，其中包含一個空數(shù)組
const dataArray2 = reactive([]); // 創(chuàng)建一個響應(yīng)式數(shù)組
dataArray1.arr = [1, 2, 3]; // 這樣賦值后，dataArray1.arr 仍然是響應(yīng)式的，因為它仍然是 reactive 對象的一部分
dataArray2 = [1, 2, 3]; // 這樣賦值后，dataArray2 不再是響應(yīng)式的，因為它已經(jīng)被一個普通數(shù)組覆蓋了創(chuàng)建一個響應(yīng)式對象（如 dataArray1），并在其中包含一個數(shù)組，直接給這個數(shù)組賦值時，該數(shù)組仍然是響應(yīng)式的，因為它是響應(yīng)式對象的一部分。
創(chuàng)建一個響應(yīng)式數(shù)組（如 dataArray2），并直接給它賦值一個普通數(shù)組時，它將不再是響應(yīng)式的，因為它已經(jīng)被一個普通數(shù)組覆蓋了。要保持響應(yīng)式，需要在此數(shù)組基礎(chǔ)上修改，而不是用一個新數(shù)組覆蓋它。
失去響應(yīng)式
let arr = reactive([])
function change(){
let newArr = [1,2,3]
arr = newArr
}保持響應(yīng)式
// 方法一：使用 ref
let arr = ref([])
function change(){
let newArr = [1,2,3]
arr.value = newArr
}
// 方法二：使用push 方法
let arr = reactive([])
function change(){
let newArr = [1,2,3]
arr.push(...newArr)
}
// 方法三：外層嵌套一個對象
let arr = reactive({list:[]})
function change(){
let newArr = [1,2,3]
arr.list = newArr
}到此這篇關(guān)于vue3+ts數(shù)組去重方法-reactive/ref響應(yīng)式顯示的文章就介紹到這了,更多相關(guān)vue3 reactive/ref響應(yīng)式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Vue3設(shè)計思想及響應(yīng)式源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了Vue如何拖動滑塊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
下面小編就為大家分享一篇vue實現(xiàn)tab切換外加樣式切換方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue項目如何從session中獲取對象,并且使用里面的屬性
這篇文章主要介紹了vue項目如何從session中獲取對象,并且使用里面的屬性問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),這篇文章主要給大家介紹了關(guān)于vue調(diào)試工具沒有Pinia模塊的簡單解決辦法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
FastApi+Vue+LayUI實現(xiàn)前后端分離的示例代碼
本文主要介紹了FastApi+Vue+LayUI實現(xiàn)前后端分離的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼
這篇文章主要介紹了iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了將Vue組件庫更換為按需加載的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vue數(shù)組中出現(xiàn)__ob__:Observer無法取值問題的解決方法
__ob__: Observer這個屬性其實是Vue監(jiān)控變量產(chǎn)生的,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)組中出現(xiàn)__ob__:?Observer無法取值問題的解決方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
vue是一個mvvm框架，即數(shù)據(jù)雙向綁定，即當(dāng)數(shù)據(jù)發(fā)生變化的時候，視圖也就發(fā)生變化，當(dāng)視圖發(fā)生變化的時候，數(shù)據(jù)也會跟著同步變化。本文將通過示例詳解其中原理，需要的可以參考一下2022-05-05