概念: ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。
1-使用Symbol作为对象属性名
let name = Symbol() let age = Symbol() var obj = { [name]:"kerwin", [age]:100 }
举例理解:
a.给对象添加独一无二的属性
let obj = { name: 'Jack' } let name = Symbol() obj[name] = "Mike" console.log(obj); // {name: 'Jack', Symbol(): 'Mike'} console.log(obj[name]); // Mike
b. 便于定义公共库
这里封装属性和方法时, 全部采取Symbol类型, 这样别人就算往里面加name、age等同名的属性或方法, 也不会影响对象原本使用
let keys = { name: Symbol(), age: Symbol(), location: Symbol(), test: Symbol(), } let obj = { [keys.name]: "Mike", [keys.age]: 100, [keys.location]: "WUXI", [keys.test](){ console.log("test"); } } console.log(obj); // {Symbol(): 'Mike', Symbol(): 100, Symbol(): 'WUXI'} obj[keys.test]() // test
注意:
let s1 = Symbol() //1. 不能进行运算 console.log(s1>2); // Uncaught TypeError: Cannot convert a Symbol value to a number //2. 显示调用toString() console.log(s1.toString() + "aaa"); //3. 隐式转换boolean if(s1){ console.log("执行"); }
2-Symbol()函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述。这主要是为了在控制台显示，比较容易区分。
let keys = { name: Symbol("name"), age: Symbol("age"), location: Symbol("localtion"), test: Symbol("test"), } let obj = { [keys.name]: "Mike", [keys.age]: 100, [keys.location]: "WUXI", [keys.test](){ console.log("test"); } } console.log(obj); // {Symbol(name): 'Mike', Symbol(age): 100, Symbol(localtion): 'WUXI', Symbol(test): ƒ}
3-遍历问题
Symbol的值无法被for in进行遍历
let keys = { name:Symbol("name"), age:Symbol("age") } var obj = { [keys.name]:"kerwin", [keys.age]:100, a:1, b:2, c:3 } // 输出对象中的普通属性 for(let i in obj) { console.log(i); // a b c } // 输出对象中的Symbol属性 console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(name), Symbol(age)] // 遍历输出 Reflect.ownKeys(obj) 可以找到对象中所有的属性,并返回一个数组 Reflect.ownKeys(obj).forEach(item=>{ console.log(item,obj[item]) }) /** * Symbol(name) 'kerwin' * test.html:32 Symbol(age) 100 */
补充: 拿到Symbol的属性Object.getOwnPropertySymbols(obj)
4-Symbol.for()可以重新使用同一个 Symbol 值
var obj ={ [Symbol.for("name")]:"kerwin", [Symbol.for("age")]:100 } console.log(obj[Symbol.for("name")]) // kerwin
5-Symbol表示独一无二的常量
case只能使用规定常量
const VIDEO = Symbol(); const AUDIO = Symbol(); const IMAGE = Symbol(); function play(type) { switch(type) { case VIDEO: console.log("VIDEO"); break; case AUDIO: console.log("AUDIO"); break; case IMAGE: console.log("IMAGE"); break; } } play(VIDEO) // VIDEO
参考: 千锋 011-ES6-Symbol_哔哩哔哩_bilibili
