前端进阶攻略之ES6中的Symbol

ES6中的Symbol

一.Symbol基本概念

Symbol是ES6中引入得一种新型的数据类型（符号类型），它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值Boolean、字符串String、数值Number、对象Object`

1.1.引入Symbol的好处

为解决属性名冲突问题而生

ES5 中方法和属性的命名：

• 以前，我们给一个对象下的方法或者属性命名的时候，可能会与该对象原有的方法或者属性产生冲突，这样的场景想必大家也很熟悉，我们常用到的解决办法是将方法前加一段项目名称的简拼或者一些其他的方式，其根本原因就是给方发或者属性带上一个独一无二的标志，最大限度的防止命名上的冲突

ES6 中方法和属性的命名：

• ES6中引入了Symbol数据类型，其基本解决思路也是和ES5差不多的，只不过就是直接利用Symbol能够表示一个独一无二的值，这就从根本上防止方法或者属性名的冲突

二.Symbol基本用法

Symbol是由ES6规范引入的一项新特性，它的功能类似于一种标识唯一性的ID。通常情况下，我们可以通过调用Symbol()函数来创建一个Symbol实例：

let s1 = Symbol();

或者，你也可以在调用Symbol()函数时传入一个可选的字符串参数，相当于给你创建的Symbol实例一个描述信息：

let s2 = Symbol('another symbol');

应用场景1.Symbol() 没有字面量

像数组，对象，正则，都拥有自己的字面量，而Symbol()没有字面量。

应用场景2.Symbol()符号永远不会相等，不管符号名是否相同

由于Symbol是一种基础数据类型，所以当我们使用typeof去检查它的类型的时候，它会返回一个属于自己的类型symbol，而不是什么string、object之类的：

const c=Symbol()
console.log(typeof(c));  //symbol

另外，我们需要重点记住的一点是：每个Symbol实例都是唯一的。因此，当你比较两个Symbol实例的时候，将总会返回false：

const d=Symbol();
const c=Symbol();
console.log(c==d);  //false
console.log(c===d); //false

应用场景3：使用Symbol来作为对象属性名(key)

Symbol可以直接作为对象属性名(key)

const syb1 = Symbol("即将用于对象的属性名");
		const obj = {
			a : 1,
			b : 2,
			[syb1] : 3
}
console.log(obj[syb1])  //3

应用场景5：Symbol不能被枚举的 for-in 循环中无法去得到符号属性

随之而来的是另一个非常值得注意的问题：就是当使用了Symbol作为对象的属性key后，在对该对象进行key的枚举时，会有什么不同？在实际应用中，我们经常会需要使用Object.keys()或者for…in来枚举对象的属性名，那在这方面，Symbol类型的key表现的会有什么不同之处呢？来看以下示例代码：

        const PROP_NAME = Symbol()
        const PROP_AGE = Symbol()
        let obj = {
          name:"张三",
          [PROP_NAME]: "李四"
        }
        obj[PROP_AGE] = 18
        obj[PROP_NAME] // '李四'
        obj[PROP_AGE] // 18
        console.log(obj[PROP_NAME]);
        console.log(obj[PROP_AGE]);

Symbol类型的key是不能通过Object.keys()或者for…in来枚举的，它未被包含在对象自身的属性名集合(property names)之中。所以，利用该特性，我们可以把一些不需要对外操作和访问的属性使用Symbol来定义。来看以下示例代码:

        const PROP_NAME = Symbol()
        const PROP_AGE = Symbol()
        let obj = {
          name:"张三",
          [PROP_NAME]: "李四"
        }
        obj[PROP_AGE] = 18
        obj[PROP_NAME] // '李四'
        obj[PROP_AGE] // 18
        console.log(obj[PROP_NAME]);
        console.log(obj[PROP_AGE]);
        console.log(Object.keys(obj));  //Object.keys()无法查看Symbol类型的key
        for (let p in obj) {  //for in 也无法查看Symbol类型的key
             console.log(p)   
         }
         console.log(JSON.stringify(obj));  //{"name":"张三"}

也正因为这样一个特性，当使用JSON.stringify()将对象转换成JSON字符串的时候，Symbol属性也会被排除在输出内容之外

应用场景6：使用Symbol来替代常量

先来看一下下面的代码，是不是在你的代码里经常会出现？

const TYPE_AUDIO = 'AUDIO'
const TYPE_VIDEO = 'VIDEO'
const TYPE_IMAGE = 'IMAGE'

function handleFileResource(resource) {
  switch(resource.type) {
    case TYPE_AUDIO:
      playAudio(resource)
      break
    case TYPE_VIDEO:
      playVideo(resource)
      break
    case TYPE_IMAGE:
      previewImage(resource)
      break
    default:
      throw new Error('Unknown type of resource')
  }
}

如上面的代码中那样，我们经常定义一组常量来代表一种业务逻辑下的几个不同类型，我们通常希望这几个常量之间是唯一的关系，为了保证这一点，我们需要为常量赋一个唯一的值（比如这里的’AUDIO’、‘VIDEO’、 ‘IMAGE’），常量少的时候还算好，但是常量一多，你可能还得花点脑子好好为他们取个好点的名字。

现在有了Symbol，我们大可不必这么麻烦了：

const TYPE_AUDIO = Symbol()
const TYPE_VIDEO = Symbol()
const TYPE_IMAGE = Symbol()

这样定义，直接就保证了三个常量的值是唯一的了！是不是挺方便的呢。

应用场景7:可以通过一些设计(闭包的形式)，让这些属性无法通过常规的方法被外界访问

		const Hero = (()=>{
			const getRandom = Symbol();
			return class Hero{
				constructor(attack,defence,hp){
					this.attack = attack;
					this.defence = defence;
					this.hp = hp;
				}
				gongji(){
					const dmg = this.attack * this[getRandom](0.8,1.1)
					console.log(dmg)
				}
				[getRandom](min,max){  
					return Math.random() * (max - min) + min;
				}
			}
		})()
const hero = new Hero(30,50,1000)
console.log(hero);
console.log(hero[getRandom]); //报错
hero.gongji();

在一些特定的场景中，我们不希望外部可以访问内部的方法是时，就可以通过闭包的形式，定义symbol类型的方法名，这样外部就无法访问内部的方法。

应用场景8:Symbol是没有办法被转换的，所以说不能用数学运算，字符串拼接，隐式转换,直接error

但是可以被显示转换，例如String()

const syb = Symbol();
console.log(syb + "true")  //ncaught TypeError: Cannot convert a Symbol value to a string
console.log(syb+123);
console.log(typeof(String(syb)) )