JavaScript的Symbol是什么?

一、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>

四、参考文档

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)