文档章节

ES6新特征之Symbol

凌兮洛
 凌兮洛
发布于 08/19 13:46
字数 854
阅读 4
收藏 0

基本概念

Symbol:表示独一无二的值,属于类字符串数据类型,本质上可以当字符串来用。

基本用法

  • Symbol是JavaScript的第七种数据类型,前六种分别是undefined、null、Boolean、String、NUmber、Objects、Symbol。
        // 1
        let symbol = Symbol();
        typeof symbol
        // symbol 
    
        // 2 Symbol使用时不能使用new,它是一个函数,可以接收参数,仅作为描述 
        let symbol1 = Symbol('week');
        symbol1;
        // Symbol(week) 
    
        symbol1.toString();
        // "Symbol(week)"
    
        // 3
        let symbol1 = Symbol();
        let symbol2 = Symbol();
        symbol1 === symbol2;
        // false 
    
        let symbol1 = Symbol('object');
        let symbol2 = Symbol('object');
        symbol1 === symbol2;
        // false 
    
        // 4 隐式转换
        const obj = {
            toString() {
                return 'object';
            }
        };
        const symbol = Symbol(obj);
        symbol;
        // Symbol(object) 
    
        // 5 不能参与运算 
        let symbol = Symbol('symbol');
        "hello" + symbol;
        // TypeError: Cannot convert a Symbol value to a string 
    
        // 6 类型转换 
        String(symbol);
        symbol.toString();
        // Symbol(symbol) 
    
        let symbol = Symbol();
        Boolean(symbol);
        // true
    
        Number(symbol);
        // TypeError: Cannot convert a Symbol value to a number 
    
  • description ,Symbol的描述
        const symbol = Symbol('symbollobmys');
        symbol.description;
        // "symbol"
    
  • symbol应用场景,对象属性名
        let symbol = Symbol();
        let a = {};
        a[symbol] = 'Hello!';
    
        let a = {
            [symbol]: 'Hello!'
        };
    
        let a = {};
        Object.defineProperty(
            a,
            symbol,
            {
                value: 'Hello!'
            }
        );
    
  • 属性遍历 属性遍历中的for...in、for...of、Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()都不会返回Symbol,它们会把Symbol过滤掉。但是我们可以有两种方法得到Symbol,一种是Object.getOwnPropertySymbols,另一种是Reflect.ownKeys。
        const obj = {};
        let symbol1 = Symbol('symbol1');
        let symbol2 = Symbol('symbol2');
        obj[symbol1] = 'symbol1';
        obj[symbol2] = 'symbol1';
        Object.getOwnPropertySymbols(obj);
        // [Symbol(symbol1), Symbol(symbol2)] 
    
    
        Reflect.ownKeys(obj);
        // [Symbol(symbol1), Symbol(symbol2)] 
    
        // 可以作为非私有的内部方法 
    
  • Symbol.for(是唯一一个能让两个Symbol相等的),寻找全局的环境下某个描述下面的这个Symbol,如果找到某一个描述下的Symbol,那么就会返回这个Symbol,如果没有找到就会生成一个新的Symbol。简而言之就是,返回当前索引Symbol。
        let symbol1 = Symbol.for('week');
        let symbol2 = Symbol.for('week');
        symbol1 === symbol2;
        // true 
    
  • Symbol.keyFor,返回已登记的Symbol的key
        let symbol1 = Symbol.for("symbol1");
        Symbol.keyFor(symbol1);
        // symbol1 
    
        let symbol2 = Symbol("week");
        Symbol.keyFor(symbol2);
        // undefined 
    

内置的Symbol

  • Symbol.hasInstance,instanceof运算符调用
        class MyClass {
            [Symbol.hasInstance](obj) {
                return obj instanceof Array;
            }
        }
    
        [1, 2, 3] instanceof new MyClass();
        // true 
    
  • Symbol.isConcatSpreadable,控制数组concat是否展开
        let array1 = [1, 2];
        [3, 4].concat(array1, 5);
        // ['a', 'b', 'c', 'd', 'e'] 
        array1[Symbol.isConcatSpreadable];
        // undefined 
    
        let array2 = [1, 2];
        array2[Symbol.isConcatSpreadable] = false;
        [3, 4].concat(array2, 5);
        // [3, 4, [1, 2], 5] 
    
  • Symbol.species,为衍生类指定原型
        class MyArray extends Array {
        }
    
        const one = new MyArray(1, 2, 3);
        const two = a.map(x => x);
        const three = a.filter(x => x = 1);
    
        b instanceof MyArray;
        // true 
        c instanceof MyArray;
        // true 
    
        class MyArray extends Array {
            static get [Symbol.species]() { return Array; }
        }
    
        const one = new MyArray(1, 2, 3);
        const two = a.map(x => x);
        const three = a.filter(x => x = 1);
    
        b instanceof MyArray;
        // false 
        c instanceof Array;
        // true
    
  • Symbol.match ,str.match调用
        class Mather {
            [Symbol.match](string) {
                return 'hello world';
            }
        }
        'e'.match(new Mather());
        // 'hello world'
    
  • Symbol.replace,replace调用
        const demo = {};
        demo[Symbol.replace] = () => 'hello word';
        'Hello'.replace(demo, 'World');
        // hello word 
    
  • Symbol.search
  • Symbol.split
  • Symbol.iterator,默认遍历器
        const diyIterable = {};
        diyIterable[Symbol.iterator] = function* () {
            yield 'hello';
            yield 'word';
        };
        [...diyIterable];
        // ['hello', 'word'] 
    
  • Symbol.toPrimitive ,类型转换调用
        let object = {
            [Symbol.toPrimitive](hint) {
                switch (hint) {
                case 'number':
                    return 1;
                case 'string':
                    return 'hello';
                case 'default':
                    return 'word';
                default:
                    throw new Error('Cannot convert');
                }
            }
        };
    
        2 * object;
        // 2 
        3 + object;
        // '3word' 
        object == 'word';
        // true 
        String(object);
        // hello 
    
  • Symbol.toStringTag , 指定[object Object]或[object Array]中object后面字符串
        ({
            [Symbol.toStringTag]: 'Hello'
        }.toString())
        // "[object Hello]" 
    
  • Symbol.unscopables , 指定被with排除的属性,with是一个语句,它可以扩展一个作用域链
        // with语句 扩展一个语句的作用域链 
        var a, x, y;
        var r = 10;
        with (Math) {
            a = PI * r * r;
            x = r * cos(PI);
            y = r * sin(PI / 2);
        }
    
        class MyClass {
            week() {
                return 1;
            }
            get [Symbol.unscopables]() {
                return { week: true };
            }
        }
    
        var week = function () { return 2; };
        with (MyClass.prototype) {
            week();
            // 2 
        }
    

© 著作权归作者所有

上一篇: Set 和 Map
下一篇: 函数的扩展
凌兮洛
粉丝 2
博文 76
码字总数 78341
作品 0
长沙
私信 提问
ES6新特征总结与介绍——内置对象

一、新增 ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。 (一)Symbol 1. 作为属性名 由于每一个 Symbol 的值都是不相等的,所以 Sy...

前端咸蛋黄
06/05
0
0
【探秘ES6】系列专栏(八):JS的第七种基本类型Symbols

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该...

一配
2015/11/08
266
0
深入理解 ES6

本文篇幅较长,有兴趣的可以先收藏再看。本文将重要的 ES6 特性介绍了一遍,并且详细解释了一些重难点。 let && const 与 的声明用法相同,但是多了一个临时死区(Temporal Distonrtion Zone...

夕阳
2017/09/08
0
0
[译]ES6 中的元编程:第一部分 —— Symbol,了不起的 Symbol

原文地址:Metaprogramming in ES6: Symbols and why they're awesome 原文作者:Keith Cirkel 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:yoyoyohamapi 校对者:...

吴晓军
2017/11/17
0
0
TypeScript学习笔记之二基本数据类型

一、使用环境 Mac 电脑 WebStorm TypeScript3.x版本 二、需要了解的基本类型有哪些 数据类型有两种: A、原始数据类型 (Primitive data types) boolean 布尔值 number 数值 string 字符串 ...

摸着石头过河_崖边树
2018/12/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一套完整的软件开发流程是怎样的?

做什么事都需要一个流程,软件开发也不例外。 那么,一个软件从无到有到底是怎么开发的?一个软件产品的结果为什么是这样?为什么开发的速度不能再快一点。为什么程序员大多秃顶?他们有那么...

我想造火箭
15分钟前
3
0
漂亮思维导图怎样绘制?教你快速套用思维导图模板绘制d

用MindMaster软件绘制思维导图,会更加高效和美观!因为MindMaster是一款专业的思维导图软件,零基础经验的朋友花费5分钟时间就能掌握它的相关画法。以下是电脑软件思维导图画法的简单步骤。...

工具分享
18分钟前
3
0
linux 软链接与 硬链接的区别

软链接与硬链接的区别 1. 硬链接不会创建inode,即使用的inode都是一样的。软链接会创建新的inode。 2. 硬链接的访问属性和源文件一模一样,没有l的标识。软链接的访问属性写明了是l,且访问...

突突突酱
19分钟前
1
0
新特性解读 | MySQL 8.0.18 有权限控制的复制

原文:Replication with restricted privileges https://mysqlhighavailability.com/replication-with-restricted-privileges/ 作者:Pedro Figueiredo 翻译:管长龙 背景 MySQL 8.0.18 以前......

爱可生
28分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部