欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3+ts數(shù)組去重方及reactive/ref響應(yīng)式顯示流程分析

 更新時(shí)間：2023年04月29日 09:49:23   作者：anjushi_  
這篇文章主要介紹了vue3+ts數(shù)組去重方法-reactive/ref響應(yīng)式顯示,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

vue3+ts數(shù)組去重方法-reactive/ref響應(yīng)式顯示

簡(jiǎn)單數(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 和 擴(kuò)展運(yùn)算符（…）將集合轉(zhuǎn)換回?cái)?shù)組

const noRepeat1 = function () {
  arr = [...new Set(arr)];
  console.log("...set  " + newArr);
}
...set  1,2,3,4,5,6

使用 Set 和 Array.from() 方法將集合轉(zhuǎn)換回?cái)?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 進(jìn)行判斷

const noRepeat2 = function () {
  // 檢查指定數(shù)組中符合條件的所有元素
  arr = arr.filter(function (item, index) {
    return arr.indexOf(item) === index;  // 因?yàn)閕ndexOf 只能查找到第一個(gè)  
  });
  console.log("filter-indexOf  " + arr);
}
filter-indexOf  1,2,3,4,5,6

使用 splice 和 indexOf 進(jìn)行判斷

const noRepeat3 = function () {
  // 原地修改
  for (let i = 0; i < arr.length; i++) {
    if (arr.indexOf(arr[i]) != i) {
      arr.splice(i, 1);//刪除數(shù)組元素后數(shù)組長(zhǎng)度減1后面的元素前移
      i--;  //數(shù)組下標(biāo)回退
    }
  }
  console.log("原地 splice  " + arr);
}
原地 splice  1,2,3,4,5,6

使用 map 進(jìn)行判斷，需要新建數(shù)組存儲(chǔ)

var newArr: number[] = reactive([]);
const noRepeat4 = function () {
  newArr.length = 0;  //如果newArr已經(jīng)有值，需要置空
  // 創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(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 進(jìn)行判斷，需要新建數(shù)組存儲(chǔ)

var newArr: number[] = reactive([]);
const noRepeat5 = function () {
  // 創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素
  arr.forEach((item) => {
    if (!newArr.includes(item)) {
      newArr.push(item)
    }
  })
  console.log("includes  " + newArr);
}
includes  1,2,3,4,5,6

對(duì)象數(shù)組

使用reactive定義

// 給arrOb賦值，但reactive永遠(yuǎn)是響應(yīng)式的（推薦）
const state = reactive({
  arrOb: [
    { key: '01', value: '樂(lè)樂(lè)' },
    { key: '02', value: '博博' },
    { key: '03', value: '淘淘' },
    { key: '04', value: '哈哈' },
    { key: '01', value: '樂(lè)樂(lè)' },
  ],
});
// 直接賦值操作可能會(huì)導(dǎo)致失去響應(yīng)式的效果
const state2 = reactive([
  { key: '01', value: '樂(lè)樂(lè)' },
  { key: '02', value: '博博' },
  { key: '03', value: '淘淘' },
  { key: '04', value: '哈哈' },
  { key: '01', value: '樂(lè)樂(lè)' },
]);

使用冒泡排序的前后對(duì)比 和 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);
        //因?yàn)閿?shù)組長(zhǎng)度減小1，所以直接 j++ 會(huì)漏掉一個(gè)元素，所以要 j--
        j--;
      }
    }
  }
  console.log("挨個(gè)對(duì)比 - object list")
  console.log(state.arrOb)
};

使用 object 判斷 key ，新建數(shù)組存儲(chǔ)

使用 object 對(duì)象訪問(wèn)屬性的方法，判斷對(duì)象中是否存在key，新建數(shù)組存儲(chǔ)

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)建一個(gè)響應(yīng)式對(duì)象，其中包含一個(gè)空數(shù)組
const dataArray2 = reactive([]); // 創(chuàng)建一個(gè)響應(yīng)式數(shù)組
dataArray1.arr = [1, 2, 3]; // 這樣賦值后，dataArray1.arr 仍然是響應(yīng)式的，因?yàn)樗匀皇?reactive 對(duì)象的一部分
dataArray2 = [1, 2, 3]; // 這樣賦值后，dataArray2 不再是響應(yīng)式的，因?yàn)樗呀?jīng)被一個(gè)普通數(shù)組覆蓋了

創(chuàng)建一個(gè)響應(yīng)式對(duì)象（如 dataArray1），并在其中包含一個(gè)數(shù)組，直接給這個(gè)數(shù)組賦值時(shí)，該數(shù)組仍然是響應(yīng)式的，因?yàn)樗琼憫?yīng)式對(duì)象的一部分。

創(chuàng)建一個(gè)響應(yīng)式數(shù)組（如 dataArray2），并直接給它賦值一個(gè)普通數(shù)組時(shí)，它將不再是響應(yīng)式的，因?yàn)樗呀?jīng)被一個(gè)普通數(shù)組覆蓋了。要保持響應(yīng)式，需要在此數(shù)組基礎(chǔ)上修改，而不是用一個(gè)新數(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)
}
// 方法三：外層嵌套一個(gè)對(duì)象
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論