ES6 Symbol数据类型的应用实例分析


Posted in Javascript onJune 26, 2019

本文实例讲述了ES6 Symbol数据类型的应用。分享给大家供大家参考,具体如下:

Symbol,是ES6中引入的新的数据类型,表示独一无二的值。在面向对象中,每个对象都有字符串类型的属性,新方法的名字就有可能与现有方法产生冲突。Symbol的引入保证每个属性的名字都是独一无二的,这样就从根本上防止属性名的冲突。

ES6之前对象属性的命名方法

var obj = {
 name:'Joh',
 'my name': 'Johnny'
}
console.log(obj.name); // Joh
console.log(obj['my name']); // Johnny

引入Symbol之后,变量可以不再重复

let name1 = Symbol('name');
let name2 = Symbol('name');
console.log(name1 === name2); // false

可以看出,虽然都是调用了Symbol函数,但是返回的Symbol类型的name1和name2并不相等

将Symbol类型转换为字符串类型

let name1 = Symbol('name');
let name2 = Symbol('name');
console.log(name1.toString());// Symbol(name)
console.log(String(name2)); // Symbol(name)

Symbol类型应用于对象的属性

let getName = Symbol('name');
let obj = {
 [getName]() {
  return 'Joh';
 }
}
console.log(obj[getName]()); // Joh

Symbol类型的属性具有一定的隐藏性

let name = Symbol('name');
let obj = {
 age:22,
 [name]:'Joh'
};
console.log(Object.keys(obj)); // 打印不出 类型为Symbol的[name]属性
// 使用for-in也打印不出 类型为Symbol的[name]属性
for(var k in obj) {
 console.log(k);
}
// 使用 Object.getOwnPropertyNames 同样打印不出 类型为Symbol的[name]属性
console.log(Object.getOwnPropertyNames(obj));
// 使用 Object.getOwnPropertySymbols 可以
var key = Object.getOwnPropertySymbols(obj)[0];
console.log(obj[key]); // Joh

使用Symbol类型模拟对象的私有属性

User 模块

'use strict';
let getName = Symbol('getName');
module.exports = class User {
 [getName]() {
  return 'Joh';
 }
 print() {
  console.log(this[getName]());
 }
}

测试User模块

'use strict';
const User = require('./User');
let user = new User();
user.print(); // Joh
let getName = Symbol('getName');
user[getName](); // getName is not defined 报错, 可知 Symbol 可以在面向对象中模拟私有属性

Symbol.for 和 Symbol.keyFor的应用

let name1 = Symbol.for('name');
let name2 = Symbol.for('name');
console.log(name1 === name2); // true
console.log(Symbol.keyFor(name1)); // name 备注:字符串类型的

使用Symbol.for 获取Symbol类型的值,使用Symbol.keyFor来获取之前的字符串

使用for-of来顺序输出数组的单项

let arr = ['a', 'b', 'c'];
for(let item of arr) {
 console.log(item); // 顺序输出 a b c
}

使用Symbol.iterator迭代器来逐个返回数组的单项

let arr = ['a', 'b', 'c'];
var iterator = 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}

程序的优化:

let arr = ['a', 'b', 'c'];
var iterator = arr[Symbol.iterator]();
// next 方法返回done表示是否完成
var next = iterator.next();
while(!next.done) {
 console.log(next);
 next = iterator.next();
};

Symbol.iterator在面向对象中的应用实例1:

'use strict';
class UserGroup {
 constructor(users) {
  // json {joh:111,lili:1123}
  this.users = users;
 }
 [Symbol.iterator]() {
  let self = this;
  let i = 0;
  const names = Object.keys(this.users);
  const length = names.length;
  // iterator 对象,可以理解为指针
  return {
   next() {
    let name = names[i++];
    let qq = self.users[name];
    return {value: {name, qq}, done: i > length}
   }
  }
 }
}
let group = new UserGroup({'Joh':'595959','Lili':'888116'});
for (let user of group) {
 console.log(user);
}
// { name: 'Joh', qq: '595959' }
// { name: 'Lili', qq: '888116' }

Symbol.iterator在面向对象中的应用实例2:

'use strict';
var obj = {'Joh':'56999', 'Lili':'899888'};
obj[Symbol.iterator] = function() {
 let self = this;
 let i = 0;
 const names = Object.keys(this);
 const length = names.length;
 // iterator 对象,可以理解为指针
 return {
  next() {
   let name = names[i++];
   let qq = self[name];
   return {value: {name, qq}, done: i > length}
  }
 }
}
for (let u of obj) console.log(u);

程序优化之后:

'use strict';
var obj = {'Joh':'56999', 'Lili':'899888'};
let iteratorFun = function () {
 let self = this;
 let i = 0;
 const names = Object.keys(this);
 const length = names.length;
 // iterator 对象,可以理解为指针
 return {
  next() {
   let name = names[i++];
   let qq = self[name];
   return {value: {name, qq}, done: i > length}
  }
 }
}
obj[Symbol.iterator] = iteratorFun;
for (let u of obj) console.log(u);

Symbol.iterator应用于伪数组中

'use strict';
var obj = {
 length:2,
 '0':'abc',
 '1':'ddd'
}
/*
// if this , err: obj is not iterable
for (let i of obj) {
 console.log(i);
}
*/
obj[Symbol.iterator] = [][Symbol.iterator]; // handle this first
// then
for (let i of obj) {
 console.log(i);
}

字符串实现了Symbol.iterator接口

'use strict';
console.log('Joh'[Symbol.iterator]); // [Function: [Symbol.iterator]]
for(let char of 'Lili') {
 console.log(char);
}

同样的,在ES6中在set, map 字符串都能实现 Symbol.iterator接口

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS实现一键回顶功能示例代码
Oct 28 Javascript
js实现拖拽效果
Feb 12 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 Javascript
亲自动手实现vue日历控件
Jun 26 #Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 #Javascript
ES6 Generator函数的应用实例分析
Jun 26 #Javascript
vue实现简单的日历效果
Sep 24 #Javascript
vue实现记事本功能
Jun 26 #Javascript
ES6 Set结构的应用实例分析
Jun 26 #Javascript
vue.js实现备忘录demo
Jun 26 #Javascript
You might like
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
2016/08/16 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
从零学Python之入门(三)序列
2014/05/25 Python
Python求导数的方法
2015/05/09 Python
Django的session中对于用户验证的支持
2015/07/23 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
python将txt文件读取为字典的示例
2018/12/22 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
演讲开场白和结束语
2015/05/29 职场文书
认识实习感想
2015/08/10 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python