首页 > 网络编程 > JavaScript > javascript技巧 > JS数组去重

JS中给数组去重的方法小结

2024-08-14 10:38:51 作者：Lipn

给一个存放数字或字符串的数组去重很简单,那么现在问题升级,如何一个数组a里面存放的元素是若干个数组,那么如何给这个数组a去重？本文给大家介绍了JS中给数组去重的方法小结,需要的朋友可以参考下

基本思路：

首先肯定毫无疑问地想到使用Set对数组进行去重，但是试过之后会发现单纯地使用Set无法达到预期结果，因为数组里面的元素又是数组，而Set在进行去重时，并不会将[1,2]元素和[1,2]元素判断为相等，因为他们并不是同一个数组，只是数组里面存放的元素一样。
那么我们自然而然想到，我们需要想办法让Set认为[1,2]元素和[1,2]元素相等。我刚开始想到的是使用数组的join(',')方法将数组变成字符串，例如[1,2].join(',')变成'1,2'，去重之后再将Set里面的元素变成数组，例如'1,2'.split(',')变成['1','2']。但是这样会有一个问题，最后得到的是['1','2']，而我们想要的是[1,2]，所以这种方式达不到预期。
此方式的完整代码如下：

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' ]
]
*/

最后,我们找到一种方式达到预期效果。使用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 ] ]

相关知识点：

1. JSON.stringify()

JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串。

使用 JSON.stringify() 示例：

JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify("foo"); // '"foo"'
JSON.stringify([1, "false", false]); // '[1,"false",false]'
JSON.stringify({ x: 5 }); // '{"x":5}'

2. JSON.parse()

JSON.parse() 方法用来解析 JSON 字符串，构造由字符串描述的 JavaScript 值或对象。

使用 JSON.parse() 示例：

JSON.parse("{}"); // {}
JSON.parse("true"); // true
JSON.parse('"foo"'); // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse("null"); // null

3. Set与数组之间相互转换

Set转换成数组有两种方式：
① [...set]② Array.from(set)

数组转换成Set：new Set(arr)

// Set转换成数组
let set = new Set();
set.add(1);
set.add(2);
set.add(2);
let arr = [...set];  // [1,2]
let arr2 = Array.from(set);  // [1,2]

// 数组转换成Set
let arr = [1,2,2,3,1];
let set = new Set(arr);  // Set { 1, 2, 3 }

以上就是JS中给数组去重的方法小结的详细内容，更多关于JS数组去重的资料请关注脚本之家其它相关文章！