Symbol

 基础知识

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如， 你使用了一个他人提供的对象，但又想为这个对象添加新的方法 （mixin 模式），新方法的名字就有可能与现有方法产生冲突。如 果有一种机制，保证每个属性的名字都是独一无二的就好了，这样 就从根本上防止属性名的冲突。这就是 ES6 引入 Symbol 的原因。

 ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值。它属于JavaScript 语言的数据类型之一，其他数据类型是： undefined 、 null 、布尔值（Boolean）、字符串（String）、数值 （Number）、对象（Object）

let s = Symbol();
typeof s
// "symbol"

温馨提示

注意， Symbol 函数前不能使用 new 命令，否则会报错。这是因为生成的 Symbol是一个原始类型的值，不是对象。也就是说， 由于 Symbol 值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型。

 Symbol 函数可以接受一个字符串作为参数，表示对 Symbol 实例的描 述，主要是为了在控制台显示，或者转为字符串时，比较容易区分

let s1 = Symbol('itxiaotong');
let s2 = Symbol('txc');
s1 // Symbol(itxiaotong)
s2 // Symbol(txc)

s1 和 s2 是两个 Symbol 值。如果不加参数，它们在控制台的输出都是 Symbol() ，不利于区分。有了参数以后，就等于为它们加上了描 述，输出的时候就能够分清，到底是哪一个值

 温馨提示

注意， Symbol 函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的 Symbol 函数的返回值是不相等的。

// 没有参数的情况
let s1 = Symbol();
let s2 = Symbol();
s1 === s2 // false
// 有参数的情况
let s1 = Symbol('itxiaotong');
let s2 = Symbol('itxiaotong');
s1 === s2 // false

s1 和 s2 都是 Symbol 函数的返回值，而且参数相同，但是它们是不相等的

 实例属性description

ES2019 提供了一个实例属性 description ，直接返回 Symbol 的描述

const sym = Symbol('itxiaotong');
sym.description // "itxiaotong"

作为属性名的 Symbol

由于每一个 Symbol 值都是不相等的，这意味着 Symbol 值可以作为标识符，用于对象的属性名，就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用，能防止某一个键被不小心改写或覆盖。

let mySymbol = Symbol("name");
var user = {
    name:"iwen"
}
var info = {
   [mySymbol]:"itxiaotong",
}
var newUser = Object.assign(user,info)
console.log(newUser[mySymbol]);

属性名的遍历

Symbol 作为属性名，遍历对象的时候，该属性不会出现在 for...in 、 for...of 循环中，也不会被 Object.keys() 返回

但是，它也不是私有属性，有一个 Object.getOwnPropertySymbols() 方法，可以获取指定对象的所有 Symbol 属性名。该方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值

let mySymbol = Symbol("age");
var user = {
    name:"iwen",
   [mySymbol]:20
}
for(let item in user){
    console.log(item); // name
}
const objectSymbols =
Object.getOwnPropertySymbols(user);
console.log(objectSymbols); // [Symbol(age)]

Symbol.for()

有时，我们希望重新使用同一个 Symbol 值， Symbol.for() 方法可以做 到这一点。

let s1 = Symbol.for('itxiaotong');
let s2 = Symbol.for('itxiaotong');
console.log(s1 === s2); // true

实时效果反馈

1. 下列代码输出结果是多少：

let mySymbol = Symbol("name");
var user = {
    name:"iwen"
}
var info = {
   [mySymbol]:"itxiatong",
}
var newUser = Object.assign(user,info)
console.log(newUser.mySymbol);

A itbaizhan

B iwen

C 报错

D undefined

 Set 数据结构

 基本用法

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 本身是一个构造函数，用来生成 Set 数据结构。

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

通过 add() 方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。

 Set 函数可以接受一个数组作为参数

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

数组去除重复成员的方法

// 去除数组的重复成员
[...new Set(array)]

字符串去除重复字符

[...new Set('ababbc')].join('')
// "abc"

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

var mySet = new Set();
mySet.add("5")
mySet.add(5)
console.log(mySet); // Set(2) {'5', 5}

size属性

返回 Set 实例的成员总数

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

实时效果反馈

1. 下列代码输出结果是多少：

var mySet = new Set();
mySet.add("5")
mySet.add(5)
mySet.add(5)
console.log(mySet);

A "5" 5 5

B "5" 5

C "5"

D null

 Set 数据结构方法

 add()

set 添加方法

var mySet = new Set();
mySet.add("5")
console.log(mySet);

delete()

删除某个值，返回一个布尔值，表示删除是否

var mySet = new Set();
mySet.add("5")
var flag = mySet.delete("5");
console.log(flag);  // true

has()

返回一个布尔值，表示该值是否为 Set 的成员

var mySet = new Set();
mySet.add("5")
var flag = mySet.has("5");
console.log(flag);  // true

clear()

清除所有成员，没有返回值

var mySet = new Set();
mySet.add("5")
mySet.clear();
console.log(mySet);  // Set(0) {size: 0}

遍历操作

Set 结构的实例有四个遍历方法，可以用于遍历成员

 

let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
    console.log(item); // red green blue
}
for (let item of set.values()) {
    console.log(item); // red green blue
}
for (let item of set.entries()) {
    console.log(item); // ['red', 'red'] 
['green', 'green'] ['blue', 'blue']}
let set = new Set([1, 4, 9]);
set.forEach((value) => console.log(value))

实时效果反馈

1. 下列那个方法可以清空 Set 数据结构中所有的数据：

A add()

B delete()

C has()

D clear()

 WeakSet数据结构

 基础用法

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与Set 有个区别

WeakSet 的成员只能是对象，而不能是其他类型的值

const ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set

WeakSet 是一个构造函数，可以使用 new 命令，创建 WeakSet 数据结构

 

const ws = new WeakSet([{name: 'iwen'}]);
console.log(ws);
const ws = new WeakSet([[10,20]]);
console.log(ws);

let user1 = {
    "name1": "iwen"
}
let user2 = {
    "name2": "itxiaotong"
}
let weakSet = new WeakSet([user1])
console.log(weakSet.add(user2)) // WeakSet
{{…}, {…}}
console.log(weakSet.has(user2)) // true
console.log(weakSet.delete(user2)) // true
console.log(weakSet.has(user2)) // false

实时效果反馈

1. Set 和 WeakSet 数据结构的区别是什么：

A Set 里面需要放对象类型数据， WeakSet 里面可以放置任意类型

B WeakSet 里面需要放对象类型数据， Set 里面可以放置任意类型

C Set 和 WeakSet 相同