js--Symbol 符号基本数据类型

js--Symbol 符号基本数据类型

前言

  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,节日快乐。

js--Symbol 符号基本数据类型

 

 

上一篇:JS Symbol + Proxy 实现按照后端返回字段重组展示数据


下一篇:vue引用阿里彩色图标(symbol引用)