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

前端  /  管理员 发布于 5年前   414

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

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

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

var obj = { name:'Joh', 'my name': 'Johnny'}console.log(obj.name); // Johconsole.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(); // Johlet 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); // trueconsole.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 iterablefor (let i of obj) { console.log(i);}*/obj[Symbol.iterator] = [][Symbol.iterator]; // handle this first// thenfor (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 ES6中数据类型Symbol的使用详解
• ES6中Symbol类型用法实例详解
• ES6概念 Symbol toString()方法
• 详解ES6 Symbol 的用途
• ES6新特性之Symbol类型用法分析
• ES6概念 Symbol.keyFor()方法
• es6 symbol的实现方法示例
• ES6学习笔记之Set和Map数据结构详解
• ES6教程之for循环和Map,Set用法分析
• ES6学习笔记之map、set与数组、对象的对比
• ES6中Symbol、Set和Map用法详解