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程序设计有所帮助。