【ES6】JS的Set和Map数据结构

简介: 【ES6】JS的Set和Map数据结构
引言:Java、C++早就有了Map、泛型等概念。ES6正式归纳了Set和Map数据结构。

一、Set


1、基本用法


  ES6提供了新的数据结构Set。 它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数, 用来生成Set数据结构。

var S = new Set();
[2,3,5,4,5,2,2].map(x => s. add(x))
for (i of s) {console.log(i)}
//2 3 5 4

       上面的代码通过add方法向Set 结构加入成员,结果表明Set结构不会添加重复的值。

       Set函数可以接受一个数组(或类似数组的对象)作为参数,用于初始化。

var set = new Set([1, 2, 3, 4, 4])
[...set]
//[1,2,3,4]</code>
var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5
function divs () {
  return [...document. querySelectorAll('div')]
}
var set = new Set(divs())
set.size // 56
//类似于
divs(). forEach(div => set.add(div))
set.size // 56

      向Set加入值时不会发生类型转换,所以5和"5"是两个不同的值。

2、4种操作方法


  • add(value):添加某个值,返回Set结构本身。
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值,表示参数是否为Set的成员。
  • clear():清除所有成员,没有返回值。

3、4种遍历方法


Set结构的实例有4个遍历方法,可用于遍历成员。

  • keys():返回一个键名的遍历器。
  • values():返回一个键值的遍历器。
  • entries():返回一个键值对的遍历器。
  • forEach(): 使用回调函数遍历每个成员。
  • 【注:】由于Set结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。

4、Set的应用


1)Set转化为数组

由于扩展运算符( … )内部使用for…of循环,所以也可以用于Set结构。代码如下。

let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']

2)去除数组的重复元素

方法一: 如下代码。

let arr=[3,5,2,2,5,5];
let unique = [...new Set(arr)];
//[3,5,2];

方法二: 如下代码。

let arr=new Set([3,5,2,2,5,5]);
let unique = Array.from(arr);
//[3,5,2];

3)实现并集(Union)、交集(Intersect)、差集(Difference)

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
//并集
let union = new Set([...a, ...b]);
//[1, 2, 3, 4]
//交集
let intersect = new Set([...a].filter(x => b.has(x)));
//[2,3]
//差集
let difference = new Set([..a].filter(x => !b.has(x)));
//[1]

二、Map


1、基本用法


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

var data = {};
var element = document.getElementById("myDiv");
data[element] = metadata;
data["[object HTMLDivElement]"] // metadata

       上面的代码原意是将一个DOM节点作为对象data的键,但是由于对象只接受字符串作为键名,所以element被自动转为字符串[0bject HTMLDivElement]。

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

如果你需要“键值对”的数据结构,Map比Object更合适。

var m= new Map();
var o ={p: "Hello World"};
m.set(o, "content")
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false

2、操作方法


size属性

size属性返回Map结构的成员总数。

let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size //2

set(key, value)

set方法设置key所对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。

var m = new Map();
m.set("edition", 6) //键是字符串
m.set(262,"standard") //键是数值
m.set(undefined, "nah") //键是undefined

set方法返回的是Map本身,因此可以采用链式写法。

let map = new Map().set(1, 'a' ).set(2, 'b').set(3, 'C' );

get(key)

get方法读取key对应的键值,如果找不到key,则返回undefined。

var m = new Map();
var hello = function() {console.log("hello");}
m.set(hello, "Hello ES6!") //键是函数
m.get(hello) // Hello ES6!

has(key)

has方法返回一个布尔值,表示某个键是否在Map数据结构中。

var m = new Map();
m.set("edition", 6);
m.set(262, "standard");
m.set(undefined, "nah' );
m.has("edition")
// true
m.has("years")
// false
m.has(262)
// true
m.has(undefined)
// true

delete(key)

delete方法删除某个键,返回true。如果删除失败,则返回false。

var m = new Map();
m.set(undefined, "nah");
m.has(undefined)// true
m.delete(undefined)
m.has(undefined)// false

clear()

clear方法清除所有成员,没有返回值。

let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
map.clear()
map.size // 0

3、4种遍历方法


Map原生提供3个遍历器生成函数和1个遍历方法。

keys():返回键名的遍历器。

values():返回键值的遍历器。

entries():返回所有成员的遍历器。

forEach():遍历Map的所有成员。

查看更多ES6教学文章:


1. 【ES6】let与const 详解

2. 【ES6】变量的解构赋值

3. 【ES6】字符串的拓展

4. 【ES6】正则表达式的拓展

5. 【ES6】数值的拓展

6. 【ES6】数组的拓展

7. 【ES6】函数的拓展

8. 【ES6】对象的拓展

9. 【ES6】JS第7种数据类型:Symbol

10. 【ES6】Proxy对象

11. 【ES6】JS的Set和Map数据结构

12. 【ES6】Generator函数详解

13. 【ES6】Promise对象详解

14. 【ES6】异步操作和async函数

15. 【ES6】JS类的用法class

16. 【ES6】Module模块详解

17. 【ES6】ES6编程规范 编程风格

参考文献


阮一峰 《ES6标准入门(第2版)》

相关文章
|
4天前
|
C++ 容器
【C++】红黑树模拟实现STL中的map与set
【C++】红黑树模拟实现STL中的map与set
|
4天前
|
算法 测试技术 C++
【C++】map&set的底层结构 -- AVL树(高度平衡二叉搜索树)(下)
【C++】map&set的底层结构 -- AVL树(高度平衡二叉搜索树)(下)
|
4天前
|
C++ 容器
【C++】map&set的底层结构 -- AVL树(高度平衡二叉搜索树)(上)
【C++】map&set的底层结构 -- AVL树(高度平衡二叉搜索树)(上)
|
4天前
|
存储 C++ 容器
【C++】Map和Set -- 详解(下)
【C++】Map和Set -- 详解(下)
|
3天前
|
存储 自然语言处理 Java
数据结构-Java Map 和 Set-2
数据结构-Java Map 和 Set
6 0
|
3天前
|
Java
数据结构-Java Map 和 Set-1
数据结构-Java Map 和 Set
9 0
|
4天前
|
存储 自然语言处理 C++
【C++】Map和Set -- 详解(上)
【C++】Map和Set -- 详解(上)
|
4天前
|
存储 C++ 容器
【STL】map和set的原理及其使用
【STL】map和set的原理及其使用
|
9天前
|
前端开发 JavaScript 程序员
Javascript:forEach、map、filter、reduce、reduceRight
Javascript:forEach、map、filter、reduce、reduceRight
|
9天前
|
JavaScript 前端开发 Java
ES6 逐点突破系列 -- Set Map,工作感悟,完美收官
ES6 逐点突破系列 -- Set Map,工作感悟,完美收官