第二十七节: 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操作符，会报错，如下：

let sym = new Symbol();
// Uncaught TypeError: Symbol is not a constructor(…)


1.1.5 Symbol使用注意事项

注意

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


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
  1. 给Symbol函数加了参数之后，控制台输出的时候可以区分到底是哪一个值；
  2. 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'
  1. 使用对象的Symbol值作为属性名时，获取相应的属性值不能用点运算符；
  2. 如果用点运算符来给对象的属性赋Symbol类型的值，实际上属性名会变成一个字符串，而不是一个Symbol值；
  3. 在对象内部，使用Symbol值定义属性时，Symbol值必须放在方括号之中，否则只是一个字符串。


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

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

但是，不同担心,我们可以使用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的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里面添加内容

let set = new Set();
set.add('a');
set.add('b');
console.log(set);   // Set(2) {"a", "b"}


2.2.2. 删除内容 delete()
console.log(set);   // Set(2) {"a", "b"}
set.delete('a');
console.log(set);   // Set(1) {"b"}


2.2.3. 判断set有没有一个值 has()
set.has('a');     // false
set.has('b');     // true


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

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

set.size;     // 1


2.2.5. 清空set数据的所有内容 clear()
let set = new Set(['a','b','c']);
console.log(set);  // Set(3) {"a", "b", "c"}
set.clear();
console.log(set)   // Set(0) {}


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

遍历key

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

遍历值

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

遍历每一项

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);
})
//  a a
//  b b
//  c c


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 = [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('')



注意:

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

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

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

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


4. Map

类似于对象,但是对象的键key只能是字符串

map的key可以是任意类型

为了解决这个对象属性只能是字符串的问题，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()){}


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 key


总结

  1. Set 里面是数组,不重复,没有set,没有get方法(add)
  2. Map 对json功能增强,key可以是任意类型的值(set,get)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念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