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. 使用场景

  1. 当一个对象有较多属性时(往往分布在不同文件中由模块组合而成),很容易将某个属性名覆盖掉,使用 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 类型的唯一性,就避免了重复定义。

  1. 模拟类的私有方法
const permission = Symbol('permission')class Auth {[permission]() {// do something}
}

这种情况通过类的实例是无法取到该方法,模拟类的私有方法。

但是,TypeScript 是可以使用 private 关键字的,所以这种方法可以在 JavaScript 中使用。

  1. 判断是否可以用 for...of 迭代
if (Symbol.iterator in iterable) {for(let n of iterable) {console.log(n)}
}

这个知识点后续会在 迭代器 那一节会着重介绍,这里可以先知晓:

  • for...of 循环内部调用的是数据结构的 Symbol.iterator 方法。
  • for...of 只能迭代可枚举属性。
  1. 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相关推荐

  1. MyEclipse CI 2018.8.0正式发布(附下载)

    MyEclipse线上特惠,在线立享专属折扣!火热开启中>> MyEclipse 2018最终版日前正式发布,新版本通过构建Eclipse Photo.支持Java 10和Java EE ...

  2. Myeclipse学习总结(16)——MyEclipse CI 2018.8.0首次更新,全新来袭!(内附破解激活文件,亲测破解100%)

    一.MyEclipse CI 2018.8.0简介 MyEclipse 2018首次更新,全新来袭!期待已久的2018版Myeclipse终于来了!总结了下MyEclipse CI 2018.8.0 ...

  3. 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 ...

  4. TypeScript 从听说到入门(上篇)

    我为什么会这样念念又不忘 / 你用什么牌的箭刺穿我心脏 我也久经沙场 / 戎马生涯 / 依然 / 被一箭刺伤 --李荣浩<念念又不忘> 接下来我会分上.下两篇文章介绍 TypeScript ...

  5. typescript索引类型_TypeScript类型声明书写详解

    本文总结一下TypeScript类型声明的书写,很多时候写TypeScript不是问题,写类型就特别纠结,我总结下,我在使用TypeScript中遇到的问题.如果你遇到类型声明不会写的时候,多看看lo ...

  6. JavaScript = TypeScript 类入门

    尝试重写 在此之前,通过<JavaScript => TypeScript 入门>已经掌握了类型声明的写法.原以为凭着那一条无往不利的规则,就可以开开心心的重写 JS 项目了.当我跃 ...

  7. javascript实战pdf_《TypeScript开发实战》总结

    <TypeScript开发实战>是极客时间上的课程,是由搜狗营销事业部高级架构师的梁宵老师出品,总共47章,涵盖了TypeScript所有用法,以及我们如何在实战中应用TS.本课程还覆盖了 ...

  8. vue component created没有触发_详解在Vue中使用TypeScript的一些思考(实践)

    Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个&qu ...

  9. Typescript 基本类型

    基础知识脑补下 在 JavaScript 的类型分为两种: 原始数据类型(Primitive data types) 对象类型(Object types) 其中,原始数据类型包括:布尔值.数字.字符串 ...

最新文章

  1. Linux中的Screen命令使用技巧详解
  2. 算法2:判断两个字符串内容是否相同
  3. C++模板:类模板和类模板的友元【C++模板】(57)
  4. Python 30年,你对它的核心特性了解多少?
  5. Burpsuite中宏的使用
  6. tomcat的根路径设置
  7. 用python做一个简单的投票程序_以一个投票程序的实例来讲解Python的Django框架使...
  8. vs矩形框边框线显示被选中的区域;_条形码区域解码:Web小工具
  9. 百练 03 复杂的整数划分问题
  10. linux git 发邮件,gitlab发邮件基于sendmail
  11. 镜像数据库上SQL Server复制
  12. Python数据分析处理库——Pandas
  13. Head First Design Patterns(深入浅出设计模式)-设计模式介绍
  14. apollo代码修改配置_灰度实战(四):Apollo配置中心(4)
  15. Mac使用手册:如何检查 Mac 或 iOS 设备仍在保修范围内
  16. 明白这30条人生道理,你就超过了80%的男人
  17. win7系统服务器停止,win7系统即将停止服务,你的电脑准备好换win10 了吗?
  18. dms档案资料管理系统(源码)
  19. C语言经典一百题(六)用*号输出字母C的图案。
  20. javaweb网上宠物商城管理系统分前后台(源码+数据库+开题报告+ppt+文档)

热门文章

  1. 寻找Linux单机负载瓶颈
  2. 怎样修改WIN7下的host文件
  3. CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?...
  4. KODExplorer 简介
  5. Php 比较字符串相似度
  6. go标准库:time
  7. Python——为什么要在意:模块重载
  8. 【AI视野·今日CV 计算机视觉论文速览 第205期】
  9. 图形化界面工具 SQLyog
  10. 字符流的抽象类 java