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代码
May 27 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
vue调用语音播放的方法
Sep 27 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
JavaScript实现动态生成表格
Aug 02 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在Web开发领域的优势
2006/10/09 PHP
php计算十二星座的函数代码
2012/08/21 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
layui分页效果实现代码
2017/05/19 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
python下载的库包存放路径
2020/07/27 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
晚归检讨书
2014/02/19 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
邀请函范文
2015/02/02 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
国庆节主题班会
2015/08/15 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis