JavaScript的Symbol是什么?

编程之家收集整理的这篇文章主要介绍了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>

四、参考文档

总结

以上是编程之家为你收集整理的JavaScript的Symbol是什么?全部内容。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给好友。

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

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

JavaScript相关文章

编写程序是为了让我们更高效的处理问题,但在生活中我们常常遇到一些重复性的动作,也就是当我们希望一遍又一遍的执行多次代码,但是每一次执行代码的值有不同的时候我们就可以使用循环语句来解决问题。
JavaScript1. Promise 的理解Promise 是一种为了避免回调地狱的异步解决方案 2. Promise 是一种状态机: pending(进行中)、fulfilled(已成功)和rejected(已失败) 只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。回调地狱回调函数中嵌套回调函数的情况就叫做回调地狱。回调地狱就是为是实现代码顺序执行而出现的一种操作,它会造成我们的代码可读性非常差,后期不好维护。一、Promise是什么?Promise是最早
在谈sort之前,我们先了解一下原地算法,什么事原地算法呢?所谓**原地算法**就是说基于原有的数据结构进行一定的操作修改,而不借助额外的空间。使用原地算法时,其内存干净,空间复杂度是O(1),可以减少没必要的内存,避免造成内存浪费和冗余。当然,减小内存损耗会带来算法复杂度和时间消耗的增加,所以是一个Tradeoff。**Tradeoff** 是一种针对目标选择有效的路径的思维方式,需要对做的事情权衡利弊,选择最佳方式处理问题。
牛客是可以伴随一生的编程软件(完全免费),从学校到社会工作,时时刻刻你都可以用到,
官网介绍说:Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。的方式是经过优化的,会加快修改速度,对程序的性能有很大的好处。虽然可以直接修改,但是出于代码结构来说, 全局的状态管理还是不要直接在各个组件处随意修改状态,应放于。方法的第二个参数:配置对象,放置state,getters,actions。属性: 修改state全局状态数据,可以是异步也可以是同步。方法的第一个参数:容器的名字,名字必须唯一,不能重复。属性: 用来监视或者说是计算状态的变化的,有缓存的功能。
通过useImperativeHandle的Hook,将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起;所以在父组件中,使用 inputRef.current时,实际上使用的是参数二返回的对象;但是,事实上在上面的案例中,我们只是希望父组件可以操作的focus,其他并不希望它随意操作。那么我们就可以在子组件的内部, 在重新定义一个ref对象, 再将想要暴露的操作暴露出去即可。子组件拿到父组件中创建的ref,绑定到自己的某一个元素中;等等, 我们希望可以限制它的操作;
JS逆向 Frida - 夜神模拟器安装配置 基本使用
Effect Hook 可以让你来完成一些类似于class中生命周期的功能;事实上,类似于网络请求、手动更新DOM、一些事件的监听,都是React更新DOM的一些副作用(Side Effects);所以对于完成这些功能的Hook被称之为 Effect Hook;