跳转到内容

Symbol

刀刀
0字
0分钟
2026/8/16

Symbol 用于防止属性名冲突,比如向第三方对象中添加属性时。

Symbol 的值是唯一的,独一无二、不会重复

Symbol 基础知识

Symbol 基础使用

js
let hd = Symbol()
console.log(hd) //symbol
console.log(hd == edu) //false

Symbol 不可以添加属性

js
let hd = Symbol()
hd.name = 'daodao'
console.log(hd.name) // undefined

Symbol 描述参数

可传入字符串用于描述 Symbol ,方便在控制台分辨 Symbol

js
let hd = Symbol('is name')
let edu = Symbol('这是一个测试')

console.log(hd) //Symbol(is name)
console.log(edu.toString()) //Symbol(这是一个测试)

传入相同参数 Symbol 也是独立唯一的,因为参数只是描述而已,但使用 Symbol.for 则不会

js
let hd = Symbol('daodao')
let edu = Symbol('daodao')
console.log(hd == edu) //false

使用 description 可以获取传入的描述参数

js
let hd = Symbol('daodao')
console.log(hd.description) //daodao

Symbol.for

根据描述获取 Symbol ,如果不存在则新建一个 Symbol

  • 使用 Symbol.for 会在系统中将 Symbol 登记
  • 使用 Symbol 则不会登记
js
let hd = Symbol.for('daodao')
let edu = Symbol.for('daodao')
console.log(hd == edu) //true

Symbol.keyFor

Symbol.keyFor 根据使用 Symbol.for 登记的 Symbol 返回描述,如果找不到返回 undefined

js
let hd = Symbol.for('刀刀')
console.log(Symbol.keyFor(hd)) //刀刀

let edu = Symbol('duyidao')
console.log(Symbol.keyFor(edu)) //undefined

Symbol 对象属性

Symbol 是独一无二的所以可以保证对象属性的唯一。

  • Symbol 声明和访问使用 [](变量)形式操作
  • 也不能使用 . 语法因为 .语法是操作字符串属性的。

下面写法错误,会将 symbol 当成字符串 symbol 处理

js
let symbol = Symbol('daodao')
let obj = {
  symbol: 'daodao.com',
}
console.log(obj)

正确写法以 [] 变量形式声明和访问

js
let symbol = Symbol('daodao')
let obj = {
  [symbol]: 'daodao.com',
}
console.log(obj[symbol]) //daodao.com

Symbol 实例操作

Symbol 缓存操作

使用 Symbol 可解决在保存数据时由于名称相同造成的耦合覆盖问题。

查看代码
js
class Cache {
  static data = {}
  static set(name, value) {
    this.data[name] = value
  }
  static get(name) {
    return this.data[name]
  }
}

let user = {
  name: '刀刀',
  key: Symbol('首页'),
}

let cart = {
  name: '我的',
  key: Symbol('我的'),
}

Cache.set(user.key, user)
Cache.set(cart.key, cart)
console.log(Cache.get(user.key))

Symbol 遍历属性

Symbol 不能使用 for/infor/of 遍历操作

js
let symbol = Symbol('刀刀')
let obj = {
  name: 'daodao.com',
  [symbol]: 'duyidao.com',
}

for (const key in obj) {
  console.log(key) //name
}

for (const key of Object.keys(obj)) {
  console.log(key) //name
}

可以使用 Object.getOwnPropertySymbols 获取所有 Symbol 属性

js
for (const key of Object.getOwnPropertySymbols(obj)) {
  console.log(key)
}

也可以使用 Reflect.ownKeys(obj) 获取所有属性包括Symbol

js
for (const key of Reflect.ownKeys(obj)) {
  console.log(key)
}

如果对象属性不想被遍历,可以使用 Symbol 保护

js
const site = Symbol('网站名称')
class User {
  constructor(name) {
    this[site] = '刀刀博客'
    this.name = name
  }
  getName() {
    return `${this[site]}-${this.name}`
  }
}
const hd = new User('刀刀')
console.log(hd.getName())
for (const key in hd) {
  console.log(key)
}

贡献者

The avatar of contributor named as duyidao duyidao
The avatar of contributor named as v_duyilin v_duyilin
The avatar of contributor named as 刀刀 刀刀

页面历史

刀刀博客累计访客 人;文档累计访问量共