1. 概述
- ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。
- ES6 数据类型除了 Number 、 String 、 Boolean 、 Objec t、 null 和 undefined ，还新增了 Symbol 。
- ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因
- Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。
1.1 基本用法
let s =Symbol();
console.log(typeof s);
let s1 =Symbol();
let s2 =Symbol();
console.log(s1===s2); //false
1.2 接受一个字符串作为参数
表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分
let s1=Symbol("s1");
let s2=Symbol();
let s3=Symbol();
console.log(s1.toString()); //Symbol(s1)
console.log(s2); //Symbol()
console.log(s3); //Symbol()
2. 使用场景
2.1 作为属性名
- 由于每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。
- Symbol 作为对象属性名时不能用.运算符，要用方括号。因为.运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性。
//1
let sy=Symbol("key1");
let obj={
[sy]:"kk"
}
console.log(obj[sy]); //kk
console.log(obj); //{ [Symbol(key1)]: 'kk' }
//2
let sy=Symbol("key1");
let obj={};
obj[sy]="kk";
console.log(obj[sy]); //kk
console.log(obj); //{ [Symbol(key1)]: 'kk' }
//不能使用.符号
let sy=Symbol("key1");
let obj={};
obj[sy]="kk";
console.log(obj.sy); //undefined
2.2 定义常量
const COLOR_RED = Symbol();
const COLOR_YELLOW = Symbol();
const COLOR_BLUE = Symbol();
function getConstantName(color) {
switch (color) {
case COLOR_RED :
return "red";
case COLOR_YELLOW :
return "YELLOW ";
case COLOR_BLUE:
return "BLUE";
default:
throw new Exception("Can't find this color");
}
}
console.log(getConstantName(COLOR_RED));
2.3 消除魔术字符串
魔术字符串指的是，在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码，应该尽量消除魔术字符串，改由含义清晰的变量代替。
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 }); // 魔术字符串
改进后
const shapeType = {
triangle: Symbol()
};
function getArea(shape, options) {
let area = 0;
switch (shape) {
case shapeType.triangle:
area = .5 * options.width * options.height;
break;
}
return area;
}
getArea(shapeType.triangle, { width: 100, height: 100 });
