ES6笔记(4)-- Symbol类型
系列文章 -- ES6笔记系列
Symbol是什么?中文意思是标志、记号,顾名思义,它可以用了做记号。
是的,它是一种标记的方法,被ES6引入作为一种新的数据类型,表示独一无二的值。
由此,JS的数据类型多了一位成员:
Number、String、Boolean、undefined、Object、Symbol
一、简单使用
1. 声明
类似字符串String的声明方式 var str = 'str'; Symbol的声明方式类似,它调用构造函数Symbol()
var s = Symbol(); typeof s // symbol
2. 使用
Symbol声明了是为了使用
var s = Symbol(); var s1 = Symbol();console.log(s, s1);console.log(s == s1); // false
Chrome的输出中自动对Symbol类型的数据做了标识处理,由输出知道,虽然通过Symbol生成的两个标志不相同,但两个变量混淆了分不清。
实际上,为了区别出不同的symbol,我们可以在参数中指定
var s = Symbol('s'); var s1 = Symbol('s1');console.log(s, s1);
symbol除了简单的在控制台输出之外,还可以参与到其他代码逻辑运算中去,最常见的是在对象属性名称中(为确保属性名惟一而存在)
var s = Symbol(); var s1 = Symbol('s1');var obj = {[s]: function() {console.log(1);},[Symbol()]: () => {console.log(2);},[s1]: 3 };obj[s]() // 1 obj[s1] // 3
注意到symbol要使用[]中括号包裹起来,调用的时候也一样(不能使用obj.s的方式,这样会被识别成字符串)
3. 属性的遍历
如上代码,如果我们想遍历对象的属性值,也许会这样操作
for (var item in obj) {if (typeof obj[item] === 'function') {obj[item]();} else {console.log(obj[item]);} }Object.keys(obj).forEach(function(item) {if (typeof obj[item] === 'function') {obj[item]();} else {console.log(obj[item]);} });
却发现什么也没输出
因为要获取到Symbol这个属性名,ES6引入了新的方法,旧的for...in Object.keys()、Object.getOwnPropertyNames()等不支持访问
使用新的getOwnPropertySymbols方法
var s = Symbol(); var s1 = Symbol('s1');var obj = {[s]: function() {console.log(1);},[Symbol()]: () => {console.log(2);},[s1]: 3,a: 4 };Object.getOwnPropertySymbols(obj).forEach(function(item) {if (typeof obj[item] === 'function') {obj[item]();} else {console.log(obj[item]);} });// 输出 1 2 3
虽然识别了symbol类属性,但常规属性却被忽略了,所以ES6还引入了一个新的内置类Reflect,它的ownKeys方法可以识别出所有属性名
var s = Symbol(); var s1 = Symbol('s1');var obj = {[s]: function() {console.log(1);},[Symbol()]: () => {console.log(2);},[s1]: 3,a: 4 };Reflect.ownKeys(obj).forEach(function(item) {if (typeof obj[item] === 'function') {obj[item]();} else {console.log(obj[item]);} });// 输出 4 1 2 3
4. 类型转换
数字转换成字符串我们可以简单的使用 + '' 实现,symbol呢
var s = Symbol(); var s1 = Symbol('s1');s + '' // Uncaught TypeError: Cannot convert a Symbol value to a string
出错了,提示不能转换。
实际上,我们只是不能直接转换值,还是可以用toString或String方法转换这个标志的
var s = Symbol(); var s1 = Symbol('s1');s.toString() // Symbol() String(s1) // Symbol(s1)
类似的,也可以转换为bool值
var s = Symbol(); var s1 = Symbol('s1');!!s // true !s // false Boolean(s1) // true
不过,symbol是不能转换成数值Number类型的
5. Symbol.for()相同值的使用
有时候我们需要使用同一个symbol值,而调用Symbol()的时候会自动创建不同的值
var temp = [];var scores = [{name: 'jack',score: 10 }, {name: 'pick',score: 20 }, {name: 'pick',score: 30 }];scores.forEach(function(item) {temp.push({name: Symbol(item.name),score: item.score}); });temp[1].name == temp[2].name // false
以上代码主要为了登记不同用户的分数,并确保唯一性使用了symbol,但最终用户名都为pick的项不想等,可能会导致后续的计算出错
把Symbol换成Symbol.for,输出才为true
两者类似,都可以生成一个Symbol类型的值,但后者是先判断全局中是否有该symbol值,有就返回该值,没有才创建,并将该值登记在全局中
var s = Symbol.for('s'); var s1 = Symbol.for('s');s == s1 // true s === s1 // truevar s = Symbol('s'); var s1 = Symbol('s');s == s1 // false s === s1 // false
此外,我们可以用Symbol.keyFor()访问全局中的symbol相关项,没有则返回undefined
var s = Symbol.for('s'); var s1 = Symbol.for('s');Symbol.keyFor(s) // s Symbol.keyFor(s1) // s Symbol.keyFor(s2) // Uncaught ReferenceError: s2 is not definedvar s3 = Symbol('s3'); Symbol.keyFor(s3) // undefined
6. Symbol的更多使用
Symbol的更多使用方法,可参考 MDN - Symbol
转载于:https://www.cnblogs.com/imwtr/p/5912318.html
ES6笔记(4)-- Symbol类型相关推荐
- ES6新特性_ES6对象添加Symbol类型属性---JavaScript_ECMAScript_ES6-ES11新特性工作笔记016
然后我们再来看,给对象添加symbol类型的属性, 这个这样做的目的就是: 保证我们添加的方法或属性是唯一的,因为我们知道 我们的symbol这个属性是有唯一性的. 首先我们有个 let game = ...
- android log 如何获取double类型后小数点的值_【ES6基础】Symbol介绍:独一无二的值...
开篇 ES6之前我们都清楚JS有六种数据类型:Undefined.Null.布尔值(Boolean).字符串(String).数值(Number).对象(Object),今天笔者讲的Symbol类型是 ...
- ES6 Symbol类型的应用、symbol属性名的遍历、Symbol.for()Symbol.keyFor()
目录 Symbol类型 介绍 Symbol.prototype.description Symbol的应用 1 给对象内追加属性 2 消除魔术字符串 symbol属性名的遍历 Symbol.for() ...
- 如何修改Series和DataFrame类型中的元素值_「ES6基础」Symbol介绍:独一无二的值
ES6之前我们都清楚JS有六种数据类型:Undefined.Null.布尔值(Boolean).字符串(String).数值(Number).对象(Object),今天笔者讲的Symbol类型是ES6 ...
- ES6笔记大全(一篇学完ES6)
一.Let和Const let声明变量,可变 const定义常量(实际指的是变量和的内存地址),不可变 只能在其声明或定义的代码块内有效 注:若区块中存在let或者const命令,则这个区块对这些变量 ...
- JavaScript 为什么要有 Symbol 类型?
摘要: 为什么比怎么用更有意义. 原文:JavaScript 为什么要有 Symbol 类型 作者:前端小智 Symbols 是 ES6 引入了一个新的数据类型 ,它为 JS 带来了一些好处,尤其是对 ...
- es6 新增数据类型Symbol
es6在string number boolean null undefined object之外又新增了一种Symbol类型. Symbol意思是符号,有一个特性-每次创建一个Symbol值都是不一 ...
- 【ES6(2015)】Symbol
文章目录 1. 声明方式 2. Symbol.for() 3. Symbol.keyFor() 4. 作为属性名 5. 属性遍历 6. 消除魔术字符串 ES6 引入了一种新的原始数据类型 Symbol ...
- Symbol()类型的定义及特点
前文我们提到了JavaScript中的两种数据类型的存储方式,在说到数据类型的时候,提到了ES6新增的一种数据类型:Symbol类型,这个类型的功能类似于一种标识唯一性的ID.Symbol类型属于Ja ...
最新文章
- linux启动服务器ftp监听,Linux redhat6.5开启ftp服务
- u2net encode
- 高通平台耳机插拔检测
- python人脸识别从入门到工程pdf_Python人脸识别:从入门到工程实践
- 前端学习 -- Css -- 内联元素的盒模型
- 你跟大神程序员的差距,就在这8本内功心法
- matlab 显示歌词,【Matlab编程】生日快乐歌(显示歌词)—matlab版
- JSON.parse()函数处理json格式字符串方法
- Somer’s D(Somers’ Delta)-顺序变量相关性分析方法
- 黑群晖linux删除文件夹命令,不拆机直接修改黑群晖的SN和MAC
- 笔记本相机测试软件,联想笔记本人脸识别软件(Lenovo VeriFace)
- QQ登录界面实现代码
- python批量发送邮件_python批量发邮件
- 百度地图 baidu-map 地图根据范围画圈
- 计算机拓扑结构网状图,网络拓扑结构大全和图片(星型、总线型、环型、树型、分布式、网状拓扑结构)...
- 【正点原子Linux连载】第二十章 V4L2摄像头应用编程-摘自【正点原子】I.MX6U嵌入式Linux C应用编程指南V1.1
- bertram_Bertram是什么意思
- win10系统无法连接xp工作组计算机,win10系统看不到windows xp系统主机上工作组的具体教程...
- 工业机器人 郝卫东_川崎焊接机器人控制系统设计开发
- SSD硬盘在检测中出现数据损坏的处理
热门文章
- 原理解释|直觉与实现:Batch Normalization
- Python五种常见的算法,你都了解么
- 【CNN】一文读懂卷积神经网络CNN
- 如何“快”、“准”、“狠”成为优秀算法工程师
- 《数学之美》第13章 Google AK-47的设计者—阿米特.辛格博士
- Centos7:update-initramfs -u:command not found
- Facebook更名“元宇宙”遭质疑,外媒提出三大现实问题
- 城市“脑梗” 当前城市大脑面临的困境
- 美国发布《量子网络战略愿景》
- 人机融合智能与深度态势感知