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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/260461.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

手把手教你如下在Linux下如何写一个C语言代码,编译并运行

文章目录手把手教你如下在Linux下如何写一个C语言代码,编译并运行打开Ubuntu终端创建 helloworld.c编译C文件手把手教你如下在Linux下如何写一个C语言代码,编译并运行 打开Ubuntu终端 我这里的终端是Windows下的WSL,如果有疑问,…

邮件群发工具的编写(二)数据的保存

数据的保存与读取 人类是在不断探索与改进中进步的 上一篇,邮件群发工具的编写(一)邮件地址提取,我们讲到了邮箱的提取。 那么这一篇,讲一下提取完的邮箱信息的保存和读取。 首先,我希望对上一篇邮箱提取类…

c++ lambda函数_C++11 之 lambda函数的详细使用

1. lambda 函数概述lambda 表达式是一种匿名函数,即没有函数名的函数;该匿名函数是由数学中的λ演算而来的。通常情况下,lambda函数的语法定义为:[capture] (parameters) mutable ->return-type {statement}其中:[c…

pytorch 正向与反向传播的过程 获取模型的梯度(gradient),并绘制梯度的直方图

记录一下怎样pytorch框架下怎样获得模型的梯度 文章目录引入所需要的库一个简单的函数模型梯度获取先定义一个model如下定义两个获取梯度的函数定义一些过程与调用上述函数的方法可视化一下梯度的histogram引入所需要的库 import os import torch import torch.nn as nn impor…

ubuntu升级python_Ubuntu 升级python3为更高版本【已实测】

2020-04-13 更新安装步骤: 1. 先update一下 sudo apt update 2. 安装依赖库 sudo apt-get install zlib1g-dev libbz2-dev libssl-dev libncurses5-dev libsqlite3-dev libreadline-dev tk-dev libgdbm-dev libdb-dev libpcap-dev xz-utils libexpat1-dev liblzma-d…

Framework打包

2019独角兽企业重金招聘Python工程师标准>>> iOS app需要在许多不同的CPU架构下运行: arm7: 在最老的支持iOS7的设备上使用 arm7s: 在iPhone5和5C上使用 arm64: 运行于iPhone5S的64位 ARM 处理器 上 i386: 32位模拟器上使用 x86_64: 64为模拟器上使用…

windows 10 下利用WSL的Linux环境实现vscode C/C++环境的配置

本文主要结合二个工具,介绍如何在windows搭建Linux开发环境: WSL(Windows Subsystem for Linux)VSCode(Visual Studio Code) 文章目录WSL安装VSCode安装配置Linux下的C/C环境1. 打开WSL的控制台2. 更新ubuntu软件3. 安装GCC和GDB4. 配置VSCode(1). 打开…

Windows 11下 WSL使用 jupyter notebook

这里写目录标题前言在WSL下的配置测试运行更优雅的启动方法配置jupyter生成默认配置文件生成秘钥修改配置文件nohup启动前言 一直都使用jupyter notebook,不管做数据分析,还是调试代码,还有写文章都是。但是好像在WSL下又不好使。看了网上有…

sql2000导出mysql_如何将sql2000的数据库导入到mysql中?

展开全部先用SQl2000导出e68a843231313335323631343130323136353331333262373366文本文件,把后缀名改为CSv,再从Mysql中一导入OK参考:第一种是安装mysql ODBC,利用sql server的导出功能,选择mysql数据源,进…

实现日、周、月排行统计 sql

在如今很多系统中,都需要进行日、周、月排行统计,但是在网上寻找 了一番,发现很多都是相对的周、月排行,即周排行则用当前时间减去7天。这样我个人认为并不恰当。如月排行中,假设今天是4月22日,则从3月22日至4月22日之…

产品运行所需的信息检索失败_为服务业注入新活力,华北工控推出服务机器人专用计算机产品方案...

近年来,随着人口老龄化趋势加快和信息科技革命的持续推进,服务机器人已经被当作社会劳动力的一部分在医疗、教育、餐饮等行业广泛应用,市场潜力巨大。01、需求带动消费,科技改变服务服务机器人是国内智能机器人产业发展最快的分支…

Windows更新没有更新提示:从windows 10升级到Windows 11,并WSL下配置cuda

文章目录从windows 10 升级到Windows 11安装WSL的安装配置cuda从windows 10 升级到Windows 11 升级的方法有很多种,各大网站都有。有更新提示的按更新提示操作即可。我的是一直都没有更新提示,也搜索过网上的一些方法,但都不行。还是没法更新…

js修改css样式属性_这个笔记《CSS样式的常见属性及值》,让菜鸟轻松学会包粽子...

常见样式属性及值字体:font-family-size-style: normal(正常)|italic(倾斜)|oblique-weight: normal|bold(粗体)如果组合起来编写: font: style weight size family字体大小的单位可以是 px, em, rem, pt, cm, mm, in, pc文本:colortext-align(水平对齐方式): left|center|righ…

在 VirtualBox 中 CentOS 网络设置

转自&#xff1a;本文发表于水景一页。永久链接&#xff1a;<http://cnzhx.net/blog/minimal-centos-in-virtualbox/>。转载请保留此信息及相应链接。 4. 设置 按照上面的方法安装之后&#xff0c;还需要一些简单的设置&#xff0c;比如网络访问。然后既然是做网页服务器…

vscode C++ 分文件、文件夹编译配置与错误解决

文章目录问题includesourceout配置过程遇到的问题与解决遇到的问题1解决步骤1. ctrl shift p2. 配置json文件修改task.json文件修改launch.json可能遇到的错误1. collect2: error: ld returned 1 exit status2. /mnt/d/tmp/c/source/add.cpp:3:10: fatal error: add.h: No su…

淘淘商城项目mysql服务器_SpringMVC+Spring+Mybatis+Mysql+Maven+Svn[ 淘淘商城项目环境搭建 ]...

背景&#xff1a;淘淘商城项目的环境搭建说明&#xff1a;采用SpringMVCSpringMybatisMysqlMavenSvn结构搭建&#xff0c;在开发之中可以参考其结构和搭建步骤去搭建实际的工程项目工程结构简图&#xff1a;项目结构&#xff1a;---------------------------------------------…

bean validation校验方法参数_项目启动时首先校验Spring Boot配置参数

1. 概述在项目实际开发过程中&#xff0c;为了更好的复用&#xff0c;我们参考Spring Boot Starters&#xff0c;封装了许多企业内部中间件的starter。这些中间件的接入都需要申请并在项目中配置一些特定的参数。我们通过ConfigurationProperties注解&#xff0c;增加了在配置过…

进一步理解:inline-block,vertical-align,line-height

看似三个最常见的概念背后却隐藏了很深的很深“水” 那有多深呢&#xff0c;先来看下面的代码 引出问题 <style>.inline-block {display: inline-block;}.border {border: 1px solid #000000;}.span {width: 100px;height: 100px;}.bak {background: #33CCFF;} .o-hidden…

刷系统——黑屏问题

引用&#xff1a;http://www.miui.com/thread-344361-1-1.html 此贴大部分内容源自魔趣论坛V大的帖子&#xff0c;本人经过整理后发出&#xff0c;特此声明原帖地址&#xff1a;http://bbs.mfunz.com/thread-172610-1-1.html——此贴献给小白们&#xff0c;老鸟一笑而过吧近期有…

java executor_Java并发编程(08):Executor线程池框架

一、Executor框架简介1、基础简介Executor系统中&#xff0c;将线程任务提交和任务执行进行了解耦的设计&#xff0c;Executor有各种功能强大的实现类&#xff0c;提供便捷方式来提交任务并且获取任务执行结果&#xff0c;封装了任务执行的过程&#xff0c;不再需要Thread().st…