ES6（4）：symbol

心已赠人 2022-12-24 05:50 4阅读 0赞

`ES6` 引入了一种新的原始数据类型`Symbol`，表示独一无二的值。它是 `JavaScript` 语言的第七种数据类型，前六种是：`undefined`、`null`、布尔值（`Boolean`）、字符串（`String`）、数值（`Number`）、对象（`Object`）

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

#### 一、创建 Symbol ####

1.  `Symbol`函数前不能使用`new`命令，否则会报错。这是因为生成的 `Symbol`是一个原始类型的值，不是对象。也就是说，由于 `Symbol`值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型。

let s = Symbol();
    console.log(s, typeof s);

![在这里插入图片描述][20201127145549599.png_pic_center]

1.  `Symbol`函数可以接受一个字符串作为参数，表示对 `Symbol`实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。注意：`Symbol`函数的参数只是表示对当前 `Symbol`值的描述，因此相同参数的`Symbol`函数的返回值是不相等的。

let s2 = Symbol('a');
    let s3 = Symbol('b');
    let s4 = Symbol('a');
    console.log(s2,s3);
    console.log(s2.toString());
    console.log(s3.toString());
    console.log(s2 === s4); // 相同参数 Symbol() 返回的值不相等

![在这里插入图片描述][20201127150243236.png_pic_center]

1.  有时，我们希望重新使用同一个 `Symbol`值，`Symbol.for()`方法可以做到这一点。它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 `Symbol`值。如果有，就返回这个 `Symbol`值，否则就新建一个以该字符串为名称的 `Symbol`值，并将其注册到全局。

//Symbol.for 创建
    let s4 = Symbol.for('尚硅谷');
    let s5 = Symbol.for('尚硅谷');
    console.log(s4, typeof s4);
    console.log(s4 === s5);

1.  `Symbol.for()`与`Symbol()`的区别：  
    两种写法都会生成新的 `Symbol`。它们的区别是，前者会被登记在全局环境中供搜索，后者不会。`Symbol.for()`不会每次调用就返回一个新的 Symbol\`\` 类型的值，而是会先检查给定的`key`是否已经存在，如果不存在才会新建一个值。比如，如果你调用`Symbol.for("cat")`30 次，每次都会返回同一个 `Symbol` 值，但是调用`Symbol("cat")`30 次，会返回 30 个不同的 `Symbol` 值。

#### 二、Symbol 不能与其他数据进行运算 ####

let result = s + 100;

let result = s > 100;

let result = s + s;

![在这里插入图片描述][20201127112956200.png_pic_center]  
都会报错。

#### 三、Symbol 创建对象属性 ####

由于每一个 `Symbol`值都是不相等的，这意味着 `Symbol`值可以作为标识符，用于对象的属性名，就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用，能防止某一个键被不小心改写或覆盖。

下面代码通过方括号结构和`Object.defineProperty`，将对象的属性名指定为一个 `Symbol` 值。注意：`Symbol` 值作为对象属性名时，不能用点运算符。

示例1：

//向对象中添加方法 up down
    let game = { 
        name:'俄罗斯方块',
        up: function(){ },
        down: function(){ }
    };
    
    //声明一个对象
    let methods = { 
        up: Symbol(),
        down: Symbol()
    };
    
    game[methods.up] = function(){ 
        console.log("我可以改变形状");
    }
    
    game[methods.down] = function(){ 
        console.log("我可以快速下降!!");
    }
    
    console.log(game);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]  
示例2：

let youxi = { 
        name:"狼人杀",
        [Symbol('say')]: function(){ 
            console.log("我可以发言")
        },
        [Symbol('zibao')]: function(){ 
            console.log('我可以自爆');
        }
    }
    
    console.log(youxi)

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

#### 四、Symbol内置属性 ####

除了定义自己使用的 `Symbol`值以外，`ES6` 还提供了 11 个内置的 `Symbol`值，指向语言内部使用的方法。 比如：

1.  `Symbol.hasInstance`

对象的`Symbol.hasInstance`属性，指向一个内部方法。当其他对象使用`instanceof`运算符，判断是否为该对象的实例时，会调用这个方法。比如，`foo instanceof Foo`在语言内部，实际调用的是`Foo[Symbol.hasInstance](foo)`。

class MyClass { 
        [Symbol.hasInstance](foo) { 
            return foo instanceof Array;
        }
    }
    
    console.log([1, 2, 3] instanceof new MyClass()); // true

![在这里插入图片描述][20201127153424529.png_pic_center]  
上面代码中，`MyClass`是一个类，`new MyClass()`会返回一个实例。该实例的`Symbol.hasInstance`方法，会在进行`Symbol.hasInstance`运算时自动调用，判断左侧的运算子是否为`Array`的实例。

1.  `Symbol.isConcatSpreadable`

对象的`Symbol.isConcatSpreadable`属性等于一个布尔值，表示该对象用于`Array.prototype.concat()`时，是否可以展开。

const arr = [1,2,3];
    const arr2 = [4,5,6];
    arr2[Symbol.isConcatSpreadable] = false;
    console.log(arr.concat(arr2));

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

[20201127145549599.png_pic_center]: /images/20221120/c29320a94371440b9839cf1a58a614ae.png
[20201127150243236.png_pic_center]: /images/20221120/30b5f14281ab4753abf7ec5050af05e6.png
[20201127112956200.png_pic_center]: /images/20221120/58f6455a064b47898c46ac899eed433c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/b08c3deb4e4d4b789b24a3386d19277b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2020112715195845.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70#pic_center
[20201127153424529.png_pic_center]: https://img-blog.csdnimg.cn/20201127153424529.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/2020112715363831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201128081608323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70