點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

ES6 Symbol數據類型的應用實例分析

來源：懂視網責編：小采時間：2020-11-27 21:54:29

ES6 Symbol數據類型的應用實例分析

ES6 Symbol數據類型的應用實例分析:本文實例講述了ES6 Symbol數據類型的應用。分享給大家供大家參考，具體如下： Symbol，是ES6中引入的新的數據類型，表示獨一無二的值。在面向對象中，每個對象都有字符串類型的屬性，新方法的名字就有可能與現有方法產生沖突。Symbol的引入保證每個屬性的

推薦度：

點擊下載本文 文檔為doc格式

導讀ES6 Symbol數據類型的應用實例分析:本文實例講述了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程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

ES6 Symbol數據類型的應用實例分析

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用應用類型

熱門焦點

ES6 Symbol數據類型的應用實例分析

ES6 Symbol數據類型的應用實例分析

ES6 Symbol數據類型的應用實例分析

最新推薦

猜你喜歡

熱門推薦