ES6基础知识（Symbol） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Symbol</title>
</head>
<body>
    <script>
        /*Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。*/
        // let s = Symbol();
        // console.log(typeof s);//symbol

        /*Symbol函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。*/
        // let s1 = Symbol('foo');
        // let s2 = Symbol('bar');
        // console.log(s1.toString()) // "Symbol(foo)"
        // console.log(s2.toString()) // "Symbol(bar)"        

        /*普通Symbol方法*/
        // 没有参数的情况
        // let s1 = Symbol();
        // let s2 = Symbol();

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

        // 有参数的情况
        // let s1 = Symbol('foo');
        // let s2 = Symbol('foo');

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

        /*Symbol.for方法，调用Symbol.for("abc")30 次，每次都会返回同一个 Symbol 值，但是调用Symbol("abc")30 次，会返回 30 个不同的 Symbol 值*/
        // let s1 = Symbol.for('foo');
        // let s2 = Symbol.for('foo');

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

        /*Symbol.keyFor方法返回一个已登记的 Symbol 类型值的key，Symbol.for为 Symbol 值登记的名字，是全局环境的，可以在不同的 iframe 或 service worker 中取到同一个值*/
        // let s1 = Symbol.for("abc");
        // console.log(Symbol.keyFor(s1)) // "abc"

        // let s2 = Symbol("abc");
        // console.log(Symbol.keyFor(s2)) // undefined        

        /*Symbol 值可以作为标识符，用于对象的属性名，Symbol 值作为对象属性名时，不能用点运算符，Symbol 值必须放在方括号之中*/
        // let mySymbol = Symbol();

        // // 第一种写法
        // let a = {};
        // a[mySymbol] = 'Hello!';

        // // 第二种写法
        // let a = {
        //     [mySymbol]: 'Hello!'
        // };

        // // 第三种写法
        // let a = {};
        // Object.defineProperty(a, mySymbol, { value: 'Hello!' });

        // // 以上写法都得到同样结果
        // console.log(a[mySymbol]) // "Hello!"        

        /*消除魔术字符串*/
        // const obj = {
        //     str1: Symbol(),
        //     str2: Symbol()
        // };

        // function getNum(arg, options) {
        //     let num = 0;
        //     switch (arg) {
        //         case obj.str1:
        //         num = options.w + options.h;
        //         break;
        //         case obj.str2:
        //         num = options.w - options.h;
        //         break;                
        //     }
        //     return num;
        // }

        // console.log(getNum(obj.str1, { w: 200, h: 100 }));//300        
        // console.log(getNum(obj.str2, { w: 200, h: 100 }));//100        

        /*Object.getOwnPropertySymbols方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。*/
        // const obj = {};
        // let a = Symbol('a');
        // let b = Symbol('b');

        // obj[a] = 'Hello';
        // obj[b] = 'World';

        // const objectSymbols = Object.getOwnPropertySymbols(obj);

        // console.log(objectSymbols)// [Symbol(a), Symbol(b)]        

        /*Reflect.ownKeys方法可以返回所有类型的键名，包括常规键名和 Symbol 键名*/
        // let obj = {
        //     [Symbol('abc')]: 1,
        //     name: 2,
        //     age: 3
        // };

        // console.log(Reflect.ownKeys(obj))//(3) ["name", "age", Symbol(abc)]        

    </script>
</body>
</html>

 备注：文中多数内容摘自阮一峰老师文章，仅供自我学习查阅。

posted @ 2019-02-20 14:28  周大侠小课堂  阅读(215)  评论(0)  编辑  收藏  举报