zaishiyu

前言

  ECMAScript 6 中新增了 Symbol 符号这一基本数据类型,那么Symbol 是用来干什么的,对开发又有什么帮助呢?本文来总结记录一下 Symbol 的相关知识点。

正文

  Symbol (符号)是 ECMAScript 6 新增的一种基本数据类型。符号是原始值,且符号实例是唯一、不可变的。符号的用途是确保对象属性使用唯一的标识符,不会发生属性冲突的危险,符号就是用来创建唯一记号,进而用作非字符串形式的对象属性。

  1、符号的创建

        var firstSymbol = Symbol()
        console.log(firstSymbol); //Symbol()

 

  上面的代码直接调用Symbol()方法创建了一个符号类型的变量,也可以在Symbol方法中传入一个参数对符号变量进行描述将来可以通过这个字符串来调试代码。但是,这个字符串参数与符号定义或标识完全无关。如下:

        var secondSymbol = Symbol("foo")
        console.log(secondSymbol); //Symbol("foo")
        var thirdSymbol = Symbol("foo")
        console.log(secondSymbol == thirdSymbol); //false

  

  Symbol 符号类型不像其他数据类型一样可以通过 new 来创建原始值的包装对象。若强行使用 new 会报语法错误。如果你确实想使用符号包装对象,可以借用 Object() 函数。如下:

        var myStr = new String("name")
        console.log(typeof myStr);//object
        // var mySymbol =  new Symbol()//Symbol is not a constructor at new Symbol (<anonymous>)
        var mySym = Symbol()
        var myWrapSym = Object(mySym)
        console.log(typeof myWrapSym);//object

 

  2、从全局的 Symbol 注册表设置和取得 Symbol 

  如果运行时的不同部分需要共享和重用符号实例,那么可以用一个字符串作为键,在全局符号注册表中创建并重用符号。
  (1)Symbol.for()
  Symbol.for() 对每个字符串键都执行幂等操作。第一次使用某个字符串调用时,它会检查全局运行时注册表,发现不存在对应的符号,于是就会生成一个新符号实例并添加到注册表中。后续使用相同字符串的调用同样会检查注册表,发现存在与该字符串对应的符号,然后就会返回该符号实例。
        var fooGlobalSymbol = Symbol.for('foo'); // 创建新符号
        var otherFooGlobalSymbol = Symbol.for('foo'); // 重用已有符号
        console.log(fooGlobalSymbol === otherFooGlobalSymbol); // true
        // 即使采用相同的符号描述,在全局注册表中定义的符号跟使用 Symbol() 定义的符号也并不等同:
        var localSymbol = Symbol('foo');
        var globalSymbol = Symbol.for('foo');
        console.log(localSymbol === globalSymbol); // false
        //此外,注册表中使用的键同时也会被用作符号描述。
        console.log(localSymbol);//Symbol(foo)
        var emptyGlobalSymbol = Symbol.for();
        console.log(emptyGlobalSymbol); // Symbol(undefined)

  

  (2)Symbol.keyFor()

  Symbol.keyFor() 来查询全局注册表,这个方法接收符号,返回该全局符号对应的字符串键。如果查询的不是全局符号,则返回 undefined 。
        var s = Symbol.for('foo');
        console.log(Symbol.keyFor(s)); // foo
        // 创建普通符号
        var ss = Symbol('bar');
        console.log(Symbol.keyFor(ss)); // undefined
        //如果传给 Symbol.keyFor() 的不是符号,则该方法抛出 TypeError :
        // Symbol.keyFor(123); // TypeError: 123 is not a symbol

 

  3、使用符号作为属性

  凡是可以使用字符串或数值作为属性的地方,都可以使用符号。这就包括了对象字面量属性和Object.defineProperty() / Object.defineProperties() 定义的属性。对象字面量只能在计算属性语法中使用符号作为属性。后两者可以用于添加属性语法。
        var s1 = Symbol("s1");
        var s2 = Symbol("s2");
        var s3 = Symbol("s3");
        var s4 = Symbol("s4");
        var obj = { [s1]: "s1 val" }
        console.log(obj);//{Symbol(s1): "s1 val"}
        Object.defineProperty(obj, s2, { value: "s2 val" });
        console.log(obj);//{Symbol(s1): 's1 val', Symbol(s2): 's2 val'}
        Object.defineProperties(obj, { [s3]: { value: "s3 val" }, [s4]: { value: "s4 val" } })
        console.log(obj);//{Symbol(s1): "s1 val",Symbol(s2): "s2 val",Symbol(s3): "s3 val",Symbol(s4):"s4 val"}
  
  类似于 Object.getOwnPropertyNames() 返回对象实例的常规属性数组, Object.getOwnProperty-Symbols() 返回对象实例的符号属性数组。这两个方法的返回值彼此互斥。 Object.getOwnProperty-Descriptors() 会返回同时包含常规和符号属性描述符的对象。
        var ss1 = Symbol('foo')
        var info = { name: 123, age: 1232 }
        console.log(Object.getOwnPropertyNames(info));//['name', 'age']
        Object.defineProperty(info, ss1, { value: "ss1 val" })
        console.log(Object.getOwnPropertySymbols(info));//[Symbol(foo)]
        console.log(typeof Object.getOwnPropertySymbols(info)[0]);//'symbol'
        console.log(Object.getOwnPropertyDescriptors(info));//{name: {…}, age: {…}, Symbol(foo): {…}}
        console.log(Reflect.ownKeys(info));// ['name', 'age', Symbol(foo)]
        console.log(info[ss1]);//'ss1 val'

 

  Symbol 作为属性名,该属性不会出现在 for...in、for...of 循环中,也不会被 Object.keys()、Object.getOwnPropertyNames()、JSON.stringify() 返回。

        var person = { name: "personName", age: 18 }
        var sym = Symbol("sex")
        Object.defineProperty(person, sym, { value: "sexValue" })
        for (const key in person) {
            console.log(key);
        }// name age
        console.log(Object.keys(person));//["name","age"]

 

写在最后

  以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。最后,祝各位coder,节日快乐。

 

 

相关文章:

猜你喜欢