ES6 set map初识

Set

Set是ES6给开发者带来的一种新的数据结构，类似数组，最重要的不同点是：它的值不会有重复项。Set本身是一个构造函数，你可以理解为一个类，使用的时候需要用new来创建一个实例。

var s = new Set(['a','b','c']);
console.log(s);
// Set(3) {'a', 'b', 'c'}

四个常用方法：添加、删除、是否含有、清空

一个常用属性： size

var s = new Set(['a','b','c']);
console.log(s);
 
s.add(1) // 添加值
console.log(s);
 
console.log(s.size); // size 属性类似于数组的长度
 
console.log(s.delete('a')) // 删除a返回一个布尔值
console.log(s);
 
console.log(s.has('b')); // 是否含有b ，返回一个布尔类型
 
s.clear() // 清空
console.log(s.size)
 
// 打印结果如下
Set(3) {'a', 'b', 'c'}
Set(4) {'a', 'b', 'c', 1}
4
Set(3) {'b', 'c', 1}
true
0

set最常用的就是利用不会重复的特性做数组去重：

let arr=[1,1,1,2,2,3,4,5,3]
let newArr = Array.from(new Set(arr))
console.log(newArr);
// [1, 2, 3, 4, 5]

Map

这个map类似于对象，存的是键值对：key=>value;但是它的key键名的类型不再局限于字符串类型了，它可以是各种类型的值；初始化也是需要new。并且也不会重复；先介绍一下他的基础语法

let m = new Map([
            ["name","zs"],
            ["age",18]
    ]);
console.log(m);
// Map(2) {'name' => 'zs', 'age' => 18}

上面提到他的key可以是任意类型

let m = new Map()
 //数组类型的键名
 m.set([1],2);
//对象类型的键名
m.set({"name":"Zhangsan"},2);
//布尔类型的键名
m.set(true,2);
//Symbol类型的键名
m.set(Symbol('name'),2);
//null为键名
m.set(null,2);
//undefined为键名
m.set(undefined,2);
console.log(m);
 
// 如下
Map(6) {Array(1) => 2, {…} => 2, true => 2, null => 2, …}
[[Entries]]
0: {Array(1) => 2}
1: {Object => 2}
2: {true => 2}
3: 2
4: {null => 2}
5: {undefined => 2}
size: 6
[[Prototype]]: Map

四个常用方法：设置键值对、获取键值、删除、是否含有、清空

一个常用属性： size

let m = new Map([
            ["age",18]
    ]);
console.log(m.size); // 获取map的长度
m.set('name','zs') // 设置key：name value：zs
m.set('age',20) // 设置键值对，age已经存在更新值
console.log(m);
console.log(m.get('age')); // 通过key获取value
console.log(m.delete('name')) // 删除key为 1 的 返回一个布尔值
console.log(m.has('name')); // map是否含有key为 1 的键值对
m.clear() // 清空
 
// 结果
1
Map(2) {'age' => 20, 'name' => 'zs'}
20
true
false

entries（条目）

set和map都有这个方法 entries() ，供我们来进行遍历写法如下

// m为map
let m = new Map([
            ["age",18],
            ['name','zs']
    ]);
 
// 或者set
let m = new Set(['a','b','c']);
 
for(let item of m.entries()){
    console.log(item);
}
// 解构赋值
for(let [key,value] of m.entries()){
    console.log(key,value);
}
 
// map：
['age', 18]
['name', 'zs'] 
// 解构map
age 18
name zs
 
// set:
['a', 'a']
['b', 'b']
['c', 'c']
// 解构set
a a
b b
c c

可以看到map是键值对格式，但是set的key,value是同一个值。其实对于遍历，它还给我们提供了另外两个函数，可以理解是entries的删减版

// 只遍历key
for(let key of m.keys()){
    console.log(key);
}
// 只遍历value
for(let value of m.values()){
    console.log(value);
}

set和map，好用就好用在，他们可以自动去重，并且提供了一些方法，让我们能更好的管理和使用他们，一般项目来说，使用他们处理大量数据，可以减轻后端压力，增删改查在前端，再来一个保存接口就可以搞定，n多个接口再能完成的事情