ES6- Set-2之去重—并集—交集—差集
时间:2022-07-25
本文章向大家介绍ES6- Set-2之去重—并集—交集—差集,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
ES6-Set -2 常规用法
单个数组去重
- 我们先来看一下再ES5中。我们数组去重的方法
let arr = [1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1];
let obj = {};
let newArr = [];
for(var i = 0; i < arr.length; i++){
if(!obj[arr[i]]){
newArr.push(arr[i]);
obj[arr[i]] = true;
}
}
- 我们再来看一下使用Set的方式来去重
let arr = [1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1];
let oS = new Set(arr);
console.log([...oS]);
也同样达到了去重的效果,代码上简单了不少
刚才是在常规的情况下,但是数组中出现了对象,这个去重可能就跪了 我们来看一下
let o = {
name: "zhangsan"
}
let arr = [1, 2, 3, 4,o, 5, 6, 5, 4, o,3, 2, 1, {name: "gg"}];
let obj = {
}
let newArr = [];
for(var i = 0; i < arr.length; i++){
if(!obj[arr[i]]){
newArr.push(arr[i]);
obj[arr[i]] = true;
}
}
console.log(newArr);
这个情况有点出乎意料
我们先来看一下下面这个小例子,o是一个对象
- 在o上添加一个key为[](此处的属性名是数组),并为[]赋值20;
- 打印o,我们看到的是[object object]:20。 原因是什么呢? 其实是当我们的key为数组时会默认调用原型链顶端Object的prototype上的toString方法, 返回的是对象类型,所以看到的时刚才的效果
- 我们把对象给改了,但是看到的效果还是不变,因为返回的键把先前的覆盖了
这也就是刚刚才数组去重失效的原因
如何实现并集
首先解释一下什么是并集:举一个例子,我把我有的东西和你有的东西放到一起,并且把重复的去掉,这就是并集
let arr1 = [1, 2, 3, 4, 2, 1];
let arr2 = [3, 4, 5, 6, 6, 7];
let newArr = new Set([...arr1, ...arr2]);
console.log(newArr);
达到去重的效果
如何实现交集
什么是交集呢? 把我和你都有的东西都放到一起,再去掉重复的,即为交集
此处使用的是ES6箭头函数的简写方法,如果不懂的,可以去查一下箭头函数,之后会更新上
let arr1 = [1, 2, 3, 4, 2, 1];
let arr2 = [3, 4, 5, 6, 6, 7];
let oS1 = new Set(arr1);
let oS2 = new Set(arr2);
//调用数组的filter方法,符合条件的返回
//再根据Set提供的has方法,判断是否相同的
let newArr = [...oS1].filter(ele => oS2.has(ele));
- 先将oS1转化数组才能调用filter方法
- 调用数组的filter方法,符合条件的返回
- Set提供的has方法,判断是否相同的
- 返回满足条件的成为新数组
如何实现差集
差集的定义为:把我在你哪里没有的和你再我这里没有的东西放到一起,再去掉重复的即可;
let arr1 = [1, 2, 3, 4, 2, 1];
let arr2 = [3, 4, 5, 6, 6, 7];
let oS1 = new Set(arr1);
let oS2 = new Set(arr2);
let newArr1 = [...oS1].filter(ele => !oS2.has(ele));
let newArr2 = [...oS2].filter(ele => !oS1.has(ele));
console.log([...newArr1, ...newArr2]);
- css截断长文本显示
- 通过sql语句分析足彩(第三篇)(r3笔记第91天)
- 不要给<a>设置outline:none
- 挑战数据结构和算法——整数的二进制表示中1的个数
- CSS3实现圆形进度条
- 挑战数据结构和算法——跳台阶问题
- IE滤镜及其使用技巧
- 挑战数据结构和算法面试题——左旋转字符串
- 聚簇因子和执行计划的联系(r3笔记第90天)
- Global eval. What are the options?
- 3d效果的图片轮播
- 关于等待事件"read by other session"(r3笔记第89天)
- URI编码解码和base64
- 阿里大数据竞赛第一名大神github源代码分享(O2O优惠券使用预测)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用Python判断文件下是否有空文件夹
- MySQL 设置用户可以远程连接
- MySQL关于character_set 设置为uft8问题
- nohup 退出终端不退出任务
- windows 下Redis开机自启动
- 机器学习基础:决策树的可视化
- 持续部署入门:基于 Kubernetes 实现蓝绿发布
- PHP 实现Redis发布订阅消息及时通讯
- 简单几步,用云开发搞定短信验证码登录
- 重要的进程就让Supervisor 来守护吧!
- 机器学习基础:令你事半功倍的pipeline处理机制
- django 中如何将字典变量传给template视图层的JS
- Spring第三天:Spring的AOP的注解开发、Spring的声明式事务、JdbcTemplate
- Spring Boot中集成Slf4j 与Logback
- 一文搞定 Linux 常用高频命令