ES6 Symbol built-in values and usage scenarios

Basic use of Symbol

ES6 introduces a new primitive data type Symbol, representing a unique value. it is

The seventh data type of the JavaScript language is a string-like data type.

Symbol Features

1) The value of Symbol is unique and used to resolve naming conflicts

2) Symbol values cannot be operated with other data

3) Object properties defined by Symbol cannot be traversed by for...in loop, but can be used

Reflect.ownKeys to get all the key names of the object

Symbol usage scenarios

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>symbol</title>
</head>
<body>
    <script>
        //创建Symbol
        let s = Symbol();
        // console.log(s, typeof s);
        let s2 = Symbol('尚硅谷');
        let s3 = Symbol('尚硅谷');
        console.log(s2===s3);//结果：false
        //Symbol.for 创建  Symbol.for(key) 和Symbol(desc)类似，都是为了产生一个唯一标识，
        //不同的是：Symbol.for的key相同，就代表是同一个值;Symbol()的desc相同，
        let s4 = Symbol.for('尚硅谷');
        let s5 = Symbol.for('尚硅谷');
      console.log(s4===s5); //结果：true
        //不能与其他数据进行运算  下面写法都是错误不支持的
        //    let result = s + 100;
        //    let result = s > 100;
        //    let result = s + s;

        // USONB  you are so niubility 
        // u  undefined
        // s  string  symbol
        // o  object
        // n  null number
        // b  boolean

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

Symbol usage scenarios

(1) Add method

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Symbol 创建对象属性</title>
</head>
<body>
    <script>
        //向对象中添加方法 up down
        let game = {
            name:'俄罗斯方块',
            up: function(){},
            down: function(){}
        };
        
        // 可以通过这种方式实现：  声明一个对象  这样保证了up，down是唯一的，
        let methods = {
            up: Symbol(),
            down: Symbol()
        };

        game[methods.up] = function(){
            console.log("我可以改变形状");
        }

        game[methods.down] = function(){
            console.log("我可以快速下降!!");
        }

        console.log(game);

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

        console.log(youxi)

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

result:

Symbol built-in value

In addition to defining the Symbol values used by itself, ES6 also provides 11 built-in Symbol values, which point to the methods used internally by the language. These methods can be called magic methods, because they will be executed automatically in certain scenarios.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Symbol内置属性</title>
</head>
<body>
    <script>
        class Person{
            static [Symbol.hasInstance](param){
                console.log(param);
                console.log("我被用来检测类型了");
                return false;
            }
        }

        let o = {"ss":123};

        console.log(o instanceof Person);

        const arr = [1,2,3];
        const arr2 = [4,5,6];
        arr2[Symbol.isConcatSpreadable] = false;
        console.log(arr.concat(arr2));
    </script>
</body>
</html>

result:

Well, the above is all the content of this article, I hope it will be helpful to you, and I hope you will give a lot of support to Code Farmer's House . Your support is the driving force for my creation! I wish you all a happy life!

ES6 Symbol built-in values and usage scenarios

Guess you like