TypeScript Symbol
TypeScript Symbol
本节介绍 symbol 类型的语法、使用方法和应用场景,每个从 Symbol()
返回值的唯一性是使用 symbol 类型的最重要原因。
1. 慕课解释
symbol
是一种基本数据类型(primitive data type)。
Symbol()
函数会返回 symbol
类型的值。每个从 Symbol()
返回的 symbol
值都是唯一的。
2. 语法
Symbol([description])
参数 description:可选的,字符串类型。
3. 介绍
使用 Symbol() 创建新的 symbol 类型:
const sym1 = Symbol()
const sym2 = Symbol('foo')
const sym3 = Symbol('foo')
上面的代码创建了三个新的 symbol 类型,但要注意每个从 Symbol() 返回的值都是唯一的:
console.log(sym2 === sym3) // false
代码解释: 每个 Symbol()
方法返回的值都是唯一的,所以,sym2 和 sym3 不相等。
Symbol() 作为构造函数是不完整的:
const sym = new Symbol() // TypeError
这种语法会报错,是因为从 ECMAScript 6 开始围绕原始数据类型创建一个显式包装器对象已不再被支持,但因历史遗留原因, new Boolean()
、new String()
以及 new Number()
仍可被创建:
const symbol = new Symbol() // TypeError
const bigint = new BigInt() // TypeErrorconst number = new Number() // OK
const boolean = new Boolean() // OK
const string = new String() // OK
4. 使用场景
- 当一个对象有较多属性时(往往分布在不同文件中由模块组合而成),很容易将某个属性名覆盖掉,使用
Symbol
值可以避免这一现象,比如vue-router
中的name
属性。
// a.js 文件
export const aRouter = {path: '/index',name: Symbol('index'),component: Index
},// b.js 文件export const bRouter = {path: '/home',name: Symbol('index'), // 不重复component: Home
},// routes.js 文件
import { aRouter } from './a.js'
import { bRouter } from './b.js'const routes = [aRouter,bRouter
]
代码解释: 两个不同文件使用了同样的 Symbol('index')
作为属性 name 的值,因 symbol 类型的唯一性,就避免了重复定义。
- 模拟类的私有方法
const permission = Symbol('permission')class Auth {[permission]() {// do something}
}
这种情况通过类的实例是无法取到该方法,模拟类的私有方法。
但是,TypeScript 是可以使用 private
关键字的,所以这种方法可以在 JavaScript 中使用。
- 判断是否可以用
for...of
迭代
if (Symbol.iterator in iterable) {for(let n of iterable) {console.log(n)}
}
这个知识点后续会在 迭代器
那一节会着重介绍,这里可以先知晓:
for...of
循环内部调用的是数据结构的Symbol.iterator
方法。for...of
只能迭代可枚举属性。
- Symbol.prototype.description
Symbol([description])
中可选的字符串即为这个 Symbol 的描述,如果想要获取这个描述:
const sym = Symbol('imooc')console.log(sym); // Symbol(imooc)
console.log(sym.toString()); // Symbol(imooc)
console.log(sym.description); // imooc
TIPS: description 属性时
ES2019
的新标准,Node.js 最低支持版本11.0.0
。
5. 小结
本节介绍了 Symbol 一些常见的使用方法,虽然较少使用,但在特定场景非常有用。
TypeScript Symbol相关推荐
- MyEclipse CI 2018.8.0正式发布(附下载)
MyEclipse线上特惠,在线立享专属折扣!火热开启中>> MyEclipse 2018最终版日前正式发布,新版本通过构建Eclipse Photo.支持Java 10和Java EE ...
- Myeclipse学习总结(16)——MyEclipse CI 2018.8.0首次更新,全新来袭!(内附破解激活文件,亲测破解100%)
一.MyEclipse CI 2018.8.0简介 MyEclipse 2018首次更新,全新来袭!期待已久的2018版Myeclipse终于来了!总结了下MyEclipse CI 2018.8.0 ...
- typescript Type 'NodeListOfany' must have a '[Symbol.iterator]()' method that returns an iterato
Type 'NodeListOf<any>' must have a '[Symbol.iterator]()' method that returns an iterator. typs ...
- TypeScript 从听说到入门(上篇)
我为什么会这样念念又不忘 / 你用什么牌的箭刺穿我心脏 我也久经沙场 / 戎马生涯 / 依然 / 被一箭刺伤 --李荣浩<念念又不忘> 接下来我会分上.下两篇文章介绍 TypeScript ...
- typescript索引类型_TypeScript类型声明书写详解
本文总结一下TypeScript类型声明的书写,很多时候写TypeScript不是问题,写类型就特别纠结,我总结下,我在使用TypeScript中遇到的问题.如果你遇到类型声明不会写的时候,多看看lo ...
- JavaScript = TypeScript 类入门
尝试重写 在此之前,通过<JavaScript => TypeScript 入门>已经掌握了类型声明的写法.原以为凭着那一条无往不利的规则,就可以开开心心的重写 JS 项目了.当我跃 ...
- javascript实战pdf_《TypeScript开发实战》总结
<TypeScript开发实战>是极客时间上的课程,是由搜狗营销事业部高级架构师的梁宵老师出品,总共47章,涵盖了TypeScript所有用法,以及我们如何在实战中应用TS.本课程还覆盖了 ...
- vue component created没有触发_详解在Vue中使用TypeScript的一些思考(实践)
Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个&qu ...
- Typescript 基本类型
基础知识脑补下 在 JavaScript 的类型分为两种: 原始数据类型(Primitive data types) 对象类型(Object types) 其中,原始数据类型包括:布尔值.数字.字符串 ...
最新文章
- Linux中的Screen命令使用技巧详解
- 算法2:判断两个字符串内容是否相同
- C++模板:类模板和类模板的友元【C++模板】(57)
- Python 30年,你对它的核心特性了解多少?
- Burpsuite中宏的使用
- tomcat的根路径设置
- 用python做一个简单的投票程序_以一个投票程序的实例来讲解Python的Django框架使...
- vs矩形框边框线显示被选中的区域;_条形码区域解码:Web小工具
- 百练 03 复杂的整数划分问题
- linux git 发邮件,gitlab发邮件基于sendmail
- 镜像数据库上SQL Server复制
- Python数据分析处理库——Pandas
- Head First Design Patterns(深入浅出设计模式)-设计模式介绍
- apollo代码修改配置_灰度实战(四):Apollo配置中心(4)
- Mac使用手册:如何检查 Mac 或 iOS 设备仍在保修范围内
- 明白这30条人生道理,你就超过了80%的男人
- win7系统服务器停止,win7系统即将停止服务,你的电脑准备好换win10 了吗?
- dms档案资料管理系统(源码)
- C语言经典一百题(六)用*号输出字母C的图案。
- javaweb网上宠物商城管理系统分前后台(源码+数据库+开题报告+ppt+文档)