• ES6 入门教程 13 Symbol 13.4 实例:消除魔术字符串 & 13.5 属性名的遍历


    ES6 入门教程

    ECMAScript 6 入门

    作者:阮一峰

    本文仅用于学习记录,不存在任何商业用途,如侵删

    13 Symbol

    13.4 实例:消除魔术字符串

    魔术字符串指的是,在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。

    风格良好的代码,应该尽量消除魔术字符串,改由含义清晰的变量代替。

    function getArea(shape, options) {
      let area = 0;
    
      switch (shape) {
        case 'Triangle': // 魔术字符串
          area = .5 * options.width * options.height;
          break;
        /* ... more code ... */
      }
    
      return area;
    }
    
    getArea('Triangle', { width: 100, height: 100 }); // 魔术字符串
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

    上面代码中,字符串Triangle就是一个魔术字符串。

    它多次出现,与代码形成“强耦合”,不利于将来的修改和维护。

    常用的消除魔术字符串的方法,就是把它写成一个变量。

    const shapeType = {
      triangle: 'Triangle'
    };
    
    function getArea(shape, options) {
      let area = 0;
      switch (shape) {
        case shapeType.triangle:
          area = .5 * options.width * options.height;
          break;
      }
      return area;
    }
    
    getArea(shapeType.triangle, { width: 100, height: 100 });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    上面代码中,我们把Triangle写成shapeType对象的triangle属性,这样就消除了强耦合。

    如果仔细分析,可以发现shapeType.triangle等于哪个值并不重要,只要确保不会跟其他shapeType属性的值冲突即可。

    因此,这里就很适合改用 Symbol 值。

    const shapeType = {
      triangle: Symbol()
    };
    
    • 1
    • 2
    • 3

    上面代码中,除了将shapeType.triangle的值设为一个 Symbol,其他地方都不用修改。

    13.5 属性名的遍历

    Symbol 值作为属性名,遍历对象的时候,该属性不会出现在for...infor...of循环中,也不会被Object.keys()Object.getOwnPropertyNames()JSON.stringify()返回。

    但是,它也不是私有属性,有一个Object.getOwnPropertySymbols()方法,可以获取指定对象的所有 Symbol 属性名。

    该方法返回一个数组,成员是当前对象的所有用作属性名的 Symbol 值。

    const obj = {};
    let a = Symbol('a');
    let b = Symbol('b');
    
    obj[a] = 'Hello';
    obj[b] = 'World';
    
    const objectSymbols = Object.getOwnPropertySymbols(obj);
    
    objectSymbols
    // [Symbol(a), Symbol(b)]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述

    上面代码是Object.getOwnPropertySymbols()方法的示例,可以获取所有 Symbol 属性名。

    下面是另一个例子,Object.getOwnPropertySymbols()方法与for...in循环、Object.getOwnPropertyNames方法进行对比的例子。

    const obj = {};
    const foo = Symbol('foo');
    
    obj[foo] = 'bar';
    
    for (let i in obj) {
      console.log(i); // 无输出
    }
    
    Object.getOwnPropertyNames(obj) // []
    Object.getOwnPropertySymbols(obj) // [Symbol(foo)]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述

    上面代码中,使用for...in循环和Object.getOwnPropertyNames()方法都得不到 Symbol 键名,需要使用Object.getOwnPropertySymbols()方法。

    另一个新的 API,Reflect.ownKeys()方法可以返回所有类型的键名,包括常规键名和 Symbol 键名。

    let obj = {
      [Symbol('my_key')]: 1,
      enum: 2,
      nonEnum: 3
    };
    
    Reflect.ownKeys(obj)
    //  ["enum", "nonEnum", Symbol(my_key)]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这里插入图片描述

    由于以 Symbol 值作为键名,不会被常规方法遍历得到。

    我们可以利用这个特性,为对象定义一些非私有的、但又希望只用于内部的方法。

    let size = Symbol('size');
    
    class Collection {
      constructor() {
        this[size] = 0;
      }
    
      add(item) {
        this[this[size]] = item;
        this[size]++;
      }
    
      static sizeOf(instance) {
        return instance[size];
      }
    }
    
    let x = new Collection();
    Collection.sizeOf(x) // 0
    
    x.add('foo');
    Collection.sizeOf(x) // 1
    
    Object.keys(x) // ['0']
    Object.getOwnPropertyNames(x) // ['0']
    Object.getOwnPropertySymbols(x) // [Symbol(size)]
    
    • 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

    在这里插入图片描述

    上面代码中,对象xsize属性是一个 Symbol 值,所以Object.keys(x)Object.getOwnPropertyNames(x)都无法获取它。这就造成了一种非私有的内部方法的效果。

  • 相关阅读:
    java基于ssm+vue的共享充电宝管理系统 elementui
    使用Python分析14亿条数据
    Mac上解决dose not contain the JNI_CreateJavaVM symbol
    次元裂缝已打开,AI绘画突飞猛进,其潜力究竟有多大
    JSP Taglib指令具有什么功能呢?
    地址前缀列表+改修属性
    分公司电脑访问总部服务器突然不通了走的是SSL隧道,如何排查处理?
    图——邻接表
    查找文件夹下不同的图片名字
    el-input 设置type为number时,隐藏后面上下箭头以及输入文字光标上移的情况
  • 原文地址:https://blog.csdn.net/weixin_44226181/article/details/127932253