快捷導(dǎo)航

JS中給數(shù)組去重的方法小結(jié)

更新時間：2024年08月14日 10:38:51 作者：Lipn

給一個存放數(shù)字或字符串的數(shù)組去重很簡單,那么現(xiàn)在問題升級,如何一個數(shù)組a里面存放的元素是若干個數(shù)組,那么如何給這個數(shù)組a去重？本文給大家介紹了JS中給數(shù)組去重的方法小結(jié),需要的朋友可以參考下

基本思路：

首先肯定毫無疑問地想到使用Set對數(shù)組進(jìn)行去重，但是試過之后會發(fā)現(xiàn)單純地使用Set無法達(dá)到預(yù)期結(jié)果，因為數(shù)組里面的元素又是數(shù)組，而Set在進(jìn)行去重時，并不會將[1,2]元素和[1,2]元素判斷為相等，因為他們并不是同一個數(shù)組，只是數(shù)組里面存放的元素一樣。
那么我們自然而然想到，我們需要想辦法讓Set認(rèn)為[1,2]元素和[1,2]元素相等。我剛開始想到的是使用數(shù)組的join(',')方法將數(shù)組變成字符串，例如[1,2].join(',')變成'1,2'，去重之后再將Set里面的元素變成數(shù)組，例如'1,2'.split(',')變成['1','2']。但是這樣會有一個問題，最后得到的是['1','2']，而我們想要的是[1,2]，所以這種方式達(dá)不到預(yù)期。
此方式的完整代碼如下：

let arr = [
  [1, 2],
  [3, 4],
  [1, 2],
  [5, 6],
  [3, 4],
  [11, 13],
  [11, 12],
  [11, 13],
];

let temp = arr.map((item) => {
  return item.join(",");
});
console.log(temp);  // ['1,2','3,4','1,2','5,6','3,4','11,13','11,12','11,13']

let set = new Set(temp);
console.log(set);  // Set { '1,2', '3,4', '5,6', '11,13', '11,12' }

let res = [...set].map((item) => {
  return item.split(",");
});
console.log(res);
/*
[
  [ '1', '2' ],
  [ '3', '4' ],
  [ '5', '6' ],
  [ '11', '13' ],
  [ '11', '12' ]
]
*/

最后,我們找到一種方式達(dá)到預(yù)期效果。使用JSON.stringify()和JSON.parse()。
代碼如下：

let arr = [
  [1, 2],
  [3, 4],
  [1, 2],
  [5, 6],
  [3, 4],
  [11, 13],
  [11, 12],
  [11, 13],
];

let temp = arr.map((item) => {
  return JSON.stringify(item);
});
console.log(temp);
/*
[
  '[1,2]',   '[3,4]',
  '[1,2]',   '[5,6]',
  '[3,4]',   '[11,13]',
  '[11,12]', '[11,13]'
]
*/

let set = new Set(temp);
console.log(set);
// Set { '[1,2]', '[3,4]', '[5,6]', '[11,13]', '[11,12]' }

let result = Array.from(set);
console.log(result);
// [ '[1,2]', '[3,4]', '[5,6]', '[11,13]', '[11,12]' ]

result = result.map((item) => {
  return JSON.parse(item);
});
console.log(result);
// [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 11, 13 ], [ 11, 12 ] ]