前言

  ECMAScript 6 中新增了 Symbol 符号这一基本数据类型,那么Symbol 是用来干什么的,对开发又有什么帮助呢?本文来总结记录一下 Symbol 的相关知识点。

正文

  Symbol (符号)是 ECMAScript 6 新增的一种基本数据类型。符号是原始值,且符号实例是唯一、不可变的。符号的用途是确保对象属性使用唯一的标识符,不会发生属性冲突的危险,符号就是用来创建唯一记号,进而用作非字符串形式的对象属性。

  1、符号的创建

        var firstSymbol = Symbol()
console.log(firstSymbol); //Symbol()

  上面的代码直接调用Symbol()方法创建了一个符号类型的变量,也可以在Symbol方法中传入一个参数对符号变量进行描述,将来可以通过这个字符串来调试代码。但是,这个字符串参数与符号定义或标识完全无关。如下:

        var secondSymbol = Symbol("foo")
console.log(secondSymbol); //Symbol("foo")
var thirdSymbol = Symbol("foo")
console.log(secondSymbol == thirdSymbol); //false

  

  Symbol 符号类型不像其他数据类型一样可以通过 new 来创建原始值的包装对象。若强行使用 new 会报语法错误。如果你确实想使用符号包装对象,可以借用 Object() 函数。如下:

        var myStr = new String("name")
console.log(typeof myStr);//object
// var mySymbol = new Symbol()//Symbol is not a constructor at new Symbol (<anonymous>)
var mySym = Symbol()
var myWrapSym = Object(mySym)
console.log(typeof myWrapSym);//object

  2、从全局的 Symbol 注册表设置和取得 Symbol 

  如果运行时的不同部分需要共享和重用符号实例,那么可以用一个字符串作为键,在全局符号注册表中创建并重用符号。
  (1)Symbol.for()
  Symbol.for() 对每个字符串键都执行幂等操作。第一次使用某个字符串调用时,它会检查全局运行时注册表,发现不存在对应的符号,于是就会生成一个新符号实例并添加到注册表中。后续使用相同字符串的调用同样会检查注册表,发现存在与该字符串对应的符号,然后就会返回该符号实例。
        var fooGlobalSymbol = Symbol.for('foo'); // 创建新符号
var otherFooGlobalSymbol = Symbol.for('foo'); // 重用已有符号
console.log(fooGlobalSymbol === otherFooGlobalSymbol); // true
// 即使采用相同的符号描述,在全局注册表中定义的符号跟使用 Symbol() 定义的符号也并不等同:
var localSymbol = Symbol('foo');
var globalSymbol = Symbol.for('foo');
console.log(localSymbol === globalSymbol); // false
//此外,注册表中使用的键同时也会被用作符号描述。
console.log(localSymbol);//Symbol(foo)
var emptyGlobalSymbol = Symbol.for();
console.log(emptyGlobalSymbol); // Symbol(undefined)

  

  (2)Symbol.keyFor()

  Symbol.keyFor() 来查询全局注册表,这个方法接收符号,返回该全局符号对应的字符串键。如果查询的不是全局符号,则返回 undefined 。
        var s = Symbol.for('foo');
console.log(Symbol.keyFor(s)); // foo
// 创建普通符号
var ss = Symbol('bar');
console.log(Symbol.keyFor(ss)); // undefined
//如果传给 Symbol.keyFor() 的不是符号,则该方法抛出 TypeError :
// Symbol.keyFor(123); // TypeError: 123 is not a symbol

  3、使用符号作为属性

  凡是可以使用字符串或数值作为属性的地方,都可以使用符号。这就包括了对象字面量属性和Object.defineProperty() / Object.defineProperties() 定义的属性。对象字面量只能在计算属性语法中使用符号作为属性。后两者可以用于添加属性语法。
        var s1 = Symbol("s1");
var s2 = Symbol("s2");
var s3 = Symbol("s3");
var s4 = Symbol("s4");
var obj = { [s1]: "s1 val" }
console.log(obj);//{Symbol(s1): "s1 val"}
Object.defineProperty(obj, s2, { value: "s2 val" });
console.log(obj);//{Symbol(s1): 's1 val', Symbol(s2): 's2 val'}
Object.defineProperties(obj, { [s3]: { value: "s3 val" }, [s4]: { value: "s4 val" } })
console.log(obj);//{Symbol(s1): "s1 val",Symbol(s2): "s2 val",Symbol(s3): "s3 val",Symbol(s4):"s4 val"}
  
  类似于 Object.getOwnPropertyNames() 返回对象实例的常规属性数组, Object.getOwnProperty-Symbols() 返回对象实例的符号属性数组。这两个方法的返回值彼此互斥。 Object.getOwnProperty-Descriptors() 会返回同时包含常规和符号属性描述符的对象。
        var ss1 = Symbol('foo')
var info = { name: 123, age: 1232 }
console.log(Object.getOwnPropertyNames(info));//['name', 'age']
Object.defineProperty(info, ss1, { value: "ss1 val" })
console.log(Object.getOwnPropertySymbols(info));//[Symbol(foo)]
console.log(typeof Object.getOwnPropertySymbols(info)[0]);//'symbol'
console.log(Object.getOwnPropertyDescriptors(info));//{name: {…}, age: {…}, Symbol(foo): {…}}
console.log(Reflect.ownKeys(info));// ['name', 'age', Symbol(foo)]
console.log(info[ss1]);//'ss1 val'

  Symbol 作为属性名,该属性不会出现在 for...in、for...of 循环中,也不会被 Object.keys()、Object.getOwnPropertyNames()、JSON.stringify() 返回。

        var person = { name: "personName", age: 18 }
var sym = Symbol("sex")
Object.defineProperty(person, sym, { value: "sexValue" })
for (const key in person) {
console.log(key);
}// name age
console.log(Object.keys(person));//["name","age"]

写在最后

  以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。最后,祝各位coder,节日快乐。

js--Symbol 符号基本数据类型的更多相关文章

  1. 【面试题】JS第七种数据类型Symbol详解

    JS第七种数据类型Symbol详解 点击打开视频讲解更加详细 一.什么是Symbol? Symbol是ES6中引入的一种新的基本数据类型,用于表示一个独一无二的值.它是JavaScript中的第 七种 ...

  2. JS 01 变量_数据类型_分支循环_数组

    点击直通车↓↓↓ 数据类型及数据类型的手动转换 数组 一.概念 JavaScript(JS)是一种基于对象和事件驱动.且可以与HTML标记语言混合使用的脚本语言,其编写的程序可以直接在浏览器中解释执 ...

  3. js经典试题之数据类型

    js经典试题之数据类型 1:输出"B" + "a" + + "B" + "a"的值: 答案:BaNaNa. 分析:因为+ ...

  4. JS中的七大数据类型

    js中有7种数据类型,包括五种基本数据类型(Number,String,Boolean,Undefined,Null),和一种复杂数据类型(Object)以及es6语法新增的Symbol数据类型 es ...

  5. 符号化Symbol(符号)体系

    http://apps.hi.baidu.com/share/detail/23143648# 符号化Symbol(符号)体系 ArcGIS Engine9.3为开发人员提供了32种符号,主要分为三大 ...

  6. JS中都有哪些数据类型呢?

    js中有5种数据类型:Undefined.Null.Boolean.Number和String.还有一种复杂的数据类型Object,Object本质是一组无序的名值对组成的.

  7. JS分两种数据类型,你都知道吗?

    大牛请无视此篇! JS主要分基本数据类型和引用数据类型,这两者区别可大了,此篇看完必有长进,下面进入正题 首先我们看下什么是基本数据类型(概念我就不说了,直接上代码): var i = 10: var ...

  8. 安装与配置windbg的symbol(符号)

    http://msdn.microsoft.com/en-us/windows/hardware/gg463028.aspx  windows symbols下载地址 本篇是新手自己写的一点心得.建议 ...

  9. JS 引入方式 基本数据类型 运算符 控制语句 循环 异常

    一.JS引入方式 什么是JavaScript? JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览 ...

随机推荐

  1. 电子设备的使用方法-第5版(佳明智能腕表小米手机联想轻薄笔记本群晖存储)我的腾讯QQ电子邮箱地址是 595076941@qq.com - 2021年9月5日

      电子设备的使用方法-第5版   (佳明智能腕表小米手机联想轻薄笔记本群晖存储) 2021年9月5日 我的腾讯QQ电子邮箱地址是  595076941@qq.com 前言 大家好,我叫徐晓亮,今天我 ...

  2. 将数据保存到excel文件(纯前端实现)

    // 导出excel文件 /** * 依赖: import XLSX from 'xlsx' */ let obj = { '学生信息表': [ ['姓名', '性别', '年龄', '分数'], [ ...

  3. Abp Vnext3 vue-admin-template(一用户登录)

    Git地址https://github.com/PanJiaChen/vue-admin-template/blob/master/README-zh.md 官方文档https://panjiache ...

  4. css对角渐变

    html: <div class="hh"> </div> css: .hh{ width: 500px; height: 500px; backgroun ...

  5. weblogic漏洞分析之CVE-2016-0638

    weblogic漏洞分析之CVE-2016-0638 一.环境搭建: 这里使用前一篇文章的环境,然后打上补丁 上一篇文章:https://www.cnblogs.com/yyhuni/p/151370 ...

  6. openFeign夺命连环9问,这谁受得了?

    1.前言 前面介绍了Spring Cloud 中的灵魂摆渡者Nacos,和它的前辈们相比不仅仅功能强大,而且部署非常简单. 今天介绍一款服务调用的组件:OpenFeign,同样是一款超越先辈(Ribb ...

  7. Docker系列(16)- 容器数据卷

    什么是容器数据卷 docker的理念回顾 将应用和环境打包成一个镜像 数据?如果数据都在容器中,那么我们容器删除,数据就会丢失!新增一个需求:数据可以持久化 MySQL,容器删了等于删库跑路!新增一个 ...

  8. LeetCode2-链表两数和

    目录 LeetCode2-链表两数和 题目描述 示例提示 经验教训 参考正解 题目描述 示例提示 经验教训 链表题的判空条件不是万能的,有时候示例会极其复杂,根本难以通过判空来区分不同情况. /** ...

  9. windows安装python2.7、python3.7和pycharm

    下载安装包 下载可执行文件 安装 安装2.7 安装pycharm

  10. MySQL 服务无法启动。 服务没有报告任何错误。 请键入 NET HELPMSG 3534 以获得更多的帮助。

    第一步 有一部分人成功了在安装根目录创建data文件夹 第二步 有一部分人成功了D:\Program Files\mysql\bin>mysqld initialize 第三步 这步之后我安装成 ...