第二十七节: ES6 Symbol 与Set,Map

1.数据类型Symbol

1.1 理解Symbol

1.1.1为什么用Symbol

ES5里面对象的属性名都是字符串，如果你需要使用一个别人提供的对象，你对这个对象有哪些属性也不是很清楚，但又想为这个对象新增一些属性，那么你新增的属性名就很可能和原来的属性名发送冲突，显然我们是不希望这种情况发生的。所以，我们需要确保每个属性名都是独一无二的，这样就可以防止属性名的冲突了。因此，ES6里就引入了Symbol，用它来产生一个独一无二的值。

1.1.2. Symbol是什么

定义:Symbol实际上是ES6引入的一种原始数据类型

1.1.3. Symbol的使用

let sym = Symbol('aa');
console.log(sym);   // Symbol(aa) 
typeof sym;        // "symbol"

1.1.4 Symbol函数前不能用new

Symbol函数不是一个构造函数，前面不能用new操作符。所以Symbol类型的值也不是一个对象，不能添加任何属性，它只是一个类似于字符型的数据类型。如果强行在Symbol函数前加上new操作符，会报错，如下：

console.log(Symbol);  //Symbol是函数，是基本数据类型，用于创建symbol数据
let sym = new Symbol();  //不是构造函数，不能new
// Uncaught TypeError: Symbol is not a constructor(…)

1.1.5 Symbol使用注意事项

注意

Symbol 前面不能加new,加new就报错
Symbol() 返回的是一个唯一值,通常使用最为唯一的key使用
symbol是一种单独的数据类型,就叫symbol,是基本数据类型
如果symbol作为了key,那么用for..in..循环,是循环不出来symbol的key的

let sym = Symbol();
let sym2 = Symbol();
console.log(sym==sym2); //Symbol创建的是独一无二的值
console.log(sym);
console.log(typeof sym);

1.1.6 Symbol的用处

用处一般

symbol作为josn的key使用

let symbol = Symbol('a');
let json = {
    a: 'aa',
    b: 'bb',
    [symbol] : '我是symbol'
}
console.log(json['a']);    // aa
console.log(json[symbol]); // 我是symbol

1.2. Symbol函数的参数

1.2.1 字符串作为参数

用上面的方法生成的Symbol值不好进行区分，Symbol函数还可以接受一个字符串参数，来对产生的Symbol值进行描述，方便我们区分不同的Symbol值。

let s1 = Symbol('s1');
let s2 = Symbol('s2');
console.log(s1);  // Symbol(s1)
console.log(s2);  // Symbol(s2)
s1 === s2;  //  false
let s3 = Symbol('s2');
s2 === s3;  //  false

给Symbol函数加了参数之后，控制台输出的时候可以区分到底是哪一个值；
Symbol函数的参数只是对当前Symbol值的描述，因此相同参数的Symbol函数返回值是不相等的；

1.2.2 对象作为参数

如果Symbol函数的参数是一个对象，就会调用该对象的toString方法，将其转化为一个字符串，然后才生成一个Symbol值。所以，Symbol函数的参数只能是字符串。

let sym = Symbol({});
console.log(sym);  // Symbol([object Object])

1.3 Symbol值不可以进行运算

既然Symbol是一种数据类型，那我们一定想知道Symbol值是否能进行运算。告诉你，Symbol值是不能进行运算的,不仅不能和Symbol值进行运算，也不能和其他类型的值进行运算，否则会报错。

Symbol值可以显式转化为字符串和布尔值，但是不能转为数值。

let sym1 = Symbol('symbol1')
let sym2 = Symbol('symbol2')
sym1 + sym2;   // TypeError: Cannot convert a Symbol value to a number

// 转字符串
String(sym1);   // "Symbol(symbol1)"

// 转布尔值
Boolean(sym1); // true

// 转数字
Number(sym1);  // TypeError: Cannot convert a Symbol value to a number

1.4. Symbol 作为属性

Symbol就是为对象的属性名而生，那么Symbol值怎么作为对象的属性名呢？有下面几种写法：

let obj = {};
let sym = Symbol();
// 第一种写法
obj[sym] = 'mySymbol';
// 第二种写法
obj = {
    [sym]: 'mySymbol'
}
// 第三种写法
Object.defineProperty(obj, sym, {value: 'mySymbol'});
obj.sym;  //  undefined
obj.sym = 'Symbol';
obj[sym]  //  mySymbol
obj['sym']  // 'Symbol'

使用对象的Symbol值作为属性名时，获取相应的属性值不能用点运算符；
如果用点运算符来给对象的属性赋Symbol类型的值，实际上属性名会变成一个字符串，而不是一个Symbol值；
在对象内部，使用Symbol值定义属性时，Symbol值必须放在方括号之中，否则只是一个字符串。

1.5. Symbol值作为属性名的遍历

使用for...in和for...of都无法遍历到Symbol值的属性，Symbol值作为对象的属性名，也无法通过Object.keys()、Object.getOwnPropertyNames()来获取了。

//获取Symbols属性,打印值
let sym = Symbol('a');
let sym2 = Symbol('b');
let obj ={
  [sym]:'aa',
  [sym2]:'bb',
  name:'xiaoming',
  age:19
}
console.log(obj);
//console.log(Object.keys(obj));// 构造函数的静态方法获取所有属性的集合，获取不到symbol
//console.log(Object.getOwnPropertyNames(obj));//获取自己身上的属性名称,获取不到symbol
console.log(Object.getOwnPropertySymbols(obj)); //获取自己身上的Symbols属性
let arr = Object.getOwnPropertySymbols(obj);//拿到属性
arr.forEach((item) => {
  console.log(obj[item]);  //打印属性对应的值
})

但是，不同担心,我们可以使用Object.getOwnPropertySymbols()方法获取一个对象上的Symbol属性名。

let sym1 = Symbol('symbol1');
let sym2 = Symbol('symbol2');
let obj = {
    name:'wuwei',
    [sym1]: 'symbol1',
    [sym2]: 'symbol2'
}
Object.getOwnPropertySymbols(obj);   // [Symbol(symbol1), Symbol(symbol2)]

    // for in时 symbol属性是循环不出来的
    let sym = Symbol();
    let sym2 = Symbol();
    let obj ={
      [sym]:'aa',
      [sym2]:'bb',
      name:'xiaoming',
      age:19
    }
    for(let key in obj){
      console.log(key);    //for in时 symbol属性是循环不出来的
    }

for.. in..循环遍历不出symbol的key的

let symbol = Symbol('a');
let json = {
    a: 'aa',
    b: 'bb',
    [symbol] : '我是symbol'
}
for(let item in json){
    console.log(item);   // a b
}

2. Set & WeakSet

ES6新增的数据结构, 数组其实就是一种数据结构

2.1 Set数据结构

类似于数组,但又跟数组不一样,数组里面可以有重复的值,Set里面不能有重复值

let arr = ['a','b','c','a'];
console.log(arr);  // ["a", "b", "c", "a"]

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

创建数组的两种方式,一字面量,二构造函数
创建Set的方式,使用构造函数

new Set(['a','b'])

接受一个数组参数

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

// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

2.2 Set 数据的方法

2.2.1. 添加内容 add()

往set里面添加内容

console.log(Set); //Set是内置构造函数
let set =new Set();  //无参数创建Set,数据靠后天加入
set.add(20);//一次只能传一个参数，也可以传引用类型
console.log(set);  //通过构造出来的对象，可以查看自己和原型上的方法、属性
set.add ('xiaoming').add ('xiaohong').add ('xiaokai');//链式添加
console.log(set);

2.2.2. 删除内容 delete()

let set =new Set([10,30,40,60,20]);
console.log(set);   
console.log(set.delete(40));//删除成功返回true，失败返回false
console.log(set);

2.2.3. 判断set有没有一个值 has()

let set =new Set([10,30,40,60,20]);  
console.log(set.has(40));//包含参数返回true，没有false

2.2.4. 获取set数据的个数,长度,size

和length很像就是一个属性,不是方法

set.size;     // 1

2.2.5. 清空set数据的所有内容 clear()

let set =new Set([10,30,40,60,20]);  
console.log(set.clear());//清空不需要参数，返回undefined 
console.log(set);

2.2.6 set 循环（迭代就是循环里面所有的值）

打印console.log(set);可以看到set原型上有Symbol(Symbol.iterator)，说明有迭代器，可以使用for of迭代

let set =new Set([10,30,40,60,20]);  
for(let key of set){
  console.log(key);
}

迭代器的值是个函数Symbol(Symbol.iterator): ƒ values()，当调用完，迭代器返回一个对象SetIterator {}

let set =new Set([10,30,40,60,20]);  
for(let key of set){
  console.log(key);
}
console.log(set);//打印出来set有索引，但不是正常理解的数组索引
console.log(set.values());   //拿到值
console.log(set.keys());   //拿到值
console.log(set.entries());  //值组成的数组
for(let key of set.values()){
  console.log(key);
}
for(let key of set.keys()){
  console.log(key);
}
for(let key of set.entries()){
  console.log(key);
}
set.forEach(function(){
  console.log(arguments);  //forEach出来也是没有索引的，值和索引一样
})

    let set = new Set(['a','b','c']);
    for(var item of set){  // 默认就是values
        console.log(item);
    }

遍历key

let set = new Set(['a','b','c']);
for(var item of set.keys()){
    console.log(item);
}

遍历值

let set = new Set(['a','b','c']);
for(var item of set.values()){
    console.log(item);
}

遍历每一项

let set = new Set(['a','b','c']);
for(var item of set.entries()){
    console.log(item);
}
//  ["a", "a"]
//  ["b", "b"]
//  ["c", "c"]

// 也可以直接解构
for(var [key,value] of set.entries()){
    console.log(key,value);
}

forEach

let set = new Set(['a','b','c']);
set.forEach((value,index) => {
    console.log(value,index);
})

2.2.7 set 的add方法的链式操作

因为add返回自己

let set = new Set();
set.add('a').add('b').add('c');

2.2.8. set转为数组

因为只有转为数组后,才能使用数组身上set不具有的一些方法,比如map

let arr = [...new Set()];

// set的作用:数组去重
let arr = [10,20,30,40,30,20,10];
let set =new Set(arr);
console.log(set);
let arr2= [...set];//去重后的set转为数组
//let arr2 = Array.from(set);//也可使用from
console.log(arr2);



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

还可以字符串去重

let str = 'wuwei';
let newStr = [...new Set(str)].join('')

注意:

向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。
Set 内部判断两个值是否不同，使用的算法叫做“Same-value equality”，它类似于精确相等运算符（===），主要的区别是NaN等于自身，而精确相等运算符认为NaN不等于自身。
注意：两个对象总是不相等的。

2.2.9 Array.from()可以将 Set 结构转为数组。

const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

我们都知道数组里面可以放对象,其实set也可以了,

let set = new Set();

let json = {
    a: 1,
    b: 2
}
set.add(json);
console.log(set); // Set(1) {{…}}

官网说法set里面放数组,你不能放方法

let set = new Set({a:1,b:2});

console.log(set);
// 报错

所以官方给我们提供了一个放对象方法就是WeakSet

3. WeakSet

3.1 WeakSet的使用

WeackSet 为了处理对象弱引用问题

new Set([]) 存储数组

new WeakSet({}) 存储json,这种写法不靠谱

我们确认,初始往里面添加东西,是不行的,最好用add添加,而且没有size属性

用法

let weakset = new WeakSet({a:1,b:2})

console.log(weakset);  // 会发现这么写就挂了,官方还没那准

因此weakset只能通过add添加项

let wSet = new WeakSet();

let json = {
    a: 1,
    b: 2
}
wSet.add(json);
console.log(wSet);   // WeakSet {{…}}

没有size属性

let wSet = new WeakSet();

let json = {
    a: 1,
    b: 2
}
wSet.add(json);
console.log(wSet.size);   // undefined

3.2 WeakSet与Set 不同之处

在WeakSet中add 方法传入非对象参数会导致报错, has, delete方法传入非对象则会返回false
Weak Set 集合不可迭代, 不能使用for...of , forEach循环
不支持size属性
Weak Set不暴露任何迭代器,不能使用keys(), values() 方法

    //set强类型引用
    // let obj ={};
    // let set = new Set();
    // set.add(obj);   //obj被重新赋值后，之前的内存地址也不会被js垃圾回收机制清理掉，因为它的内存地址还在set里
    // obj =123;
    // console.log(set);
    
    //WeakSet弱类型引用
    let obj ={};
    let weakset = new WeakSet();
    weakset.add(obj);  
    // obj =123; 
    console.log(weakset);
    for(let key of weakset){
      console.log(key);   //没有迭代器，不能使用for of
    }

4. Map

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

4.1. 设置map set()操作

let map = new Map();

map.set(key,value);   // 设置键值

map.set('a','wuwei');   // Map(1) {"a" => "wuwei"}

用object作为key

let map = new Map();

let json = {
    a:1,
    b:2
}
// json作为key值
map.set(json,'wuwei');  // Map(1) {{…} => "wuwei"}

// json作为value值
map.set('a',json);  // Map(1) {"a" => {…}}

4.2. 获取map get()操作

let map = new Map();

let json = {
    a:1,
    b:2
}
// json作为key值
map.set(json,'wuwei'); 

// 获取map
map.get(json);   // "wuwei"

4.3. 删除一项 delete()

map.delete();

删除成功返回true,删除失败返回false

map.delete(json);  // 删除一项

4.4. 判断有没有 has()

返回布尔值,有则为true,没有则为false

map.has(json);

4.5. 清空 clear()

map.clear();

4.6. 循环

循环和set一样

for(let [key,value] of map.entries()){
    console.log(key,value)
}

for(let key of map.keys()){}
for(let value of map.values()){}

let map=new Map();
let obj={'历史':10,'语文':20}
map.set('name','张三');
map.set(123,123);
map.set(obj,obj);
for(let key of map){
  console.log(key);
}
//等价于
for(let aa of map.entries()){
  console.log(aa);
}
//等价于
console.log(map.entries());
// 直接打印属性、值
for(let [index ,key] of map.entries()){
  console.log(index,key);
}
//只打印属性或值
for(let key of map.keys()){
  console.log(key);
}

5. WeakMap

和Weak Set 是弱引用Set集合, Weak Map是弱引用Map集合
weakMap集合中键名必须是一个对象

let wMap = new WeakMap();

let json = {
    a:1,
    b:2
}

wMap.set(json,'wuwei');    
console.log(wMap)   // WeakMap {{…} => "wuwei"}

如果key不是对象,就挂了

wMap.set('a','wuwei');
//TypeError: Invalid value used as weak map keya

最后编辑于：2021.12.24 07:29:03

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,372评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,368评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,415评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,157评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,171评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,125评论 1赞 297
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,028评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,887评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,310评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,533评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,690评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,411评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,004评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,659评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,812评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,693评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,577评论 2赞 353