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数组去重的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

为JavaScript代码添加注释的方法示例
在 JavaScript 项目中,注释是非常重要的,它不仅帮助开发者理解代码,也便于团队协作、代码维护和调试,良好的注释能让别人更快理解和修改代码,本文将结合实际项目代码示例,介绍如何为 JavaScript 代码添加注释,需要的朋友可以参考下
2025-05-05
拥Bootstrap入怀——导航栏篇
拥Bootstrap入怀导航栏篇，和大家一起走进Bootstrap，了解Bootstrap的导航栏，感兴趣的小伙伴们可以参考一下
2016-05-05
bootstrap——bootstrapTable实现隐藏列的示例
本篇文章主要介绍了bootstrapTable实现隐藏列的示例，具有一定的参考价值，有兴趣的可以了解一下。
2017-01-01
前端页面禁止别人调试的方法
这篇文章主要介绍了前端页面禁止别人调试的方法的相关资料,需要的朋友可以参考下
2023-03-03
javascript 关于# 和 void的区别分析
href 为#的跳到了自己的页面。原来‘#’代表的是 #top ，
2009-10-10
LayUI—tree树形结构的使用解析
这篇文章主要介绍了LayUI—tree树形结构的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Js md5加密网页版MD5转换代码
Js实现网页上的MD5加密功能，将文字转换为MD5字符，本代码调用简单，你可以新建一个网页，将此网页上传到你的服务器上，用户浏览网页，就可实现MD5加密转换功能，用户可方便查询任一字符的MD5码，很不错的功能
2013-03-03
javascript数组去重3种方法的性能测试与比较
面试题中有一题数组去重，首先想到的是对象存键值的方法可是遇到不同类型又能转换成同样的字符串的就完了接下来为大家介绍下双重循环/存键值和类型实现去重，感兴趣的各位可以参考下哈
2013-03-03
微信小程序实时聊天WebSocket
这篇文章主要为大家详细介绍了微信小程序实时聊天WebSocket的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
js函数排序的实例代码
这篇文章介绍了js函数排序的代码，有需要的朋友可以参考一下
2013-07-07