重庆小潘seo博客

当前位置:首页 > 重庆网络营销 > 小潘杂谈 >

小潘杂谈

symbol的用法详解

时间:2020-09-17 15:20:08 作者:重庆seo小潘 来源:
Symbol() 的使用方法 简介:ES5的对象属性名都是字符串,这就很容易造成属性名的冲突,比如一个项目很庞大,又不是一个人开发 的,就有可能会造成变量名冲突,如果有一个独一无二的名字就好了,这样就能从根本上防止属性名冲突。这就是ES6引入Symbol的原因。

symbol的用法详解

Symbol() 的使用方法

简介:ES5的对象属性名都是字符串,这就很容易造成属性名的冲突,比如一个项目很庞大,又不是一个人开发 的,就有可能会造成变量名冲突,如果有一个独一无二的名字就好了,这样就能从根本上防止属性名冲突。这就是ES6引入Symbol的原因。

ES6引入的是一种新的原始数据类型Symbol,表示独一无二的,它是JavaScript的第七种数据类型。Symbol值通过Symbol函数生成,只要属性名是属于Symbol类型的,就是独一无二的,可以保证不会与其他属性名产生冲突。let s = Symbol();typeof s;//"symbol"上面的代码中s 就是一个独一无二的值,typeof表明s 是symbol数据类型的。

注意:symbol函数前不能使用new关键字,否则会报错,这是因为symbol是原始数据类型,而不是对象,所以不能添加属性。

symbol可以接受一个字符串作为参数,表示对Symbol的描述,主要是在控制台显示时容易区分var s1 = Symbol("foo");var s2 = Symbol("bar");s1 // Symbol("foo")s2 // Symbol("bar")s1.toString() // "Symbol(foo)"s2.toString() // "Symbol(bar)这个参数可以不加,如果不加在控制台输出就是两个Symbol()不利于区分,加上参数就是为了加以区分。

没有参数的两个Symbol是不相等的,例如// 没有参数的情况var s1 = Symbol();var s2 = Symbol();s1 == s2 // false// 有参数的情况var s1 = Symbol("foo");var s2 = Symbol("foo");s1 == s2 // false无论有没有参数都是不相等的

Symbol不能与其他值进行运算,否则会报错var s1 = Symbol("My Symbol");"your symbol is" + s1;// TypeError: can't convert symbol to string`your symbol is ${s1}`// TypeError: can't convert symbol to stringSymbole 可以显示的转为字符串,布尔值,但是不能转为数字// 转为字符串var s1 = Symbol("My Symbol");String(s1) // "Symbol(My Symbol)"s1.toString() // "Symbol(My Symbol)"//转为布尔值var s1 = Symbol();Boolean(s1) //true!s1 //falseif(s1) { //...}//转为数值就会报错由于每一个Symbol都不相同,那么可以作为标识符作为对象的属性名,保证不会出现同名的的属性var mySymbol = Symbol();//第一种写法var a = {};a[mySymbol] = "Hello!";//第二种写法var a = {[mySymbol]: "Hellow!"}//第三种写法var a = {};Object.defineProperty(a, mySymbol, { value: "Hellow!" });//以上写法的结果都相同a[mySymbol] // "Hellow!"注意:Symbol值作为对象的属性名时不能使用点运算符,同理,在对象的内部使用Symbol值时也必须放在方括号中let s = Symbol();let obj = {[s]: function(arg) {...}}//如果s不放在[]中,该属性名就是字符串,而不是Symbol//可以采用增强的方式在书写上面的代码let s = Symbol();let obj = {[s](arg) {...}}Symbol还可以定义一组常量,保证这组常量的值都是不相等的const COLOR_RED = Symbol();const COLOR_GREEN = Symbol();function getComponent(color) {switch(color) {case: COLOR_RED:return "red";case: COLOR_GREEN:return "green";default:throw new Error("Undefind color")}}常量使用Symbol值最大的好处就是,其他任何值都不可能与之相同。

消除魔术字符串

魔术字符串就是指,在代码之中多次出现,与代码形成强耦合的某一个具体的字符串或数字,良好的代码风格应该消除魔术字符串,由含义清晰的变量代替。function getArea(shape, options) {var area = 0;switch(shape) {case: "Tringel":// 魔术字符串area = 5*options.width*options.height;break;}return area;}getArea("Tringel", {width: 100, height: 100});// 魔术字符串上面的字符串中 Tringel 就是一个魔术字符串,它多次出现,与代码形成强耦合,不利于将来的维护。var shapeType = {triangle: "Tringel"}function getArea(shape, options) {var area = 0;switch(shape) {case: shapeType.triangle:// 消除魔术字符串area = 5*options.width*options.height;break;}return area;}getArea(shapeType.triangle, {width: 100, height: 100});//消除魔术字符串这里就很适合用Symbol来代替var shapeType = {triangle: Symbol()}更多相关知识,请访问PHP中文网!以上就是symbol的用法详解的详细内容,更多请关注小潘博客其它相关文章!