ES6的Set详解
数组去重
let arr = [ 1,2,3,4,5,3,2 ]
// 数组去重
// 方法一
let newArr = [new Set(arr)]
console.log(newArr);
// 方法二
let newArr2 = Array.from(new Set(arr))
console.log(newArr2);
数组对象去重
let obj = [
{id : 1 ,name : 'zs'},
{id : 2 ,name : 'ls'},
{id : 3 ,name : 'ww'},
{id : 2 ,name : 'ls'}
]
// 数组对象去重
let newObj = [...new Set(obj.map(el=> JSON.stringify(el)))].map(res=> JSON.parse(res))
console.log(newObj);
// 步骤拆解:
/*
1、判断两个基本数据类型是否相同,比较的是数据的值。判断两个引用类型是否一样,比较的是引用
2、set无法将数组对象去重,set去重的原理主要是判断两者存储的单元位置是否一样,如果一样才能去重。
3、基本类型数据存储在栈,值相同就直接去重。引用数据类型存储在堆,引用类型数据 值 相同 位置不相同也无法去重。参考第一条的解释。
4、只要将引用类型数据转变成基本数据类型,基本数据类型直接比较就可以去重了。去重完成后通过字符串转json对象即可。
*/
/*
[...new Set(obj.map(el=> JSON.stringify(el)))] 这一步 map 将内部的每一条转换成字符串,返回一个新数组,也就是引用类型数据转基本类型数据,下面是转换结果
[
0: "{\"id\":1,\"name\":\"zs\"}" // 字符串
1: "{\"id\":2,\"name\":\"ls\"}" // 字符串
]
.map(res=> JSON.parse(res)) 这一步将去重处理好的值转换为对象 得到最终结果
*/
数组添加
let arr3 = [
{id : 1 ,name : 'zs'},
{id : 2 ,name : 'ls'},
{id : 3 ,name : 'ww'}
]
let newArr3 = new Set(arr3)
// 尾部添加
newArr3.add({id : 4,name : 'swk'})
console.log('尾部添加');
console.log(newArr3);
数组删除
let arr4 = [1,2,3,4,5,4,4,4]
let newArr4 = new Set(arr4)
newArr4.delete(2) // 删除成功返回:true 删除失败返回:false
console.log('删除数组中某一项');
console.log(newArr4);
检测数组值是否存在
let arr5 = [1,2,3,4,5,6,7]
let newArr5 = new Set(arr5)
console.log('检测数组中是存在set值');
console.log(newArr5.has(5));// 存在返回true,不存在返回false
清除数组所有的值
let arr6 = [1,2,3,4,5]
let nweArr6 = new Set(arr6)
nweArr6.clear() // 清除数组中所有值,没有返回值
console.log('清除数组中所有值');
console.log(nweArr6);
数组长度
let arr7 = [1,2,3,4,5]
let newArr7 = new Set(arr7)
console.log('获取数组的长度 & size 从1开始');
console.log(newArr7.size);
数组遍历方法
// 这几个与es6的遍历方法一致
Set.prototype.keys() //—— 返回键名的遍历器
Set.prototype.values() // —— 返回键值的遍历器
Set.prototype.entries() // —— 返回键值对的遍历器
Set.prototype.forEach() // —— 使用回调函数遍历元素
// 由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),
// 所以 keys 方法和 values 方法的行为完全一致
ES6的Set详解的更多相关文章
- JavaScript ES6 新特性详解
JavaScript ES6 带来了新的语法和新的强大功能,使您的代码更现代,更易读 const , let and var 的区别: const , let 是 ES6 中用于声明变量的新关键字. ...
- es6入门4--promise详解
可以说每个前端开发者都无法避免解决异步问题,尤其是当处理了某个异步调用A后,又要紧接着处理其它逻辑,而最直观的做法就是通过回调函数(当然事件派发也可以)处理,比如: 请求A(function (请求响 ...
- Es6 Promise 用法详解
Promise是什么?? 打印出来看看 console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...
- es6的基本数据详解
一.Set 基本用法: 1)ES6提供了新的数据机构-Set. 它类似于数组,但是成员的值都是唯一的,没有重复的值.Set本身是一个构造函数,用来生成Set数据结构. 先来看一段最简单的代码: 1 ...
- es6 Proxy对象详解
Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所有的访问都必须先通过这层拦截,因此提供了一种机制,可以对外部的访问进行过滤和修改.这个词的原理为代理,在这里可以表示 ...
- es6 Reflect对象详解
Reflect是ES6为操作对象而提供的新API,而这个API设计的目的只要有: 将Object对象的一些属于语言内部的方法放到Reflect对象上,从Reflect上能拿到语言内部的方法.如:Obj ...
- es6实现继承详解
ES6中通过class关键字,定义类 class Parent { constructor(name,age){ this.name = name; this.age = age; } speakSo ...
- ES6 中 Promise 详解
Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Promise 提供统一的 API ...
- ES6中Promise详解
Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息. Promise 提供统一的 AP ...
- ES6 Promise用法详解
What is Promise? Promise是一个构造函数,接受一个参数(Function),并且该参数接受两个参数resolve和reject(分别表示异步操作执行成功后的回调函数.执行失败后的 ...
随机推荐
- AR手势识别交互,让应用更加“得心应手”
现如今, AR技术不断发展,人们不再满足于运用键盘.鼠标等简单器械来实现传统的人机交互模式.随着用户接触机器的多样化,繁琐的操作不但对一些用户有门槛,而且还增加其学习成本:如果能用自然且符合日常生活习 ...
- 24V转5V,24V转3.3V稳压芯片的电路图,,PCB和BOM
1,PW6206与PW6513系列是一款高精度,40V高输入电压,低静态电流,低压降线性稳压器具有高纹波抑制.在VOUT=5V&VIN=7V时,负载电流高达300mA,(输入与输出电压的压差越 ...
- .net6+wpf制作指定局域网ip无法上网的arp欺诈工具
摘一段来自网上的arp欺诈解释:ARP欺骗(ARP spoofing),又称ARP毒化(ARP poisoning,网络上多译为ARP病毒)或ARP攻击,是针对以太网地址解析协议(ARP)的一种攻击技 ...
- 关于盒子动态高度与transition的问题
今天遇到个小问题 大概要实现类似手风琴的效果 本来设计是定死的高度,直接 height:0; - > height:xxxpx;但之后要改成动态变化的高度,手风琴展开后是个列表,并且列表每行高度 ...
- 彻底理解Python中的闭包和装饰器(下)
上篇讲了Python中的闭包,本篇要讲的装饰器就是闭包的一个重要应用. 如果你还不知道什么是闭包,猛戳这里阅读:彻底理解Python中的闭包和装饰器(上) 什么是装饰器 装饰器的作用是在不修改函数定义 ...
- STM32用寄存器实现电平翻转(一个按键控制LED灯的开关)
代码 GPIOx -> ODR ^= GPIO_Pin_x 如果加载了标准库的文件: GPIOx中的x可以为(A,B,C,D--) GPIO_Pin_x中的x可以为(1,2,3--) 如果没有加 ...
- [常用工具] Python视频处理库VidGear使用指北
VidGear是一个高性能的Python视频处理库,它在预载多个专业视频图像处理库的基础上,如OpenCV.FFmpeg.ZeroMQ.picamera.starlette.yt_dlp.pyscre ...
- [深度学习] tf.keras入门2-分类
目录 Fashion MNIST数据库 分类模型的建立 模型预测 总体代码 主要介绍基于tf.keras的Fashion MNIST数据库分类, 官方文档地址为:https://tensorflow. ...
- [MySQL] 索引的使用、SQL语句优化策略
目录 索引 什么是索引 索引的创建与删除 创建索引 删除索引 索引的使用 使用explain分析SQL语句 最佳左前缀 索引覆盖 避免对索引列进行额外运算 SQL语句优化 小表驱动大表 索引 什么是索 ...
- 在 C# 9 中使用 foreach 扩展
在 C# 9 中,foreach 循环可以使用扩展方法.在本文中,我们将通过例子回顾 C# 9 中如何扩展 foreach 循环. 代码演示 下面是一个对树形结构进行深度优先遍历的示例代码: usin ...