加载中...
  • Symbol 类型 介绍

    ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
    ES6 数据类型除了 Number 、 String 、 Boolean 、 Objec t、 null 和 undefined ,还新增了 Symbol 。

    Symbol 定义方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    let sy = Symbol("这是第一个symbol");
    let newsy = Symbol();
    console.log(typeof sy); // symbol

    console.log(sy.toString()); // Symbol(这是第一个symbol)

    // 提取symbol的描述信息
    console.log(sy.description); // 这是第一个symbol

    let hd = Symbol.for("Symbol for 的方式定义symbol");

    console.log(Symbol.keyFor(hd));

    Symbol 解决数据重复覆盖问题

    在对象中如果 key 名重复,后面的 key 会把前面的 key 覆盖掉,使用 symbol 类型定义唯一值,可以避免覆盖问题

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    let user1 = {
    name: "李四",
    key: Symbol(),
    };
    let user2 = {
    name: "李四",
    key: Symbol(),
    };
    let grade = {
    [user1.key]: { js: 99, css: 89 },
    [user2.key]: { js: 56, css: 100 },
    };
    console.log(grade[user2.key]); // { js: 56, css: 100 }

    Symbol 在缓存器中的使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    class Cache {
    static data = {};
    static set(name, value) {
    this.data[name] = value;
    }
    static get(name) {
    return this.data[name];
    }
    }

    let user = {
    name: "xiaomi",
    key: Symbol(),
    };
    let cart = {
    name: "xiaomi",
    key: Symbol(),
    };

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

    扩展特性与对象属性保护

    使用 symbol 定义 key 时不会被 for in 遍历到,通过 for of Reflect.ownKeys() 可以遍历到对象里面的 symbol 属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    let symbol = Symbol();
    let obj = {
    name: "李四",
    [symbol]: "张三",
    };
    // 普通遍历遍历不到 symbol 属性
    for (let key in obj) {
    console.log(key);
    }

    // 通过for of Reflect.ownKeys()可以遍历到对象里面的 symbol 属性
    for (let key of Reflect.ownKeys(obj)) {
    console.log(key);
    }

    let site = Symbol();
    class User {
    constructor(name) {
    this.name = name;
    this[site] = "songzheng";
    }
    getName() {
    return `${this.name} ${this[site]}`;
    }
    }

    let newuser = new User("6666");
    console.log(newuser.getName()); // 666 songzheng

    // 不能获取到symbol属性
    for (let key in newuser) {
    console.log(newuser[key]); // 666
    }

    上一篇:
    js 一些常用的好方法
    下一篇:
    js 模块化 导入导出
    本文目录
    本文目录