这里写目录标题

ES6的集合
- 一、Set集合
- - 1、操作方法
  - 2、遍历方法：
- 二、WeakSet集合
- - 1、概念理解
  - 2、方法：
  - 3、WeakSet 的应用场景/好处
- 三、Map集合
- - 1、概念理解
  - 2、属性
  - 3、基本方法
  - 4、遍历方法
  - 5、转为数组
  - 6、结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤
  - 7、forEach(）
- 四、WeakMap集合
- - 1、概念理解
  - 2、使用WeakMap集合
  - 3、WeakMap集合支持的方法
  - 4、WeakMap集合的用途

ES6的集合

一、Set集合

Set集合：是一种数据结构，结构类似于数组，且没有重复的值。主要用于数组去重，字符串去重。

1、操作方法

（1）add():添加值，返回Set结构本身

let set = new Set()
set.add(1);
console.log(set);
set.add(1).add(2).add(1)
console.log(set)
//注：拓展运算符 （...）可以将Set值扩展出来
console.log(...set)
console.log([...set])

（2）delete():删除值，冰返回一个boolean表示是否删除成功（3）has():判断该值是否存在，并返回一个Boolean

let set = new Set()
set.add(1).add(2);
let a = set.delete(1);
console.log(set)
//注：拓展运算符 （...）可以将Set值扩展出来
console.log(...set)
console.log(a)
set.delete(3)
console.log(...set)

（3）has()：判断该值是否存在，并返回一个Boolean

let set = new Set()
set.add(1).add(2);
let a = set.has(1);//true
let b = set.has(3);//false
console.log(a,b)

（4）clear():清除所有值。没有返回值

let set = new Set();
set.add(1).add(2);
set.clear();
console.log(set,[...set]);//Set(0){} []

2、遍历方法：

（1）由于Set只有键值没有键名，也可以说键和值是同一个（键、值相同，可以省略），所以keys和values的返回值相同

let set = new  Set();
set.add(1).add(2).add(3)
for(let i of set.keys()){   //keys遍历console.log(i)
}
for(let i of set.values()){ //values遍历console.log(i)
}
set.add('hello').add('world');
for( let i of set.entries() ){ //打印键值对console.log(i)
}

（2）forEach():

let set = new Set();
set.add('hello').add('world');
set.forEach((key,val)=>{console.log(key + '||' + val)
})

（3）Set可以接受一个数组作为参数：

let arr = ['小红','小明','小强','小明'];
let set = new Set(arr);
console.log(...set)

（4）Set实现并集与交集：

let arr = [4,5,6];
let list = [5,6,7];
let setA = new Set(arr);
let setB = new Set(list);
//并集 ：集合A与集合 B的并集A U B
let bj = new Set([...setA,...setB])
console.log(bj)// 返回Set结构 Set(4) {4,5,6,7}
//交集：集合A 与 集合B 的交集 A ∩ B
let jj = new Set([...setA].filter(val => setB.has(val)))//通过 filter拿到符合条件的值
console.log(jj)//Set(2) { 5, 6 }

二、WeakSet集合

1、概念理解

WeakSet 对象允许你将弱引用对象储存在一个集合中

WeakSet 与 Set 的区别：

（1）WeakSet 只能储存对象引用，不能存放值，而 Set 对象都可以。
（2）WeakSet 对象中储存的对象值都是被弱引用的，即垃圾回收机制不考虑 WeakSet 对该对象的应用，如果没有其他的变量或属性引用这个对象值，则这个对象将会被垃圾回收掉（不考虑该对象还存在于 WeakSet 中），所以，WeakSet 对象里有多少个成员元素，取决于垃圾回收机制有没有运行，运行前后成员个数可能不一致，遍历结束之后，有的成员可能取不到了（被垃圾回收了），WeakSet 对象是无法被遍历的（ES6 规定 WeakSet 不可遍历），也没有办法拿到它包含的所有元素

2、方法：

WeakSet 支持 add，has 和 delete 方法，但不支持 size 和 keys()，并且不可迭代。
（1）add(value)：在WeakSet 对象中添加一个元素value
（2）has(value)：判断 WeakSet 对象中是否包含value
（3）delete(value)：删除元素 value
（4）clear()：清空所有元素constructor：构造函数，任何一个具有 Iterable 接口的对象，都可以作参数

let jack = {name: "jack"};let weakSet = new WeakSet();weakSet.add(jack, 22);console.log( weakSet.has(jack) ); // trueweakSet.delete(jack);console.log( weakSet );  // WeakSet {}

3、WeakSet 的应用场景/好处

用于存储DOM节点，而不用担心这些节点从文档移除时会引发内存泄露

三、Map集合

1、概念理解

JavaScript的对象(Object)，本质上是键值对的集合(Hash结构)，但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

为了解决这个问题，ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值(包括对象)都可以当作键。也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。

ES6中的Map类型是一种储存着许多键值对的有序列表，其中的键名和对应的值支持所有的数据类型。键名的等价性判断是通过调用Object.is()方法实现的，所以数字5与字符串"5"会被判定为两种类型，可以分别作为独立的两个键出现在程序中，这一点与对象不一样，因为对象的属性名总会被强制转换成字符串类型。

注意：
（1）有一个例外，Map集合中将+0和-0视为相等，与Object.is()结果不同
（2）如果需要“键值对”的数据结构，Map比Object更合适,具有极快的查找速度

2、属性

size:返回Map中的元素个数。

3、基本方法

（1）set（）：给Map添加数据，返回添加后的Map（给已存在的键赋值会覆盖掉之前的值）
（2）get（）：获取某个key的值，返回key对应的值，没有则返回unfined
（3）has（）：检测是否存在某个key，返回布尔值
（4）delete（）：删除某个key及其对应的value，返回布尔值，成功：true；失败：false
（5）clear（）：清除所有的值，返回undefined

let map = new Map();
map.set("name","houchai");
map.set("age",25);
console.log(map.size);   //2;llllllllllllllllllllll;llllll
console.log(map.has("name"));//true；;；；；；；；；；；；
console.log(map.get("name"));//"huochai"
console.log(map.has("age"));//true
console.log(map.get("age"));//25map.delete("name");
console.log(map.has("name"));//false
console.log(map.get("name"));//undefined
console.log(map.size);//1map.clear();
console.log(map.has("name")); // false
console.log(map.get("name")); // undefined
console.log(map.has("age")); // false
console.log(map.get("age")); // undefined
console.log(map.size); // 0

4、遍历方法

注意
Map的遍历顺序就是插入顺序
（1）keys（）：获取Map的所有key
（2）values（）：获取 Map的所有值
（3）entries（）：获取Map的所有成员
（4）forEach（）：遍历Map 的所有成员

const map = new Map([['F','no'],['T','yes']
]);
for(let key of map.keys()){console.log(key);// "F" "T"
}
for(let val of map.values()){console.log(val);//"no" "yes"
}
for(let item of map.entries()){console.log(item[0],item[1]);//"F""no"   "T""yes"
}
//或者
for(let [key,value] of map.entries()){console.log(key,value);//"F""no"   "T""yes"
}
//等同于使用map.entries()
for (let [key, value] of map) {console.log(key,value);//"F""no"   "T""yes"
}

5、转为数组

Map结构转为数字结构，比较快速的方法是使用扩展运算符（…）

const map = new Map([[1,'one'],[2,'two'],[3,'three']]
);
[...map.keys()]; // [1,2,3]
[...map.values()];//['one','two','three']
[...map.entries()];//[[1,'one'],[2,'two'],[3,'three']]
[...map]//[[1,'one'],[2,'two'],[3,'three']]

6、结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤

const map0 = new Map()
.set(1,'a')
.set(2,'b')
.set(3,'c');const map1 = new Map([...map0].filter(([k,v])=>k<3)
);//产生Map结构{1=>'a',2=>'b'}const map2 = new Map([...map0].map(([k,v]) => [k*2,'_'+v])
);//产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

7、forEach(）

const map = new Map([[1,'one'],[2,'two'],[3,'three']
]);
map.forEach((value,key,map)=>{console.log(value,key,map);
})

四、WeakMap集合

1、概念理解

WeakMap 对象是一组键值对的集合，其中的键是弱引用，其中，键必须是对象，而值可以是任意。

注意：WeakMap 弱引用的只是键名，而不是键值。键值依然是正常引用。

WeakSet 中，每个键对自己所引用对象的引用都是弱引用，在没有其他引用和该键引用同一对象，这个对象将会被垃圾回收（相应的key则变成无效的），所以，WeakSet 的 key 是不可枚举的。

2、使用WeakMap集合

ES6中的WeakMap类型是一种存储着许多键值对的无序列表，列表的键名必须是非null类型的对象，键名对应的值则可以是任意类型。

WeakMap的接口与Map非常相似，通过set()方法添加数据，通过get()方法获取数据

let map = new WeakMap(),
element = document.querySelector(".element");
map.set(element, "Original");
let value = map.get(element);
console.log(value); // "Original"
element.parentNode.removeChild(element); // 移除元素
element = null; // 该WeakMap在此处为空

WeakMap集合不支持size属性，从而无法验证集合是否为空；

3、WeakMap集合支持的方法

（1）has（）：检测给定的键在集合中是否存在
（2）delete（）：可移除指定的键值对

let map = new WeakMap(),
element = document.querySelector(".element");
map.set(element, "Original");
console.log(map.has(element)); // true
console.log(map.get(element)); // "Original"
map.delete(element);
console.log(map.has(element)); // false
console.log(map.get(element)); // undefined

4、WeakMap集合的用途

（1）储存DOM元素

let myElement = document.getElementById('btn');
let myWeakmap = new WeakMap();
myWeakmap.set(myElement, {timesClicked: 0});
myElement.addEventListener('click', function() {let logoData = myWeakmap.get(myElement);
logoData.timesClicked++;
console.log(logoData.timesClicked)
}, false);

代码中，myElement是一个DOM节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在WeakMap里，对应的键名就是myElement。一旦这个DOM节点删除，该状态就会自动消失，不存在内存泄漏风险
（2）注册监听事件的listener对象，就很和使用WeakMap实现

const listener = new WeakMap();listener.set(element1, handler1);
listener.set(element2, handler2);element1.addEventListener('click', listener.get(element1), false);
element2.addEventListener('click', listener.get(element2), false);

监听函数放在WeakMap里面。一旦 DOM 对象消失，跟它绑定的监听函数也会自动消失
（3）部署私有属性
我们创建对象的时候，通常写一个构造函数

function Person(name) {this._name = name;}
Person.prototype.getName = function() {return this._name;
};

但这时，创建一个Person 对象的时候，我们可以直接访问name 属性：

const person = new Person("sam")
console.log(persn.name)

我们不想让用户直接访问name属性，直接使用下面的方法将name包装成私有属性

let Person = (function() {let privateData = new WeakMap();function Person(name) {privateData.set(this, { name: name });}Person.prototype.getName = function() {return privateData.get(this).name;};return Person;
}());const person = new Person('json');
console.log(person.getName())

ES6新特性（中）——ES6的集合（set集合、map集合等）相关推荐

es6新特性中...的用法
1.展开运算符能够将对象字面量展开为多个元素 const books = ["Don Quixote", "The Hobbit", "Alice ...
javascript ES6 新特性之扩展运算符三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
Longstick的学习周记——ES6新特性
Longstick的学习周记--ES6新特性前言 ES6新特性 1. let 和 const let关键字 const 关键字 2. 模块字符串\` \` 3. 解构 4. 函数的参数默认值 5. ...
lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法？
国庆刚刚结束,我们开始一波新的学习进程吧. ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.作为前端必备技能,我们来快速开始吧接 ...
html5 跳转参数不显示_HTML5、CSS3、ES6新特性总结
前言:HTML5.CSS3.ES6新特性,可以说是基础前端的面试的必考题了,以下是关于新特性的基本总结. HTML5: 语义化的区块和段落元素:<section>,<article& ...
尚硅谷es6新特性笔记
尚硅谷es6新特性笔记一.let与const let的变量声明以及声明特性 const的变量声明以及声明特性 const.let.var 三者之间的区别二.变量解构赋值三.模板字符串四.对象的 ...
ES6新特性----面试
ES6新特性关键字 let关键字 const关键字解构赋值变量的解构赋值数组的解构赋值对象的解构赋值字符串的解构赋值数值和布尔值的解构赋值函数参数的解构赋值用途模板字符串箭头函数 ...
一文快速掌握 es6+新特性及核心语法
首先先祝各位节日快乐,好好去体验生活的快乐,在假期最后一天里,祝大家收获满满,同时抓住假期的尾巴,收割实用技能. 接下来我会总结一些工作中常用也比较核心的es6+的语法知识,后面又要慢慢开始工作之旅了 ...
ES6新特性的学习和使用
ES6新特性的学习和使用本文是基于Windows 10系统环境,进行ES6新特性的学习和使用 Windows 10 React 一.ES6的新语法 (1) let和const ES6之后尽量少使用v ...
H5、CSS3和ES6新特性
CSS3新特性 01 新增语义化标签 <header>:头部标签 <nav>:导航标签 <article>:内容标签 <section>:定义文档某个区 ...

ES6新特性（中）——ES6的集合（set集合、map集合等）

这里写目录标题

ES6的集合

一、Set集合

1、操作方法

2、遍历方法：

二、WeakSet集合

1、概念理解

2、方法：

3、WeakSet 的应用场景/好处

三、Map集合

1、概念理解

2、属性

3、基本方法

4、遍历方法

5、转为数组

6、结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤

7、forEach(）

四、WeakMap集合

1、概念理解

2、使用WeakMap集合

3、WeakMap集合支持的方法

4、WeakMap集合的用途

ES6新特性（中）——ES6的集合（set集合、map集合等）相关推荐

最新文章

热门文章