欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Symbol到底是个啥玩意

程序员文章站 2024-02-17 15:34:58
...

Symbol基础:

Symbol是唯一的数据结构, 只要你声明了Symbol, 那么就是唯一的了.

  1. 直接声明:
   let ck = Symbol('ck') // 后面的‘ck’不是Symbol存储的值, 只是为了区别不同的Symbol的描述. 
   let kb = Symbol('kb')
   console.log(ck);
   console.log(kb);
   console.log(ck === kb) // false

// 即使后面的描述是一样的, 两个返回的也是false
let ck2  = Symbol('ck2')
let ck3 = Symbol('ck2')
console.log(ck2 === ck3) // false

2.通过for声明

let ck1 = Symbol.for('ck1')
let kb1 = Symbol.for('kb1')
console.log(Symbol.keyFor(ck1));
console.log(Symbol.keyFor(kb1));

通过for声明的Symbol, 要使用keyFor()来进行访问.

3.使用了Symbol声明的对象, 遍历的几种方式.

const symbol = Symbol('this is the Symbol')
const User = {
  name:'ck',
  [symbol]: 'ck is not a student any more'
}

// 只能遍历到普通属性
for(let item in User) {
  console.log(item);
}
// name

// 只能遍历到普通属性
for(let item of Object.keys(User)){
  console.log(item);
}
// name

// 遍历Symbol属性
for(let item of Object.getOwnPropertySymbols(User)){
  console.log(item);
}
// symbol

// 遍历到普通属性、Symbol属性
for(const item of Reflect.ownKeys(User)){
  console.log(item);
}
// name symbol

4.对象要隐藏一些不想别人访问到的属性

let symbol = Symbol('thi is a Symnol')

class User{
	constructor(name, value){
		this.name = name
		this[symbol] = value
	}
getName() {
	return `${this.name}${this[symbol]}`
	}
}

const user = new User('bob', 'is a cookie')

for(const item in user){
	console.log(item) // name 没有value, 因为访问不到
}

for(const item in Reflect.ownKeys(user)){
	console.log(item) // name、symbol
}

Symbol到底用来干嘛

  • Symbol不是直接存储数据的, 而是, 作为一个独一无二的key, 放置数据的, 防止数据因为重复, 无法存进数据对象中,例如: obj中,存入key为1和‘1’的值, 后面的会把前面的覆盖掉.
class Cache{
    static data = {}
    static set(name, value) {
        this.data[name] = value
    }
    static get(name){
        console.log(this.data[name])
        return this.data[name]
    }
}

let user = {
    name:'用户信息',
    key:Symbol('用户信息')
}

let cart = {
    name: '购物车信息',
    key: Symbol('购物车信息')
}

Cache.set(cart.key, '这是购物车存储的信息')
Cache.set(user.key, '这是用户存储的信息')
Cache.get(user.key) // 这是用户存储的信息
Cache.get(cart.key) // 这里购物车存储的信息
console.log(Cache.data) // { [Symbol(购物车信息)]: '这是购物车存储的信息', [Symbol(用户信息)]: '这是用户存储的信息' }
相关标签: js基础