快捷導(dǎo)航

JS對象去重的多種方式小結(jié)

更新時間：2024年09月25日 08:50:36 作者：魚櫻前端

在 JavaScript 中,對象的去重通常是指在一個對象數(shù)組中,根據(jù)某些屬性值去掉重復(fù)的對象,本文給大家總結(jié)了一些JS對象去重的多種方式,并通過代碼示例講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下

ES5 方式

在 ES5 中，我們可以使用 for 循環(huán)配合數(shù)組方法來實現(xiàn)對象數(shù)組的去重。

function uniqueArrayByProperty(array, property) {
  var seen = {};
  return array.filter(function(item) {
    var val = item[property];
    return seen.hasOwnProperty(val) ? false : (seen[val] = true);
  });
}

var arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' }, // 重復(fù)
  { id: 3, name: 'Charlie' }
];

var uniqueArr = uniqueArrayByProperty(arr, 'id');
console.log(uniqueArr);
// 輸出：[ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' } ]

ES6 及之后的方式

隨著 ES6 的引入，有了更多簡潔的方式來處理數(shù)組和對象。

使用 Set 和 JSON.stringify / JSON.parse

這種方法適用于簡單對象，但需要注意 JSON.stringify 會丟失原型鏈上的屬性，而且對于包含循環(huán)引用的對象會拋出錯誤。

function uniqueArrayByPropertyES6(array, property) {
  const seen = new Set();
  return array.filter(item => {
    const val = JSON.stringify(item[property]);
    return seen.has(val) ? false : seen.add(val);
  });
}

var uniqueArrES6 = uniqueArrayByPropertyES6(arr, 'id');
console.log(uniqueArrES6);

使用 Map

對于更復(fù)雜的對象去重，可以使用 Map 來存儲已經(jīng)見過的對象。

function uniqueArrayByPropertyWithMap(array, property) {
  const map = new Map();
  return array.filter(item => {
    const val = item[property];
    if (!map.has(val)) {
      map.set(val, true);
      return true;
    }
    return false;
  });
}

var uniqueArrWithMap = uniqueArrayByPropertyWithMap(arr, 'id');
console.log(uniqueArrWithMap);

使用 Map 結(jié)合自定義比較邏輯

這種方法適用于對象具有多個屬性的情況，可以自定義比較邏輯。

function uniqueArrayByProperties(array, properties) {
  const seen = new Map();
  return array.filter(item => {
    const key = properties.map(prop => item[prop]).join('|');
    if (!seen.has(key)) {
      seen.set(key, true);
      return true;
    }
    return false;
  });
}

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' }, // 重復(fù)
  { id: 3, name: 'Charlie' }
];

const uniqueArr = uniqueArrayByProperties(arr, ['id', 'name']);
console.log(uniqueArr);
// 輸出：[ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' } ]

使用 Lodash 庫

Lodash 提供了一個方便的函數(shù) _.uniqBy，可以輕松實現(xiàn)去重。

const _ = require('lodash');

const uniqueArr = _.uniqBy(arr, 'id');
console.log(uniqueArr);
// 輸出：[ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' } ]

使用 WeakMap

WeakMap 可以用來存儲對象引用，而不會阻止這些對象被垃圾回收。雖然 WeakMap 的鍵必須是對象，但它可以用來存儲已經(jīng)處理過的對象。

function uniqueArrayByPropertyWithWeakMap(array, property) {
  const seen = new WeakMap();
  return array.filter(item => {
    const val = item[property];
    if (!seen.has(val)) {
      seen.set(val, true);
      return true;
    }
    return false;
  });
}

const uniqueArrWithWeakMap = uniqueArrayByPropertyWithWeakMap(arr, 'id');
console.log(uniqueArrWithWeakMap);
// 輸出：[ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' } ]

使用 Set 和 WeakRef (實驗性)

在最新的 JavaScript 版本中，WeakRef 可以用來存儲對象的弱引用，這可以用來輔助對象的去重，但請注意 WeakRef 是一個實驗性功能，可能在未來的版本中有所變化。

const { WeakRef } = require('weakref'); // 假設(shè)這是一個支持 WeakRef 的環(huán)境

function uniqueArrayByPropertyWithWeakRef(array, property) {
  const seen = new Set();
  return array.filter(item => {
    const ref = new WeakRef(item[property]);
    if (!seen.has(ref)) {
      seen.add(ref);
      return true;
    }
    return false;
  });
}

const uniqueArrWithWeakRef = uniqueArrayByPropertyWithWeakRef(arr, 'id');
console.log(uniqueArrWithWeakRef);
// 輸出：[ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' } ]

使用 Set 結(jié)合 JSON.stringify

對于簡單對象，可以使用 JSON.stringify 來生成對象的字符串表示，然后使用 Set 進行去重。

function uniqueArrayByPropertyWithSet(array, property) {
  const seen = new Set();
  return array.filter(item => {
    const val = JSON.stringify(item[property]);
    return seen.has(val) ? false : seen.add(val);
  });
}

const uniqueArrWithSet = uniqueArrayByPropertyWithSet(arr, 'id');
console.log(uniqueArrWithSet);
// 輸出：[ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' } ]

總結(jié)

以上列出了一些實現(xiàn) JavaScript 對象數(shù)組去重的不同方法（項目中經(jīng)常出現(xiàn)這樣的需求數(shù)組對象去重）。選擇哪種方法取決于你的具體需求和環(huán)境。對于簡單的對象，使用 Set 和 JSON.stringify 可能是最簡單的方式；而對于更復(fù)雜的情況，使用 Map 或者 WeakMap 可能更合適。如果使用第三方庫，Lodash 的 _.uniqBy 函數(shù)提供了便捷的解決方案。對于實驗性的功能，如 WeakRef，則需要考慮兼容性和穩(wěn)定性問題。

以上就是JS對象去重的多種方式小結(jié)的詳細內(nèi)容，更多關(guān)于JS對象去重的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: