JS基础 Symbol 用于防止属性名冲突

曾经终败给现在 2023-10-06 21:39 29阅读 0赞

#### 阅读目录 ####

*  Symbol
 *   *  基础知识
     *  描述参数
     *  Symbol.for 根据描述获取 Symbol
     *  Symbol.keyFor 根据使用Symbol.for登记的Symbol返回描述
     *  对象属性
 *  实例操作
 *   *  缓存操作
     *  遍历属性

## Symbol ##

Symbol用于防止属性名冲突而产生的，比如向第三方对象中添加属性时。

Symbol 的值是唯一的，独一无二的不会重复的。

### 基础知识 ###

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

Symbol 不可以添加属性

let hd = Symbol();
    hd.name = "wgchen";
    
    console.log(hd.name);  // undefined

### 描述参数 ###

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

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

![在这里插入图片描述][271ad63a86694fcea8fe68168388ad4d.png]  
传入相同参数Symbol也是独立唯一的，因为参数只是描述而已，但使用 Symbol.for则不会

let hd = Symbol("wgchen");
    let edu = Symbol("wgchen");
    
    console.log(hd == edu); //false
    console.log(hd); // Symbol(wgchen)
    console.log(edu); // Symbol(wgchen)

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

let hd = Symbol("wgchen");
    console.log(hd.description); // wgchen

### Symbol.for 根据描述获取 Symbol ###

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

*  使用Symbol.for会在系统中将Symbol登记
 *  使用Symbol则不会登记

let hd = Symbol.for("wgchen");
    let edu = Symbol.for("wgchen");
    
    console.log(hd == edu); //true

### Symbol.keyFor 根据使用Symbol.for登记的Symbol返回描述 ###

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

let hd = Symbol.for("wgchen");
    console.log(Symbol.keyFor(hd)); // wgchen
    
    let edu = Symbol("wgchen");
    console.log(Symbol.keyFor(edu)); //undefined

### 对象属性 ###

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

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

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

let symbol = Symbol("wgchen");
    
    let obj = {
        
      symbol: "blog"
    };
    
    console.log(obj); // {symbol: 'blog'}

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

let symbol = Symbol("wgchen");
    let obj = {
        
      [symbol]: "blog"
    };
    console.log(obj[symbol]); // blog

## 实例操作 ##

### 缓存操作 ###

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

class Cache {
        
      static data = {
        };
    
      static set(name, value) {
        
        this.data[name] = value;
      }
      static get(name) {
        
        return this.data[name];
      }
      
    }
    
    let user = {
        
      name: "wgchen",
      key: Symbol("缓存")
    };
    
    let cart = {
        
      name: "购物车",
      key: Symbol("购物车")
    };
    
    Cache.set(user.key, user);
    Cache.set(cart.key, cart);
    
    console.log(Cache.get(user.key)); // {name: 'wgchen', key: Symbol(缓存)}
    console.log(Cache.get(cart.key)); // {name: '购物车', key: Symbol(购物车)}

![在这里插入图片描述][79c6f5026a9b4e95ac60aa2cb051bd50.png]

### 遍历属性 ###

Symbol 不能使用 `for/in、for/of` 遍历操作

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

let symbol = Symbol("wgchen");
    let obj = {
        
      name: "willem",
      [symbol]: "blog"
    };
    
    for (const key of Object.getOwnPropertySymbols(obj)) {
        
      console.log(key); // Symbol(wgchen)
    }

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

let symbol = Symbol("wgchen");
    let obj = {
        
      name: "willem",
      [symbol]: "blog"
    };
    
    for (const key of Reflect.ownKeys(obj)) {
        
      console.log(key);
      /*
      name
      Symbol(wgchen)
      */
    }

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

[271ad63a86694fcea8fe68168388ad4d.png]: https://img-blog.csdnimg.cn/271ad63a86694fcea8fe68168388ad4d.png
[79c6f5026a9b4e95ac60aa2cb051bd50.png]: https://img-blog.csdnimg.cn/79c6f5026a9b4e95ac60aa2cb051bd50.png