es6学习之Symbol类型
先看阮一峰老师的概述:ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。
ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。
Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。
Symbol.prototype.description
说明:Symbol类型可以添加一个描述,我们要取用这个描述的时候要转为字符串但是不好看,es2019添加该属性直接返回描述
const {log} = console //结构log打印方法
const sym = Symbol('foo');
log( sym.toString()) // "Symbol(foo)"
log(sym.description) //foo description描述api可以直接取出symbol类型的描述
作为属性名的 Symbol
由于每一个 Symbol 值都是不相等的，这意味着 Symbol 值可以作为标识符，用于对象的属性名，就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用，能防止某一个键被不小心改写或覆盖。
let mySymbol = Symbol();
// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';
// 第二种写法
let a = {
[mySymbol]: 'Hello!'
};
// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
// 以上写法都得到同样结果
a[mySymbol] // "Hello!"
注意symbol类型作为对象的参数取值的时候不能适用.运算符取值,因为.运算符取值默认.后面是字符串
let parameter = Symbol("我是描述")
let a = {}
a.parameter = 1111
console.log(a[parameter]);//undefined
console.log(a["parameter"]);//1111
这里js不会认为a.parameter的parameter是一个变量而是会识别成字符串"parameter"
同理在对面内部直接添加的时候也一样Symbol 值必须放在方括号之中.
let s = Symbol();
let obj = {
[s]: function (arg) { console.log(arg)}
};
obj[s](123);//123
symbol主要的作用来了
const log = {};
log.levels = {
DEBUG: Symbol('debug'),
INFO: Symbol('info'),
WARN: Symbol('warn')
};
console.log(log.levels.DEBUG, 'debug message');//Symbol(debug) 'debug message'
console.log(log.levels.INFO, 'info message');//Symbol(info) 'info message'
每个属性值都不会重复,还有一点需要注意，Symbol 值作为属性名时，该属性还是公开属性，不是私有属性。
实例：消除魔术字符串
魔术字符串指的是，在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码，应该尽量消除魔术字符串，改由含义清晰的变量代替。好处我觉得是显而易见的,通过更改变量就可以更改所有用该变量的代码,不用一个一个去找去改.跟vue中对路由的处理用name的方式来定义异曲同工.
function getArea(shape, options) {
let area = 0;
switch (shape) {
case 'Triangle': // 魔术字符串
area = .5 * options.width * options.height;
break;
/* ... more code ... */
}
return area;
}
getArea('Triangle', { width: 100, height: 100 }); // 魔术字符串
上面代码中，字符串Triangle就是一个魔术字符串。它多次出现，与代码形成“强耦合”，不利于将来的修改和维护。
常用的消除魔术字符串的方法，就是把它写成一个变量。
```js
//或者这种
const shapeType = {
triangle: 'Triangle'
};
function getArea(shape, options) {
let area = 0;
switch (shape) {
case shapeType.triangle: // 魔术字符串
area = .5 * options.width * options.height;
break;
/* ... more code ... */
}
return area;
}
getArea(shapeType.triangle, { width: 100, height: 100 });
上面代码中，我们把`Triangle`写成`shapeType`对象的`triangle`属性，这样就消除了强耦合。
如果仔细分析，可以发现`shapeType.triangle`等于哪个值并不重要，只要确保不会跟其他`shapeType`属性的值冲突即可。因此，这里就很适合改用 Symbol 值。
```js
const shapeType = {
triangle: Symbol()
};
上面代码中，除了将shapeType.triangle的值设为一个 Symbol，其他地方都不用修改,反正地址不会重复了.
属性名的遍历
Symbol 作为属性名，遍历对象的时候，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。
单独想返回symbol类型的属性名的话就使用Object.getOwnPropertySymbols()方法，
const obj = {
name:"张三"
};
let a = Symbol('我是a');
let b = Symbol('我是b');
obj[a] = 'Hello';
obj[b] = 'World';
const objectSymbols = Object.getOwnPropertySymbols(obj);
console.log(objectSymbols); // [Symbol(我是a), Symbol(我是b)]
可以发现obj内部的name属性名没有被Object.getOwnPropertySymbols(obj)打印出来只是打印了symbol类型的属性名称,但一般我们需要打印出来所有的属性名要用到
Reflect.ownKeys()方法可以返回所有类型的键名，包括常规键名和 Symbol 键名。
const obj = {
name:"张三"
};
let a = Symbol('我是a');
let b = Symbol('我是b');
obj[a] = 'Hello';
obj[b] = 'World';
const objectSymbols = Reflect.ownKeys(obj)
console.log(objectSymbols); // ["name",Symbol(我是a), Symbol(我是b)]
由于以 Symbol 值作为键名，不会被常规方法遍历得到。我们可以利用这个特性，为对象定义一些非私有的、但又希望只用于内部的方法。
let size = Symbol('size');
class Collection {
constructor() {
this[size] = 0;
}
add(item) {
this[this[size]] = item;
this[size]++;
}
static sizeOf(instance) {
return instance[size];
}
}
let x = new Collection();
Collection.sizeOf(x) // 0
x.add('foo');
Collection.sizeOf(x) // 1
Object.keys(x) // ['0']
Object.getOwnPropertyNames(x) // ['0']
Object.getOwnPropertySymbols(x) // [Symbol(size)]
上面代码中，对象x的size属性是一个 Symbol 值，所以Object.keys(x)、Object.getOwnPropertyNames(x)都无法获取它。这就造成了一种非私有的内部方法的效果。
Symbol.for()，Symbol.keyFor()
有时，我们希望重新使用同一个 Symbol 值，Symbol.for()方法可以做到这一点。它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值。如果有，就返回这个 Symbol 值，否则就新建一个以该字符串为名称的 Symbol 值，并将其注册到全局。
let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');
console.log(s1 === s2);// true
上面代码中用symbol.for()方法创建了一个"foo"描述的symbol变量但是第二次再次使用会搜索有没有该参数命名的symbol值,发现有返回这个symbol值 注意这个搜索是全局的搜索
let s1 = Symbol.for('foo');
{
let s2 = Symbol.for('foo');
console.log(s1 === s2);// true
}
Symbol.for()与Symbol()这两种写法，都会生成新的 Symbol。它们的区别是，前者会被登记在全局环境中供搜索，后者不会。Symbol.for()不会每次调用就返回一个新的 Symbol 类型的值，而是会先检查给定的key是否已经存在，如果不存在才会新建一个值。比如，如果你调用Symbol.for("cat")30 次，每次都会返回同一个 Symbol 值，但是调用Symbol("cat")30 次，会返回 30 个不同的 Symbol 值。
1. Symbol.for("bar") === Symbol.for("bar")
1. // true
1.
1. Symbol("bar") === Symbol("bar")
1. // false
Symbol.keyFor()方法返回一个已登记的 Symbol 类型值的key。我理解为返回这个类型的描述
let s1 = Symbol.for("foo1");
console.log( Symbol.keyFor(s1)); // "foo1"
let s2 = Symbol("foo1");
console.log(Symbol.keyFor(s2)); // undefined
上面代码中，变量s2属于未登记的 Symbol 值，所以返回undefined。
注意，Symbol.for()为 Symbol 值登记的名字，是全局环境的，不管有没有在全局环境运行。(这个我前面已经发现了 哈哈哈)
function foo() {
return Symbol.for('bar');
}
const x = foo();
const y = Symbol.for('bar');
console.log(x === y); // true
上面代码中，Symbol.for('bar')是函数内部运行的，但是生成的 Symbol 值是登记在全局环境的。所以，第二次运行Symbol.for('bar')可以取到这个 Symbol 值。
Symbol.for()的这个全局登记特性，可以用在不同的 iframe 或 service worker 中取到同一个值。
1. `iframe = document.createElement('iframe');`
1. `iframe.src = String(window.location);`
1. `document.body.appendChild(iframe);`
1. ``
1. `iframe.contentWindow.Symbol.for('foo') === Symbol.for('foo')`
1. `// true`
上面代码中，iframe 窗口生成的 Symbol 值，可以在主页面得到。
iframe = document.createElement('iframe');
iframe.src = String(window.location);
document.body.appendChild(iframe);
iframe.contentWindow.Symbol.for('foo') === Symbol.for('foo')
// true
