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 相关文章推荐
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
React中的Context应用场景分析
Jun 11 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 APC的安装与使用详解
2013/06/13 PHP
初识PHP中的Swoole
2016/04/05 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
Javascript缓存API
2016/06/14 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
js微信支付实现代码
2016/12/22 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
Python实现命令行通讯录实例教程
2016/08/18 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
非常详细的C#面试题集
2016/07/13 面试题
初中生自我评价
2014/02/01 职场文书
优秀经理事迹材料
2014/02/01 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
护士个人年度总结范文
2015/02/13 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
pytorch--之halfTensor的使用详解
2021/05/24 Python
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL