ES6 Symbol数据类型的应用实例分析
(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )
本文实例讲述了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程序设计有所帮助。
下一篇：亲自动手实现vue日历控件