当前位置: 首页 > Web前端 > HTML5

《深入理解ES6》注释——Symbol和Symbol属性(6)

时间:2023-04-05 18:47:21 HTML5

大家还记得Object这个对象吗?letobj={a:1}对象的格式:Object{key:value}在ES5时代,对象的key只能是String类型的字符串。有些人就是想捣乱,把key改成其他数据类型。这不是乱七八糟的吗?为了对付这种捣蛋鬼,ES组织的大神指定了一种新的数据类型:Symbol。原始数据类型在学习Symbol之前,让我们回忆一下你用过的原始数据类型,只有5种,不要搞错了。面试的时候有人问你null和undefined的区别吗?问这种问题的人很无聊。如果你和他一起工作,你真的会很痛苦。NumberNumbertypeconsta=10typeofa//numberStringStringconsta='haha'typeofa//stringbooleanBooleantypeconsta=true,b=falseSymbolSymbol长什么样?我应该如何使用它?让我们一起探索。在MDN文档中,关于Symbol的描述是这样的:Symbol是一种特殊的、不可变的数据类型,可以作为对象属性的标识。Symbol对象是符号原始数据类型的隐式对象包装器。符号数据类型是原始数据类型。Symbol的语法:Symbol([description])//description是可选的创建一个Symbol:看了Symbol的描述,还不知道这到底是个什么东西?看起来像一个函数。我们开始根据学习的语法创建一个Symbolconstname=Symbol();constname1=Symbol('sym1');console.log(name,name1)//Symbol()Symbol(sym1)Symbol不能使用newconst名称=新符号();//这是做不到的。//Symbol不是构造函数使用Symbol:使用Number时,我们可以这样写:constb=Number(10)//10//简写constb=10同样,使用Symbol,我们可以这样写:constname1=符号('sym1');//Symbol(sym1)可以在任何使用可计算属性名称的地方使用Symbol类型。如对象中的键。constname=Symbol('名字');constobj={[name]:"haha"}console.log(obj[name])//哈哈你也可以使用Object.defineProperty()和Object.defineProperties()方法。这两个方法都是对象方法,但是作为Symbol类型的key,不影响使用。//将对象属性设置为只读。Object.defineProperty(obj,name,{writable:false})这两个方法非常好用。在react源码中,大量使用了具有只读属性的对象。下面是从react源码中截取的一段代码,将props对象设置为只读。但是React仍然使用字符串作为键而不是符号。Object.defineProperty(props,'key',{get:warnAboutAccessingKey,configurable:true});Symbol全局共享Symbol有点特殊,js文件中定义的Symbol不能直接在其他文件中共享。ES6提供了注册机制。当你注册一个Symbol时,你可以在注册表中全局共享这个Symbol。Symbol注册表与对象表非常相似,都是键值结构,只不过value是一个Symbol值。(key,Symbol)Syntax:Symbol.for()//只有一个参数,另一种方法是获取注册表的Symbol。Syntax:Symbol.keyFor()//只有一个参数,返回的key是从registry中获取全局共享的Symbol.letname=Symbol.for('name');letname1=Symbol.for('name1');letname2=Symbol.for('name2');console.log(Symbol.keyFor(name))//nameconsole.log(Symbol.keyFor(name1))//name1console.log(Symbol.keyFor(name2))//name2注意:如果要防止Symbol命名重复,可以加前缀。如:hyy.nameSymbol和typecoercionJavaScript中的类型可以自动转换。例如,Number被转换为字符串。让a=1;console.log(typeofa);//numberconsole.log(a+'haha')//'1haha'但请注意Symbol不支持这种转换。符号太诱人了!leta=Symbol('a');console.log(typeofa);console.log(a+'haha')//CannotconvertaSymbolvaluetoastringSymbol在对象中检索字符串的键时,你可以使用Object.keys()或Object.getOwnPropertyNames()方法获取key,但是如果使用Symbol作为key,则只能使用ES6的new方法获取。leta=Symbol('a');letb=Symbol('b');letobj={[a]:"123",[b]:45}constsymbolsKey=Object.getOwnPropertySymbols(obj);for(letvalueofsymbolsKey){console.log(obj[value])}//"123"//45总结Symbol也提供了多种方法供开发者使用。我们不会一一研究每种方法的使用。你如果想了解更多,可以查看SymbolMDN文档。我们只需要知道Symbol是如何定义的,如何全局共享即可。如果替换对象中的key,就可以满足基本的开发需求。最后再回顾一下什么是Symbol:Symbol是JavaScript的一种原始数据类型,是一种全新的数据类型,与对象、数字、字符串等完全不同,必须通过Symbol()创建。使用方法见上面的详细介绍。=>返回文章目录