ES6 Symbol數(shù)據(jù)類型的應(yīng)用實例分析
本文實例講述了ES6 Symbol數(shù)據(jù)類型的應(yīng)用。分享給大家供大家參考，具體如下：
Symbol，是ES6中引入的新的數(shù)據(jù)類型，表示獨一無二的值。在面向?qū)ο笾校總€對象都有字符串類型的屬性，新方法的名字就有可能與現(xiàn)有方法產(chǎn)生沖突。Symbol的引入保證每個屬性的名字都是獨一無二的，這樣就從根本上防止屬性名的沖突。
ES6之前對象屬性的命名方法
var obj = {
name:'Joh',
'my name': 'Johnny'
}
console.log(obj.name); // Joh
console.log(obj['my name']); // Johnny
引入Symbol之后，變量可以不再重復(fù)
let name1 = Symbol('name');
let name2 = Symbol('name');
console.log(name1 === name2); // false
可以看出，雖然都是調(diào)用了Symbol函數(shù)，但是返回的Symbol類型的name1和name2并不相等
將Symbol類型轉(zhuǎn)換為字符串類型
let name1 = Symbol('name');
let name2 = Symbol('name');
console.log(name1.toString());// Symbol(name)
console.log(String(name2)); // Symbol(name)
Symbol類型應(yīng)用于對象的屬性
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 可以在面向?qū)ο笾心M私有屬性
Symbol.for 和 Symbol.keyFor的應(yīng)用
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來順序輸出數(shù)組的單項
let arr = ['a', 'b', 'c'];
for(let item of arr) {
console.log(item); // 順序輸出 a b c
}
使用Symbol.iterator迭代器來逐個返回數(shù)組的單項
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}
程序的優(yōu)化：
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在面向?qū)ο笾械膽?yīng)用實例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在面向?qū)ο笾械膽?yīng)用實例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);
程序優(yō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應(yīng)用于偽數(shù)組中
'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);
}
字符串實現(xiàn)了Symbol.iterator接口
'use strict';
console.log('Joh'[Symbol.iterator]); // [Function: [Symbol.iterator]]
for(let char of 'Lili') {
console.log(char);
}
同樣的，在ES6中在set, map 字符串都能實現(xiàn) Symbol.iterator接口
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細介紹了js實現(xiàn)計數(shù)器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
枚舉的實現(xiàn)求得1-1000所有出現(xiàn)1的數(shù)字并計算出現(xiàn)1的個數(shù)
求得1-1000所有出現(xiàn)1的數(shù)字，并計算出現(xiàn)1的個數(shù)，以下是采用枚舉的實現(xiàn)方法，但是若從1-N就不管用了，因為N不一定會是多少2013-09-09
JavaScript觀察者模式(publish/subscribe)原理與實現(xiàn)方法
這篇文章主要介紹了JavaScript觀察者模式(publish/subscribe)原理與實現(xiàn)方法,簡單分析了javascript觀察者模式的原理、功能并結(jié)合實例形式給出了觀察者模式的實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
獲取當前網(wǎng)頁document.url location.href區(qū)別總結(jié)
請教:document.URL和window.location.href區(qū)別2008-05-05
本文通過實例給大家詳細介紹了jstree的使用技巧，需要的朋友可以參考下本文2016-12-12
這篇文章主要介紹了js簡單工廠模式用法,實例分析了javascript工廠模式的實現(xiàn)原理,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JavaScript變量作用域及內(nèi)存問題,結(jié)合實例形式分析了javascript全局變量、局部變量、塊級作用域等概念及內(nèi)存優(yōu)化問題相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
javascript使用輸出語句實現(xiàn)網(wǎng)頁特效代碼
這篇文章主要介紹javascript使用輸出語句實現(xiàn)網(wǎng)頁特效，有需要的朋友可以參考下2015-08-08
一個不錯的字符串轉(zhuǎn)碼解碼函數(shù)(自寫)
一個不錯的字符串轉(zhuǎn)碼解碼函數(shù),自己寫的，有需要的朋友可以參考下2014-07-07
這篇文章主要介紹了BootStrap selectpicker 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06