初識Symbol

• 什么是Symbol？
• 可以理解它為一個標識，一般情況下用來解決重名問題。

let hd = Symbol('hello,dust.')
let edu = Symbol('good afternoon')
console.log(hd == edu) //false

• 一個Symbol要反復使用可以用Symbol.for定義

let a = Symbol.for('good morning')
let b = Symbol.for('good morning')
console.log(a) //Symbol(good morning)
console.log(a == b) //true
console.log(Symbol.keyFor(a)) //good morning

• 當我們要從一個對象中取值時：
• 假設這個班上有兩個李四，我們要把學生名字作為key，怎么辦？
• 一般情況：

let user1 = '李四'
let user2 = '李四'
let grade = {user1: { js: 100, css: 89 },user2: { js: 100, css: 89 },
}
console.log(grade) //{ user1: { js: 100, css: 89 }, user2: { js: 100, css: 89 } }
let grade2 = {[user1]: { js: 100, css: 89 },[user2]: { js: 70, css: 55 },
}
console.log(grade2) //{ '李四': { js: 70, css: 55 } }

• 用了Symbol的情況：

let user1 = {name: '李四',key: Symbol(),
}
let user2 = {name: '李四',key: Symbol(),
}
let grade = {[user1.key]: { js: 100, css: 89 },[user2.key]: { js: 35, css: 55 },
}
console.log(grade)
//{ [Symbol()]: { js: 100, css: 89 }, [Symbol()]: { js: 35, css: 55 } }
console.log(grade[user1.key]) //{ js: 100, css: 89 }

• Symbol就相當于生成一個永遠不會重復的字符串

let user = {name: 'cat',desc: '用戶資料',key: Symbol('user'),
}
let cart = {name: 'apple',desc: '購物車',key: Symbol('購物車數據'),
}
Cache.set(user.key, user)
Cache.set(cart.key, cart)
console.log(Cache.get(cart.key))
//{ name: 'apple', desc: '購物車', key: Symbol(購物車數據) }

Symbol在類中的作用

class Cache {static data = {}static set(name, value) {return (this.data[name] = value)}static get(name) {return this.data[name]}
}
Cache.set('hello', 'dust')
console.log(Cache.get('hello')) //dust

另一個例子：

let site = Symbol('this is a Symbol')
class User {constructor(name) {this.name = namethis[site] = 'dust'}getName() {return `${this[site]} ${this.name}`}
}let v = new User('lisa')
console.log(v.getName()) //dust lisa
for (const key in v) {console.log(key) //name
}

幾種取值的方式

let symbol = Symbol('這是一個Symbol類型')
let hd = {name: 'dust',[symbol]: 'hello',
}
for (const key of Object.keys(hd)) {console.log(key) //name
}
for (const key of Object.getOwnPropertySymbols(hd)) {console.log(key) //Symbol(這是一個Symbol類型)
}
for (const key of Reflect.ownKeys(hd)) {console.log(key)/*nameSymbol(這是一個Symbol類型)*/
}

總結

以上是生活随笔為你收集整理的[JavaScript] 好用的 JavaScript Symbol 类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。