宣告定義symbol的幾種方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <script> // let a = Symbol(); // let b = Symbol(); // console.log(a); // console.log(typeof a); // console.log(a == b); // Symbol可以加上描述 // let a = Symbol('這是a'); // console.log(a); // console.log(a.toString()); // console.log(a.description); // Symbol() 和Symbol.for() 的區別 // let a = Symbol('cyy'); // let b = Symbol('cyy'); // console.log(a == b); // Symbol.for是在全域存盤一個變數，可以使用Symbol.keyFor來獲取到描述 // Symbol()沒有，不能獲取到描述 // let a2 = Symbol.for('cyy'); // let b2 = Symbol.for('cyy'); // console.log(a2 == b2); // console.log(Symbol.keyFor(a2)); </script> </body> </html>
使用Symbol解決字串耦合問題：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <script> // 前面的cyy屬性被后面的覆寫 // let grade = { // cyy: { // class: 'html', // score: 99 // }, // cyy2: { // class: 'css', // score: 28 // }, // cyy: { // class: 'html', // score: 33 // }, // }; // console.log(grade); // let user1 = 'cyy1'; // let user2 = 'cyy2'; // let grade = { // user1: { // class: 'html', // score: 99 // }, // user2: { // class: 'css', // score: 28 // }, // }; // console.log(grade); // 屬性名需要加上中括號才能使用變數 // let user1 = 'cyy1'; // let user2 = 'cyy2'; // let grade = { // [user1]: { // class: 'html', // score: 99 // }, // [user2]: { // class: 'css', // score: 28 // }, // }; // console.log(grade); let user1 = { name: 'cyy1', key: Symbol() }; let user2 = { name: 'cyy2', key: Symbol() }; let grade = { [user1.key]: { class: 'html', score: 99 }, [user2.key]: { class: 'css', score: 28 }, }; console.log(grade); console.log(grade[user1.key]); console.log(grade[user2.key]); </script> </body> </html>
Symbol在快取容器中的使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> </style> </head> <body> <script> class Cache { static data = {}; static set(name, value) { return this.data[name] = value; } static get(name) { return this.data[name]; } } // Cache.set('cyy', 'girl'); // console.log(Cache.get('cyy')); // 存在覆寫的情況 // let user = { // name: 'apple', // desc: '用戶' // }; // let cart = { // name: 'apple', // desc: '購物車' // }; // Cache.set('apple', user); // Cache.set('apple', cart); // console.log(Cache.get('apple')); // 傳統解決方法 // let user = { // name: 'apple', // desc: '用戶' // }; // let cart = { // name: 'apple', // desc: '購物車' // }; // Cache.set('user-apple', user); // Cache.set('cart-apple', cart); // console.log(Cache.get('user-apple')); let user = { name: 'apple', desc: '用戶', key: Symbol() }; let cart = { name: 'apple', desc: '購物車', key: Symbol() }; Cache.set(user.key, user); Cache.set(cart.key, cart); console.log(Cache.get(user.key)); </script> </body> </html>
擴展特性與物件屬性保護：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> </style> </head> <body> <script> // Symbol的物件屬性保護，無法使用for-of或者for-in來回圈遍歷 // let symbol = Symbol('這是一個symbol型別'); // let obj = { // name: 'cyy', // [symbol]: 'cyy-symbol' // }; // for (let o of obj) { // console.log(o); // } // for (let k in obj) { // console.log(k); // } // for (let k of Object.keys(obj)) { // console.log(k); // } // 只遍歷symbol屬性 // for (let k of Object.getOwnPropertySymbols(obj)) { // console.log(k); // } // 遍歷所有屬性 // for (let k of Reflect.ownKeys(obj)) { // console.log(k); // } // 物件屬性保護，不希望讓外界獲取到的屬性 let secret = Symbol('這是我的小秘密~'); class User { // 建構式 constructor(name) { this.name = name; this[secret] = '保密'; } getName() { return `${this.name}--${this[secret]}`; } } let c = new User('cyy呀'); console.log(c.getName()); for (let k in c) { console.log(k); } </script> </body> </html>
補充一下
Reflect.ownKeys()與Object.keys()區別
var obj = {
a: 1,
b: 2
}
Object.defineProperty(obj, 'method', {
value: function () {
alert("Non enumerable property")
},
enumerable: false
})
console.log(Object.keys(obj))
// ["a", "b"]
console.log(Reflect.ownKeys(obj))
// ["a", "b", "method"]
從結果上看出:
Object.keys()回傳屬性key，但不包括不可列舉的屬性
Reflect.ownKeys()回傳所有屬性key
Object.keys() : 相當于回傳屬性陣列
Reflect.ownKeys() :相當于Object.getOwnPropertyNames(target) concat(Object.getOwnPropertySymbols(target)
getOwnPropertyNames()：方法: 回傳所有屬性的陣列
Object.getOwnPropertySymbols()：方法: 回傳所有符號屬性直接發現在給定的物件
參考鏈接：https://blog.csdn.net/oxgos/article/details/82854848
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/220697.html
標籤：JavaScript
上一篇：BigInt