JavaScript的Symbol是什么？-JavaScript-编程之家

一、Symbol 是什么？

Symbol 是 ECMAScript 2015 中新添加的特性，生成一个唯一标识符，可用于属性名称、也可用于属性值。目的是消除属性名称冲突。

二、怎么用？

1、新建 symbol

用 Symbol() 函数来创建 symbol，可用字符串作为其参数，但只能用于调试。

// 1、创建新 symbol
let sym1 = Symbol()
let sym2 = Symbol('foo')

// 2、每次调用都创建新的 symbol
Symbol('foo') === Symbol('foo')  // false

// 3、不可以用 new 创建
let sym = new Symbol()  // TypeError

// 4、需调用 toString() 才能转为 字符串
let Sym = Symbol("Sym")
alert(Sym)  // TypeError: Cannot convert a Symbol value to a string
alert(Sym.toString())  // Symbol(Sym), now it works

2、用于属性名称

symbol 用于对象的属性名称，保证其属性名的唯一性。

<!DOCTYPE html>
<html lang='zh-CN'>

<head>
    <meta charset="utf-8">
    <title>Symbol</title>
    <script>
        const MY_KEY = Symbol();
        let obj = {};
        obj[MY_KEY] = 123;
        console.log(obj[MY_KEY]); // 123

        let obj2 = {
            [MY_KEY]: 123
        };
        console.log(obj2[MY_KEY]); // 123

        let obj3 = {
            [MY_KEY]() {
                return 'bar';
            }
        };
        console.log(obj3[MY_KEY]()); // bar

    </script>
</head>

<body>
    <h1>Symbol : 打开 Console 看结果！</h1>
</body>

</html>

3、用于定义常量

用 symbol 替换无意义的字符串。

<!DOCTYPE html>
<html lang='zh-CN'>

<head>
    <meta charset="utf-8">
    <title>Symbol</title>
    <script>
        // log.levels = {
        //     DEBUG: 'debug',
        //     INFO: 'info',
        //     WARN: 'warn',
        // };
        // 用下面代码替换上面。

        log.levels = {
            DEBUG: Symbol('debug'),
            INFO: Symbol('info'),
            WARN: Symbol('warn'),
        };

        function log(type, message) {
            switch (type) {
                case log.levels.DEBUG:
                    console.log(message);
                    break;
                case log.levels.INFO:
                    console.log(message);
                    break;
                case log.levels.WARN:
                    console.log(message);
                    break;
                default:
                    console.log("default");
                    break;
            }
        }

        log(log.levels.DEBUG, 'debug message');
        log(log.levels.INFO, 'info message');

    </script>
</head>

<body>
    <h1>Symbol : 打开 Console 看结果！</h1>
</body>

</html>

4、Symbol.iterator

ECMAScript 6 中用 Symbol.iterator 作为迭代功能的函数名。

<!DOCTYPE html>
<html lang='zh-CN'>

<head>
    <meta charset="utf-8">
    <title>Symbol</title>
    <script>
        let obj = {
            data: ['hello', 'world'],
            [Symbol.iterator]() {
                const self = this;
                let index = 0;
                return {
                    next() {
                        if (index < self.data.length) {
                            return {
                                value: self.data[index++]
                            };
                        } else {
                            return { done: true };
                        }
                    }
                };
            }
        };

        for (let x of obj) {
            console.log(x);
        }

    </script>
</head>

<body>
    <h1>Symbol : 打开 Console 看结果！</h1>
</body>

</html>

三、其他

1、获取属性名称

获取属性名称的方式，包括 symbol属性名称。

<!DOCTYPE html>
<html lang='zh-CN'>

<head>
    <meta charset="utf-8">
    <title>Symbol</title>
    <script>
        const MY_KEY = Symbol();
        let obj2 = {
            [MY_KEY]: 123,
            enum: 2,
            nonEnum: 3
        };

        // 获取属性名称的几种方法
        console.log(Object.getOwnPropertyNames(obj2)); // ['enum', 'nonEnum']
        console.log(Object.getOwnPropertySymbols(obj2)); // [Symbol()]
        console.log(Reflect.ownKeys(obj2)); // ['enum', 'nonEnum', Symbol()]

    </script>
</head>

<body>
    <h1>Symbol : 打开 Console 看结果！</h1>
</body>

</html>

四、参考文档

JavaScript的Symbol是什么？

原文地址：https://cloud.tencent.com/developer/article/1921831

JavaScript的Symbol是什么？