ES6 Symbol数据类型应用与Symbol.iterator迭代器详解

Symbol数据类型概述

本文通过具体代码示例，详细解析ES6中Symbol数据类型的实际应用场景，供读者参考学习。

Symbol是ES6规范引入的一种全新数据类型，用于表示独一无二的值。在传统的面向对象编程中，对象属性通常以字符串命名，这可能导致新添加的方法名与现有属性发生命名冲突。引入Symbol后，每个生成的属性名都保证是唯一的，从而从根本上避免了属性名重复或覆盖的问题。

ES6属性命名机制对比

在ES6标准出台之前，JavaScript对象属性的命名主要依赖字符串，缺乏防止冲突的内置机制。


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

Symbol的基本特性与类型转换

引入Symbol机制后，开发者可以确保变量名不会与其他属性发生重复或冲突。


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

尽管多次调用Symbol构造函数，但返回的Symbol类型值（如name1和name2）彼此并不相等，这体现了Symbol的唯一性特征。

介绍如何将Symbol类型的值转换为字符串类型，以便在特定场景下进行调试或输出。


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

Symbol在对象属性中的应用

探讨如何将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模拟私有属性

演示如何利用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与keyFor

解析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方法检索之前注册的字符串描述。

Symbol.iterator迭代器应用

演示如何使用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在面向对象中的实践

提供Symbol.iterator在面向对象编程中的一个具体应用实例。


'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在伪数组与内置类型中的应用

探讨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);
}

说明字符串类型在ES6中已经实现了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程序设计工作有所助益。

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