ES6 Symbol

ES5的语法中,属性名都是以字符串的形式呈现的,对于简单的对象来说,少量的属性并不会造成属性名重复的现象,但是当你想引用别人的模块到自己的项目中并且想对模块中的对象添加新的属性或者方法时,字符串形式的属性名就很容易出现重名或者冲突,在修改起来会变得很麻烦。

ES6语法中引入了一种新的数据类型Symbol,它是一种原始数据类型,且定义的每一个Symbol数据都代表独一无二的值,也是Javascript的第七种数据类型,前六种为 undefined,null,String(字符串),Number(数值),Object(对象),Boolean(布尔值)。

创建一个基本的Symbol类型的值

 let sym = Symbol();
 typeof sym;
 //Symbol

创建Symbol值的时候不能使用new运算符,因为Symbol是原始数据类型而不是对象,所以不能给Symbol添加属性名。同样因为每一个Symbol都代表着独一无二的值且Symbol函数里面的参数仅表示对当前Symbol值的描述,所以当创建两个具有相同值参数的Symbol函数时,尽管参数一样,但是返回值不同

let first = Symbol("a");
let second = Symbol("a");
second === first;
//false;

Symbol值不能与其他的字符串进行运算,Symbol值可以转换为布尔值和字符串,但是不能转换为数值

  let  sym = Symbol();
  console.log("hello"+sym);
  //报错:TypeError: Cannot convert a Symbol value to a string

  Bollean(sym) //true
  !sym  //false

  Number(sym)  //报错: Cannot convert a Symbol value to a number
Symbol当做属性名使用

symbol值也可以当作对象的属性名来使用,因为每一个symbol值都是独一无二的,所以symbol值作为属性名也是独一无二的,避免的因为属性名冲突造成的修改问题

实例

   let sym =  Symbol();
   let a = {};

   a[sym] = "hello";
    //第一种

    a{
        [sym]:"hello"
     }    
     //第二种

    Object.defineProperty(a,sym,{value:"hello"})
    //第三种

     console.log(a[sym]);
      //hello

在用Symbol值作为属性名的时候,要用方括号括起来,否则就会当作普通的字符串处理,读取该属性名的值的时候,不能使用点运算符,因为点运算符后面跟的为字符串常量,必须要用方括号括起来才能读取到正确的值

Symbole还可以作为常量使用,最大的好处是其他任何的值都不会再有相同的值了,可以保证一些逻辑顺序按照正常执行而不用担心判断中的值出现冲突或者重名而导致错误

    const  RED = Symbol();
    const GREEN = Symbol();

    let sym = (color)=>{
        switch(color){
             case RED:
                console.log("red");
                break;
             case GREEN:
                console.log("green");
                break;
             default:
                console.log("NOT FOND");

        }
           

    }

    sym(RED);
    //red


   实例:利用Symbol消除魔术字符串

   function first(name){
        switch(name){
             case "小明":
                 console.log("first");   
             case "小红":
                 console.log("second");   
             case "小张":
                 console.log("third");   

       }

   }

  first("小明");
  //first

函数在定义和附加参数的时候,要定义两处变量的值,分别是函数的参数和case后面的判断值,在修改的时候如果参数相对多或者判断内容相对复杂,无疑增加了修改难度。

   let name_ = {
      xiaoming:Symbol(),
      xiaohong:Symbol(),
      xiaozhang:Symbol()
   }


   function first(name){
       switch(name){
           case name_.xiaoming:
               console.log("first");
           case name_.xiaohong:
               console.log("second");
           case name_.xiaozhang:
               console.log("third"); 
       }

    }

  first(name_.xiaoming);

利用Symbol值来优化之前函数中的一些代码耦合,同时Symbol值也可以确定为唯一的值,之后的定义就不用再担心与前面的值相冲突了。

Symbol.for()和Symbol.keyFor()

在使用Symbol的时候,因为Symbol类型的值是独一无二的,所以每次定义的Symbol值都是不同的,那么如果我们在有些操作中需要定义的值想要使用相同的Symbol值该怎么办呢?
Symbol.for()方法可以做到这一点

let  s1 = Symbol.for("foo");
let s2 = Symbol.for("foo");

console.log(s1 === s2)  //true

实例定义了s1,s2两个Symbol值,如果通过Symbol()函数定义的话,尽管参数相同,但是返回值并不相同,Symbol.for()方法可以解决这个问题,该方法首先会从全局中搜索受否存在带有参数的Symbol值,如果有,则不会创建新的Symbol值,如果没有,则会创建一个带有该参数的Symbol值。

Symbol.keyFor()方法可以返回一个登记过的Symbol类型值的key值

   let  s1 = Symbol.for("foo");
   let  s2 = Symbol("foo");

   Symbol.keyFor(s1);  //foo
   Symbol.keyFor(s2);  //undefined

因为Symbol()函数不存在登记机制,所以导致每次创建的Symbol值都是不同的,Symbol.for首先会登记在全局变量中进行搜索,同时通过Symbol.for()方法创建的Symbol值也可以在方法或者函数中使用,因为该Symbol()值是登记在全局范围内的。这就导致Symbol.keyFor(s1)返回的是s1的key值,而Symbol.keyFor(s2)返回的是undefined

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,928评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,192评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,468评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,186评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,295评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,374评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,403评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,186评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,610评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,906评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,075评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,755评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,393评论 3 320
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,079评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,313评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,934评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,963评论 2 351

推荐阅读更多精彩内容

  • 1.概述 ES5的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象...
    赵然228阅读 802评论 2 10
  • Symbol Symbol 是一个符号对象,是es6新添加的数据类型,通过Symbol()可以得到一个唯一的值,所...
    文仔CXKSNLXX阅读 508评论 0 0
  • title: es6-Symboldate: 2018-02-07 22:40:00tags: es6 前言 突然...
    aymfx阅读 400评论 0 0
  • 这个是自己的亲生经历,希望分享给曾经那些和我一样迷茫困惑的朋友们。 不知各位的大学生活是如何度过...
    泥步修行阅读 232评论 0 1
  • 两天把偷影子的人这本书看完了,是很好看的一本书。书中的小男孩没有名字,好像就寓意了这可能是我们每一个人。 男主小时...
    温暖的光y阅读 300评论 0 0