ES6学习笔记（5）——Symbol

灰太狼 2022-11-26 11:58 176阅读 0赞

# Symbol #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]

> 背景：ES5的对象属性名都是字符串，这容易造成属性名的冲突。ES6引入了一种新的原始数据类型Symbol，表示独一无二的值，它就是Symbol数据类型

## 特性 ##

1. Symbol值通过Symbol函数生成,它是一种类似于字符串的数据类型
    -----
    let s = Symbol();

2. Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述。即使参数相同，Symbol函数的返回值依旧是不相等的
    -----
    var s = Symbol('foo');
    s//Symbol(foo)
    
    var s1 = Symbol('foo');
    var s2 = Symbol('foo');
    s1 === s2 // false

3. Symbol值不能与其他类型的值进行运算
    -----
    var sym = Symbol('My symbol');
    "your symbol is " + sym	 //error
    `your symbol is ${ sym}`	 //error

4. Symbol值可以转为字符串、布尔值，但不能转为数值
    -----
    var s = Symbol();
    s.toString() // "Symbol()"
    Boolean(s) // true
    Number(s) // TypeError

## 如何作为属性名 ##

由于每一个Symbol值都是不相等的，这意味着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 mySymbol = Symbol();
        var a = { };
        a.mySymbol = 'Hello!';	//不可以这样写
    
        //解析：因为点运算符后面总是字符串，所以不会读取mySymbol作为标识名所指代的那个值，导致a的属性名实际上是一个字符串，而不是一个Symbol值。
        //结果：
        a[mySymbol] // undefined
        a['mySymbol'] // "Hello!"

## 属性名的遍历 ##

*  `Object.getOwnPropertySymbols()`：返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值
    
        var obj = { };			
        var a = Symbol('a');	//创建symbol
        var b = Symbol('b');	//创建symbol
        
        obj[a] = 'Hello';	//symbol作为属性名
        obj[b] = 'World';	//symbol作为属性名
        
        var objectSymbols = Object.getOwnPropertySymbols(obj);	//遍历属性名
        
        objectSymbols	// [Symbol(a), Symbol(b)]
 *  `Reflect.ownKeys()`：可以返回所有类型的键名，包括常规键名和 Symbol 键名
    
        let obj = { 
          [Symbol('my_key')]: 1,
          enum: 2,
          nonEnum: 3
        };
        
        Reflect.ownKeys(obj)
        // ["enum", "nonEnum", Symbol(my_key)]

## 一些方法 ##

*  `Symbol.for()`：接受一个字符串作为参数，搜索有没有以该参数作为名称的Symbol值。**如果有，就返回这个Symbol值**，否则就新建并返回一个以该字符串为名称的Symbol值
    
        var s1 = Symbol.for('foo');
        var s2 = Symbol.for('foo');
        s1 === s2 // true
 *  `Symbol.keyFor()`：返回一个用`Symbol.for`创建的 Symbol值的key
    
        var s1 = Symbol.for("foo");
        Symbol.keyFor(s1) // "foo"
        
        var s2 = Symbol("foo");
        Symbol.keyFor(s2) // undefined

## [内置的Symbol值][Symbol] ##

*  `Symbol.hasInstance`：当其他对象使用`instanceof`运算符，判断是否为该对象的实例时，会调用这个方法。比如，`foo instanceof Foo`在语言内部，实际调用的是`Foo[Symbol.hasInstance](foo)`
 *  `Symbol.hasInstance`：等于一个布尔值，表示该对象使用`Array.prototype.concat()`时，是否可以展开 。默认等于undefined，表示可以展开，true也表示可展开；当如果为false，表示需要手动展开
    
        let arr1 = ['c', 'd'];
        arr1[Symbol.isConcatSpreadable] // undefined //默认是undefined，可展开
        ['a', 'b'].concat(arr1, 'e') // ['a', 'b', 'c', 'd', 'e']
    
        let arr1 = ['c', 'd'];
        arr1[Symbol.isConcatSpreadable] = false;
        ['a', 'b'].concat(arr1, 'e') // ['a', 'b', ['c','d'], 'e']
 *  `Symbol.species`：指向当前对象的构造函数。创造实例时，默认会调用这个方法，即使用这个属性返回的函数当作构造函数，来创造新的实例对象
 *  `Symbol.match`：指向一个函数。当执行`str.match(myObject)`时，如果该属性存在，会调用它，返回该方法的返回值
 *  `Symbol.replace`：指向一个方法，当该对象被`String.prototype.replace`方法调用时，会返回该方法的返回值
 *  `Symbol.search`：指向一个方法，当该对象被`String.prototype.search`方法调用时，会返回该方法的返回值
 *  `Symbol.split`：指向一个方法，当该对象被`String.prototype.split`方法调用时，会返回该方法的返回值
 *  `Symbol.iterator`：指向该对象的默认遍历器方法
 *  `Symbol.toPrimitive`：指向一个方法。该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值
 *  `Symbol.toStringTag`：指向一个方法。在该对象上面调用Object.prototype.toString方法时，如果这个属性存在，它的返回值会出现在toString方法返回的字符串之中，表示对象的类型。也就是说，这个属性可以用来定制`[object Object]`或`[object Array]`中`object`后面的那个字符串
    
    > ES6新增内置对象的`Symbol.toStringTag`属性值如下：
    
     *  `JSON[Symbol.toStringTag]`：‘JSON’
     *  `Math[Symbol.toStringTag]`：‘Math’
     *  Module对象`M[Symbol.toStringTag]`：‘Module’
     *  `ArrayBuffer.prototype[Symbol.toStringTag]`：‘ArrayBuffer’
     *  `DataView.prototype[Symbol.toStringTag]`：‘DataView’
     *  `Map.prototype[Symbol.toStringTag]`：‘Map’
     *  `Promise.prototype[Symbol.toStringTag]`：‘Promise’
     *  `Set.prototype[Symbol.toStringTag]`：‘Set’
     *  `%TypedArray%.prototype[Symbol.toStringTag]`：'Uint8Array’等
     *  `WeakMap.prototype[Symbol.toStringTag]`：‘WeakMap’
     *  `WeakSet.prototype[Symbol.toStringTag]`：‘WeakSet’
     *  `%MapIteratorPrototype%[Symbol.toStringTag]`：‘Map Iterator’
     *  `%SetIteratorPrototype%[Symbol.toStringTag]`：‘Set Iterator’
     *  `%StringIteratorPrototype%[Symbol.toStringTag]`：‘String Iterator’
     *  `Symbol.prototype[Symbol.toStringTag]`：‘Symbol’
     *  `Generator.prototype[Symbol.toStringTag]`：‘Generator’
     *  `GeneratorFunction.prototype[Symbol.toStringTag]`：‘GeneratorFunction’
 *  `Symbol.unscopables`：指向一个对象。该对象指定了使用with关键字时，哪些属性会被with环境排除。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/5f3f72f9742f4a008cd8b5e39b58105e.png
[Symbol]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol