• 理解ES6的新数据类型:Symbol


    ES6之前的数组类型
    在ES6之前JS只有6种数据类型,分别是:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

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

    随着JS的版本更新,未来可能会出现其他新的数据类型。

    Symbol 是什么
    Symbol值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的Symbol类型。凡是属性名属于Symbol类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。所以,Symbol非常适合做标识符。

    Symbol有静态属性,原型上也有methods,但是缺少constructor,所以不能使用 new Symbol() , 会报错(见下图)。

    因为生成的Symbol是一个原始类型的值,不是对象,所以不能添加属性。

    由于每一个Symbol值都是不相等的,这意味着Symbol值可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖。Symbol值作为对象属性名时,不能用点运算符。在对象的内部,使用Symbol值定义属性时,Symbol值必须放在方括号之中。

    Symbol 的应用实例
    Symbol的值
    let s = Symbol();
    typeof s;
    // "symbol"
    Symbol是独一无二的
    let s1 = Symbol('abc')
    let s2 = Symbol('abc')
    s1 === s2
    // false
    Symbol的参数
    let s1 = Symbol('abc');
    let s2 = Symbol('efg');
    s1.toString();
    // "Symbol(abc)"
    s2.toString();
    // "Symbol(efg)";
    获取symbol类型值的三种方式
    通过Symbol对象,可以得到一个唯一的symbol值

    let s = Symbol();
    Symbol.for(string) 可以注册一个symbol,再次调用Symbol.for(string)会得到这个symbol值,区别于Symbol()是唯一的

    let sym = Symbol('abc');
    const sym1 = Symbol.for('abc');
    console.log(sym === sym1); //false
    console.log(sym1 === Symbol.for('abc')); //true
    Symbol.iterator

    用到对象中,被for...of遍历所用,用于每个object中,所以应该是固定的值。

    console.log(Symbol.iterator === Symbol.iterator);
    //true
    应用场景
    由于Symbol的值具有唯一的特性,可以解决变量名,属性名冲突的问题,并切Symbol提出了一些属性和方法,用于过渡以及实现一些特殊的用途,比如对象的迭代器,instanceof的拓展等等。

    Symbol 在Vue中的应用
    使用 vuex 时常常需要定义各种常量,以前是这样写:

    // types.js
    export const SHOW_CONTACT = 'SHOW_CONTACT'
    使用Symbol后,可以这样写

    // types.js
    export const SHOW_CONTACT = Symbol('show_contact')
    作为对象的key
    注意: symbol作为属性名不能通过 . 的形式添加。

    对象[]方括号的形式

    const obj = {}
    const sym = Symbol();
    obj[sym] = 'syj';
    对象内部定义

    const sym = Symbol();
    const obj = {
    [sym]: 'syj'
    }
    通过Object.defineProperty定义

    const sym = Symbol();
    const obj = Object.defineProperty({}, sym, {
    enumerable: true, //可枚举
    writable: true, //可赋值运算符改变
    configurable: true, //可改变,可删除
    value: 'syj'
    })
    symbol类型的key的遍历

    当我们用symbol设置了对象的key以后,他是不会被之前的for...in,Object.keys()遍历出来的,需要用Object.getOwnPropertySymbols()获取,得到一个所有这个对象中的symbol属性名的数组。

    const sym1 = Symbol('1');
    const sym2 = Symbol('2');
    const obj = {
    [sym1]: 'syj',
    [sym2]: 'fy'
    }
    const ary = Object.getOwnPropertySymbols(obj);
    console.log(ary); //[ Symbol(1), Symbol(2) ]

  • 相关阅读:
    hdu acm 2639背包问题,这题很经典啊~~~
    hdu acm 2191
    qt中实现区域反白效果
    解决pythonxml 模块 在ubuntu karmic中找不到的问题
    Python正则表达式操作指南
    webkit 资料
    标点符号的英语名称
    ubuntu设置分辨率
    如何绑定多个action到一个slot
    改注册表,实现像迅雷一样的自定义url
  • 原文地址:https://www.cnblogs.com/unclefang/p/11180372.html
Copyright © 2020-2023  润新知