• ES6入门之Symbol


     

     

    ES5对象属性名都是字符串容易造成属性名的冲突。

    eg:var a = { name: 'lucy'};
    
    a.name = 'lili';
    这样就会重写属性

    ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。

    重新复习下新知识:基本数据类型有6种:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

    这里新添加了一种:Symbol

    注意,Symbol函数前不能使用new命令,否则会报错。这是因为生成的Symbol是一个原始类型的值,不是对象

    Symbol函数可以接受一个字符串作为参数,表示对Symbol实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。

    复制代码
    // 没有参数的情况
    var s1 = Symbol();
    var s2 = Symbol();
    
    s1 === s2 // false
    
    // 有参数的情况
    var s1 = Symbol("foo");
    var s2 = Symbol("foo");
    
    s1 === s2 // false
    复制代码

    Symbol值不能与其他类型的值进行运算

    作为属性名的Symbol

    复制代码
    var mySymbol = Symbol();
    
    // 第一种写法
    var a = {};
    a[mySymbol] = 'Hello!';
    
    // 第二种写法
    var a = {
      [mySymbol]: 'Hello!'
    };
    
    // 第三种写法
    var a = {};
    Object.defineProperty(a, mySymbol, { value: 'Hello!' });
    
    // 以上写法都得到同样结果
    a[mySymbol] // "Hello!"
    复制代码

    注意,Symbol值作为对象属性名时,不能用点运算符。

    var a = {};
    var name = Symbol();
    a.name = 'lili';
    a[name] = 'lucy';
    console.log(a.name,a[name]);             //lili,lucy

    Symbol值作为属性名时,该属性还是公开属性,不是私有属性。

    这个有点类似于java中的protected属性(protected和private的区别:在类的外部都是不可以访问的,在类内的子类可以继承protected不可以继承private)

    但是这里的Symbol在类外部也是可以访问的,只是不会出现在for...infor...of循环中,也不会被Object.keys()Object.getOwnPropertyNames()返回。但有一个Object.getOwnPropertySymbols方法,可以获取指定对象的所有Symbol属性名

    Symbol.for(),Symbol.keyFor()

    Symbol.for机制有点类似于单例模式,首先在全局中搜索有没有以该参数作为名称的Symbol值,如果有,就返回这个Symbol值,否则就新建并返回一个以该字符串为名称的Symbol值。和直接的Symbol就点不同了。

    var s1 = Symbol.for('foo');
    var s2 = Symbol.for('foo');
    
    s1 === s2 // true

    Symbol.keyFor方法返回一个已登记的Symbol类型值的key。实质就是检测该Symbol是否已创建

    var s1 = Symbol.for("foo");
    Symbol.keyFor(s1) // "foo"
    
    var s2 = Symbol("foo");
    Symbol.keyFor(s2) // undefined

     

  • 相关阅读:
    ts中的 接口
    微信小程序点击事件传值
    css 闪烁白点
    vue组件传值之事件总线(EventBus)
    vue 3.0优雅地使用ref获取dom元素
    JS从数组中随机取出几个数组元素的方法
    海明码
    小程序动画
    微信小程序点击图片预览
    flex 布局 子元素会撑开父元素处理
  • 原文地址:https://www.cnblogs.com/ecmasea/p/8985806.html
Copyright © 2020-2023  润新知