ES5:对象的属性名只能是字符串,当给对象添加新属性时,很容易造成属性名冲突,从而覆盖了原有的属性。

ES6:所以ES6中引入了symbol数据类型,他表示独一无二的值,避免了属性名的冲突,此时对象的属性名可由字符串类型或者symbol类型来定义。

symbol是一种基本数据类型,通过Symbol()函数来返回symbol类型的值,具有唯一性。

语法:Symbol([description])

参数:description可选,字符串类型,表示对symbol的描述,调试时更容易区分。

一、作为普通变量使用

var symbol1 = Symbol();
var symbol2 = Symbol("2");
var symbol2c = Symbol("2"); console.log(typeof symbol1); // symbol
console.log(symbol2 === symbol2c); // false

注意:

1. 不可使用new Symbol()来创建实例,否则会报TypeError,围绕原始数据类型创建一个显式包装器对象从 ECMAScript 6 开始不再被支持。 然而,现有的原始包装器对象,如 new Booleannew String以及new Number,因为遗留原因仍可被创建。

2. Symbol函数的参数只是表示对当前 Symbol 值的描述,因此相同参数的Symbol函数的返回值是不相等的。

3. Symbol值不能与其他类型的值进行运算,除非将symbol值转换为字符串,如String(symbol2)或者symbol2.toString()。

4. Symbol值可转换为布尔值,例如Boolean(symbol2)为true,!symbol2为false,Symbol值只能转换为字符串值或者布尔值。

二、作为对象属性名使用

var sName = Symbol("name");
var obj = {
[sName]: "lily",
sAge: 18
}
// 另外也可这样赋值
// obj[sName] = "lily";
// Object.defineProperty(a, mySymbol, { value: 'Hello!' }); console.log(obj); // {sAge: 18, Symbol(name): "lily"}
console.log(obj[sName]); // lily

注意:

1. Symbol作为对象属性名时,不能使用点运算符,使用点运算符后,这个属性名就是一个普通字符串了,而不是Symbol类型。

2. Symbol属性名具有隐藏性,是不可枚举属性,所以这个属性不能使用for...in、for...of、Object.keys()Object.getOwnPropertyNames()JSON.stringify()等方法访问到,

可以通过创建时的原始 symbol 值访问到,或者通过遍历 “Object.getOwnPropertySymbols()” 返回的数组中得到。

var sName = Symbol("name");
var obj = {
[sName]: "lily",
sAge: 18
}
console.log(obj[sName]); // lily
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(name)]

另一个新的 API,Reflect.ownKeys()方法可以返回所有类型的键名,包括常规键名和 Symbol 键名。

var sName = Symbol("name");
var obj = {
[sName]: "lily",
sAge: 18
}
Reflect.ownKeys(obj); // ["sAge", Symbol(name)]

三、获取description的属性

es2019提供了获取Symbol描述的方法

var sName = Symbol("name");
console.log(sName.description); // name

四、Symbol.for(),Symbol.keyFor()

1. 有时,我们希望重新使用同一个 Symbol 值,Symbol.for()方法可以做到这一点。它接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值,否则就新建一个以该字符串为名称的 Symbol 值,并将其注册到全局。

let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo'); s1 === s2 // true

Symbol.for()Symbol()这两种写法,都会生成新的 Symbol。

它们的区别是,前者会被登记在全局环境中供搜索,后者不会。

Symbol.for()不会每次调用就返回一个新的 Symbol 类型的值,而是会先检查给定的key是否已经存在,如果不存在才会新建一个值。

比如,如果你调用Symbol.for("cat")30 次,每次都会返回同一个 Symbol 值,但是调用Symbol("cat")30 次,会返回 30 个不同的 Symbol 值。

2. Symbol.keyFor()方法返回一个已登记的 Symbol 类型值的key

let s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo" let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined

参考文献:

http://es6.ruanyifeng.com/#docs/symbol

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol

JavaScript数据类型 - Symbol的更多相关文章

  1. 面试官:JavaScript 原始数据类型 Symbol 有什么用?

    以前提到 JavaScript 原始数据类型时,我们知道有Number,String,Null,Boolean,Undefined这几种.ES6 引入了新的基本数据类型Symbol和BigInt.今天 ...

  2. JavaScript 数据类型

    JavaScript 数据类型 字符串.数字.布尔.数组.对象.Null.Undefined JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: 一,JavaScript 字符串 ...

  3. JavaScript数据类型之隐式类型转换

    JavaScript的数据类型分为七种,分别为null,undefined,boolean,string,number,object,symbol ( ECMAScript 2015新增).objec ...

  4. 基本数据类型 Symbol

    ES6 规范之前, JavaScript 一共有六种数据类型,分别是五种基本数据类型: string . number , boolean , null , undefined ,和一种引用数据类型: ...

  5. 每天五分钟-javascript数据类型

    javascript数据类型分为基本数据类型与复杂数据类型 基本数据类型包括:string,number,boolean,null,undefined,symbol(es6) 复杂数据类型包括:obj ...

  6. javascript 数据类型 -- 检测

    一.前言 在上一篇博文中 Javascript 数据类型 -- 分类 中,我们梳理了 javascript 的基本类型和引用类型,并提到了一些冷知识.大概的知识框架如下: 这篇博文就讲一下在写代码的过 ...

  7. 2019-9-24:渗透测试,JavaScript数据类型基础学习

    JavaScript 数据类型 值类型(基本类型):字符串(String).数字(Number).布尔(Boolean).对空(Null).未定义(Undefined).Symbol. 引用数据类型: ...

  8. JavaScript数据类型判断的四种方法

    码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14416375.html 本文分享了JavaScript类型判断的四种方法:typeo ...

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

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

随机推荐

  1. UIImageView xib里面拉伸图片技巧

    拉伸图片的时候代码里和xib里面的图片名字去掉@2x,但是原始图片文件得要xxx@2x.png The X and Y values seem to be the positions for the ...

  2. hdu 1434 幸福列车 (Leftist Tree)

    Problem - 1434 网上题解是普通的堆合并,都是用优先队列直接做的.可是正解的堆合并应该是用左偏堆或者斐波那契堆的吧,不然O(X * N ^ 2)的复杂度应该是过不了的.斐波那契堆的实现相对 ...

  3. GPU版TensorFlow怎么指定让CPU运行

    由于某些原因GPU版的TensorFlow运行起来会出现一些问题,比如内存溢出等情况.此时我们可以用CPU和系统内存来运行我们的程序. 代码如下: import osos.environ[" ...

  4. js用for循环模拟数组翻转

    文章地址 https://www.cnblogs.com/sandraryan/ js本身为数组提供了reverse()方法,可以翻转数组,返回一个新的数组,不影响原数组. 本例中用for循环简单模拟 ...

  5. python开启GPU加速

    看了好多教程都提到了使用 os.environ["CUDA_VISIBLE_DEVICES"] = "1" 或者export CUDA_VISIBLE_DEVI ...

  6. poj 2993

    跟poj 2996反过来了,这里比较麻烦的就是处理白棋和黑棋各棋子对应的位置 还有在最后打印棋盘式|,:,.的时候会有点繁琐(- - ACMer新手 ): 直接看代码吧: #include<cs ...

  7. 我来教你用AWS IoT.Part1--配置和接入

    AWS的IOT服务在中国区才开放.由于工作原因需要简单试用评估.写一下自己简单试用的流程,供其他人参考. 直接贴流程 1.先注册一个类型(这里“类型”相对于编程,可以理解为父类,里面可以添加一些可继承 ...

  8. Vue自定义指令配置修饰符和传参

    一和二,请参考https://www.cnblogs.com/zui-ai-java/p/11109213.html 三.index.html <!DOCTYPE html> <ht ...

  9. echarts实现多条可拖动节点的折现图

    这篇博文主要是利用echarts实现两条以及多条可拖动节点的曲线,demo脱胎于官方demo,在官方demo的基础上添加了另一条曲线.因为之前写过一篇在vue中使用echarts实现可拖动节点的折线图 ...

  10. asp dotnet core 图片在浏览器没访问可能原因

    我写了一个项目用来广告就用到广告的图片,但是广告的图片放在博客的链接无法访问,连我的方法都没有调用,而我尝试网页直接访问图片链接是可以访问的,最后找到原因是广告插件禁用了图片访问 我在一个方法创建了广 ...