ES6 Symbol数据类型的应用实例分析
本文实例讲述了ES6Symbol数据类型的应用。分享给大家供大家参考,具体如下:
Symbol,是ES6中引入的新的数据类型,表示独一无二的值。在面向对象中,每个对象都有字符串类型的属性,新方法的名字就有可能与现有方法产生冲突。Symbol的引入保证每个属性的名字都是独一无二的,这样就从根本上防止属性名的冲突。
ES6之前对象属性的命名方法
varobj={ name:'Joh', 'myname':'Johnny' } console.log(obj.name);//Joh console.log(obj['myname']);//Johnny
引入Symbol之后,变量可以不再重复
letname1=Symbol('name'); letname2=Symbol('name'); console.log(name1===name2);//false
可以看出,虽然都是调用了Symbol函数,但是返回的Symbol类型的name1和name2并不相等
将Symbol类型转换为字符串类型
letname1=Symbol('name'); letname2=Symbol('name'); console.log(name1.toString());//Symbol(name) console.log(String(name2));//Symbol(name)
Symbol类型应用于对象的属性
letgetName=Symbol('name'); letobj={ [getName](){ return'Joh'; } } console.log(obj[getName]());//Joh
Symbol类型的属性具有一定的隐藏性
letname=Symbol('name'); letobj={ age:22, [name]:'Joh' }; console.log(Object.keys(obj));//打印不出类型为Symbol的[name]属性 //使用for-in也打印不出类型为Symbol的[name]属性 for(varkinobj){ console.log(k); } //使用Object.getOwnPropertyNames同样打印不出类型为Symbol的[name]属性 console.log(Object.getOwnPropertyNames(obj)); //使用Object.getOwnPropertySymbols可以 varkey=Object.getOwnPropertySymbols(obj)[0]; console.log(obj[key]);//Joh
使用Symbol类型模拟对象的私有属性
User模块
'usestrict'; letgetName=Symbol('getName'); module.exports=classUser{ [getName](){ return'Joh'; } print(){ console.log(this[getName]()); } }
测试User模块
'usestrict'; constUser=require('./User'); letuser=newUser(); user.print();//Joh letgetName=Symbol('getName'); user[getName]();//getNameisnotdefined报错,可知Symbol可以在面向对象中模拟私有属性
Symbol.for和Symbol.keyFor的应用
letname1=Symbol.for('name'); letname2=Symbol.for('name'); console.log(name1===name2);//true console.log(Symbol.keyFor(name1));//name备注:字符串类型的
使用Symbol.for获取Symbol类型的值,使用Symbol.keyFor来获取之前的字符串
使用for-of来顺序输出数组的单项
letarr=['a','b','c']; for(letitemofarr){ console.log(item);//顺序输出abc }
使用Symbol.iterator迭代器来逐个返回数组的单项
letarr=['a','b','c']; variterator=arr[Symbol.iterator](); //next方法返回done表示是否完成 console.log(iterator.next());//{value:"a",done:false} console.log(iterator.next());//{value:"b",done:false} console.log(iterator.next());//{value:"c",done:false} console.log(iterator.next());//{value:undefined,done:true} console.log(iterator.next());//{value:undefined,done:true}
程序的优化:
letarr=['a','b','c']; variterator=arr[Symbol.iterator](); //next方法返回done表示是否完成 varnext=iterator.next(); while(!next.done){ console.log(next); next=iterator.next(); };
Symbol.iterator在面向对象中的应用实例1:
'usestrict'; classUserGroup{ constructor(users){ //json{joh:111,lili:1123} this.users=users; } [Symbol.iterator](){ letself=this; leti=0; constnames=Object.keys(this.users); constlength=names.length; //iterator对象,可以理解为指针 return{ next(){ letname=names[i++]; letqq=self.users[name]; return{value:{name,qq},done:i>length} } } } } letgroup=newUserGroup({'Joh':'595959','Lili':'888116'}); for(letuserofgroup){ console.log(user); } //{name:'Joh',qq:'595959'} //{name:'Lili',qq:'888116'}
Symbol.iterator在面向对象中的应用实例2:
'usestrict'; varobj={'Joh':'56999','Lili':'899888'}; obj[Symbol.iterator]=function(){ letself=this; leti=0; constnames=Object.keys(this); constlength=names.length; //iterator对象,可以理解为指针 return{ next(){ letname=names[i++]; letqq=self[name]; return{value:{name,qq},done:i>length} } } } for(letuofobj)console.log(u);
程序优化之后:
'usestrict'; varobj={'Joh':'56999','Lili':'899888'}; letiteratorFun=function(){ letself=this; leti=0; constnames=Object.keys(this); constlength=names.length; //iterator对象,可以理解为指针 return{ next(){ letname=names[i++]; letqq=self[name]; return{value:{name,qq},done:i>length} } } } obj[Symbol.iterator]=iteratorFun; for(letuofobj)console.log(u);
Symbol.iterator应用于伪数组中
'usestrict'; varobj={ length:2, '0':'abc', '1':'ddd' } /* //ifthis,err:objisnotiterable for(letiofobj){ console.log(i); } */ obj[Symbol.iterator]=[][Symbol.iterator];//handlethisfirst //then for(letiofobj){ console.log(i); }
字符串实现了Symbol.iterator接口
'usestrict'; console.log('Joh'[Symbol.iterator]);//[Function:[Symbol.iterator]] for(letcharof'Lili'){ console.log(char); }
同样的,在ES6中在set,map字符串都能实现Symbol.iterator接口
更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。