本文實例講述了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]()); // JohSymbol類型的屬性具有一定的隱藏性
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程序設計有所幫助。
新聞熱點
疑難解答
