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

您可能感兴趣的文章:

微信小程序实现的一键连接wifi功能示例
这篇文章主要介绍了微信小程序实现的一键连接wifi功能,结合实例形式分析了微信小程序操作WiFi连接的模块初始化、配置、连接等相关操作技巧,需要的朋友可以参考下
2019-04-04
Three.js 中的屏幕空间环境光遮蔽SSAO
这篇文章主要为大家介绍了Three.js 中屏幕空间环境光遮蔽SSAO的原理及实现解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
一文带你玩转JavaScript的箭头函数
在ES6中新增了函数的简写方式----箭头函数，箭头函数的出现不仅简化了大量代码，也让代码看起来更加优雅，同时也解决了this指向问题，下面我们就来详细讲解如何玩转箭头函数
2022-09-09
使用JavaScript实现实时搜索建议功能
在我们的技术旅程中,JavaScript 无疑是一个不可或缺的伙伴,这篇文章主要为大家详细介绍了如何使用 JavaScript 来实现一个复杂功能,即实时搜索建议,感兴趣的可以了解下
2024-02-02
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
这篇文章主要介绍了JavaScript实现的原生态兼容IE6可调可控滚动文字功能,简单说明了文字滚动的实现原理并结合具体实例形式给出了javascript文字滚动功能的具体实现代码,需要的朋友可以参考下
2017-09-09
JavaScript获取客户端IP的方法(新方法)
这篇文章主要介绍了JavaScript获取客户端IP的方法(新方法)的相关资料,需要的朋友可以参考下
2016-03-03
微信小程序外卖选购页实现切换分类与数量加减功能案例
这篇文章主要介绍了微信小程序外卖选购页实现切换分类与数量加减功能,结合具体实例形式分析了微信小程序状态记录、判定及数值运算相关操作技巧,需要的朋友可以参考下
2019-01-01
JS判断日期格式是否合法的简单实例
下面小编就为大家带来一篇JS判断日期格式是否合法的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
JS动态给对象添加属性和值的实现方法
下面小编就为大家带来一篇JS动态给对象添加属性和值的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
JS之相等操作符详解
下面小编就为大家带来一篇JS之相等操作符详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09