美文网首页
ES6——Symbol

ES6——Symbol

作者: benbensheng | 来源:发表于2019-04-23 09:50 被阅读0次

    1. 概述

    • ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
    • ES6 数据类型除了 Number 、 String 、 Boolean 、 Objec t、 null 和 undefined ,还新增了 Symbol 。
    • ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因
    • Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。

    1.1 基本用法

    let s =Symbol();
    console.log(typeof s);
    
    let s1 =Symbol();
    let s2 =Symbol();
    console.log(s1===s2); //false
    

    1.2 接受一个字符串作为参数

    表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分

    let s1=Symbol("s1");
    let s2=Symbol();
    let s3=Symbol();
    console.log(s1.toString()); //Symbol(s1)
    console.log(s2); //Symbol()
    console.log(s3); //Symbol()
    

    2. 使用场景

    2.1 作为属性名

    • 由于每一个 Symbol 的值都是不相等的,所以 Symbol 作为对象的属性名,可以保证属性不重名。
    • Symbol 作为对象属性名时不能用.运算符,要用方括号。因为.运算符后面是字符串,所以取到的是字符串 sy 属性,而不是 Symbol 值 sy 属性。
    //1
    let sy=Symbol("key1");
    let obj={
        [sy]:"kk"
    }
    console.log(obj[sy]); //kk
    console.log(obj);  //{ [Symbol(key1)]: 'kk' }
    //2
    let sy=Symbol("key1");
    let obj={};
    obj[sy]="kk";
    console.log(obj[sy]); //kk
    console.log(obj);  //{ [Symbol(key1)]: 'kk' }
    
    //不能使用.符号
    let sy=Symbol("key1");
    let obj={};
    obj[sy]="kk";
    console.log(obj.sy);  //undefined
    

    2.2 定义常量

    const COLOR_RED = Symbol();
    const COLOR_YELLOW = Symbol();
    const COLOR_BLUE = Symbol();
     
    function getConstantName(color) {
        switch (color) {
            case COLOR_RED :
                return "red";
            case COLOR_YELLOW :
                return "YELLOW ";
            case COLOR_BLUE:
                return "BLUE";
            default:
                throw new Exception("Can't find this color");
        }
    }
    console.log(getConstantName(COLOR_RED));
    

    2.3 消除魔术字符串

    魔术字符串指的是,在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码,应该尽量消除魔术字符串,改由含义清晰的变量代替。

    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 }); // 魔术字符串
    

    改进后

    const shapeType = {
    triangle: Symbol()
    };
    
    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 });
    

    相关文章

      网友评论

          本文标题:ES6——Symbol

          本文链接:https://www.haomeiwen.com/subject/nadmgqtx.html