快捷導(dǎo)航

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

更新時(shí)間：2024年09月25日 08:50:36 作者：魚(yú)櫻前端

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

ES5 方式

在 ES5 中，我們可以使用 for 循環(huán)配合數(shù)組方法來(lái)實(shí)現(xiàn)對(duì)象數(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 的引入，有了更多簡(jiǎn)潔的方式來(lái)處理數(shù)組和對(duì)象。

使用 Set 和 JSON.stringify / JSON.parse

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

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

對(duì)于更復(fù)雜的對(duì)象去重，可以使用 Map 來(lái)存儲(chǔ)已經(jīng)見(jiàn)過(guò)的對(duì)象。

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é)合自定義比較邏輯

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

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 庫(kù)

Lodash 提供了一個(gè)方便的函數(shù) _.uniqBy，可以輕松實(shí)現(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 可以用來(lái)存儲(chǔ)對(duì)象引用，而不會(huì)阻止這些對(duì)象被垃圾回收。雖然 WeakMap 的鍵必須是對(duì)象，但它可以用來(lái)存儲(chǔ)已經(jīng)處理過(guò)的對(duì)象。

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 (實(shí)驗(yàn)性)

在最新的 JavaScript 版本中，WeakRef 可以用來(lái)存儲(chǔ)對(duì)象的弱引用，這可以用來(lái)輔助對(duì)象的去重，但請(qǐng)注意 WeakRef 是一個(gè)實(shí)驗(yàn)性功能，可能在未來(lái)的版本中有所變化。

const { WeakRef } = require('weakref'); // 假設(shè)這是一個(gè)支持 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

對(duì)于簡(jiǎn)單對(duì)象，可以使用 JSON.stringify 來(lái)生成對(duì)象的字符串表示，然后使用 Set 進(jìn)行去重。

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é)

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

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

您可能感興趣的文章: