ts中symbol的支持是按照es6的标准来的,只要我们学会es6中的symbol,就可以直接在ts中使用了

创建symbol

在example文件夹下新建symbol.ts

然后在根目录的index.ts内引入我们创建的symbol.ts

我们这里使用简写的形式:import './example/symbol' 后面的.ts是可以省略掉的,这里我们就省略了

symbol是是es6中新增的一个数据基本类型和 String、Number、Boolean是相同的。是一种基本的数据类型,用来表示一个第一无二的值、它和任何值都不同。

这里我们创建还一个Symbol报错。这是因为,使用es6的语法,需要引入项目的库

在lib这里引入

这里的es2015就是es6是一样的

这里我们使用简写es6

这里直接使用Symbol()作为函数来创建,而没有使用New来创建。这里是不需要使用New的

现在这个s上就是一个第一无二的Symbol的值

这里我用console.log输出这个s的,但是我们是用console就报错了。

这里给我们的提示,需要在lib的节点上配置上dom

加上dom的配置就可以了;

npm start:又提示我找不到sybol的的文件

没办法我又把.ts的后缀加上了。这样就可以正常的访问到了。

解决ts引用的问题:找到我们的配置文件 我发现我漏了.ts .tsx前面的点了。加上去在试试。这样就可以省略掉.ts的后缀了。import './example/symbol'

页面输出的结果

两个值的比较

输出另外定义的一个值,看似这两个值输出的console的结果都是一样的

既然两个值都是独一无二的 那么我们对两个symbol

这里直接就编译不通过了

因为这里永远返回的是false,直接就报错了

那么我们把这里注释掉。直接复制到浏览器的命令里面去执行看看结果

浏览器里面输出的结果就是false。这样就体现了symbol他是独一无二的

在使用Symbol方法创建值的时候,可以给他传递一个参数例如这里我们传一个字符串。这个字符串是给Symbol做标识用的

再定义一个symbol然后也传入了字符串wjw,把这段代码复制到浏览器的命令行内

然后shitf+enter,另起一行,输出这个两个值的对比。还是fasle,这是因为symbol的值就是第一无二的。

我们传入的字符串只是给它一个标识。只是为了后期打印出来能看到是哪个标识创建的值,但他们彼此之间是互不相等的

好比是两个人可以起同一个名字,但是他们是不同的两个人

例如我们这里传入一个数字123。它会在内部先调用toString然后再给他起123的字符串的这个名字

传入一个对象也是错的。在我们的代码里里面是不行的,

但是我们可以在浏览器里试一下

symbol不可以和其他类型的值做运算

但是symbol可以转换成字符串和布尔类型的

symbol自身带了toString的方法

symbol可以作为属性名

先讲一下es6中新的语法

es6中 把一个变量或者表达式作为属性名。输出的结果和上面一样

属性名还可以用一个拼接的字符串。es6的嵌套写法

symbol作为属性名。symbol作为属性名有一个好处,stmbol是独一无二的,就会保证这个属性名不会被别的变量或者属性名给覆盖。

只可以通过s5这个属性名去修改属性的值

不能通过这种形式去修改。symbol作为属性值 只能通过info2.[s5]这种形式

一般的使用 info.name或者是info['name']这两种方式

属性名的遍历

symbol作为属性名有几种方式是遍历不到属性名的

Object.keys()这个方法接收一个对象,返回这个对象所有属性名构成的数组

依然没有symbol的属性名

Object.getOwnPropertyNames 同样也不行

JSON.stringify()会把传入的对象转换成一个字符串

返回一个对象里面所有使用symbol的属性名

还有一种使用es6新提供的:Reflect.ownKeys方法

返回这个对象里面所有的属性值

symbol的静态方法

Symbol.for():在创建重复的传入的值的symbol时候,在全局范围(当前页面,包含的iframe页面和ServiceWorker)内搜索并判断是否创建过改名称的,如果创建过就返回原来的值

Symbol.keyFor()

返回Symbol的for方法注册的全局的值,创建的值的标识

如果我们打印用Symbol直接去创建的值的 是没有返回结果的

11个内置的symbol值

平时很少用,也可以了解一下

es6提供了内置的symbol值

第二个内置:可读写的布尔值,

如果我们把 Symbol.isConcatSpreadable 设置为fasle 就不会扁平化输出

arr1[Symbol.isConcatSpreadable]默认是undefined

修改之后的值是false

第三个内置:

复制到浏览器里面去去执行,因为我们的这个C这个类继承了Array,所以它的效果和Array构造函数是差不多的,支不过多了一各getName方法

a是通过c这个实例创建的。我们把a叫做c的衍生对象

它会认为a这个衍生对象,既是a的实例也是Array的实例

这个方法作用是创造衍生对象的构造函数

 static get [Symbol.species] () {
return Array
}

Symbol.match

可以利用这个特性在console那里做计算再返回值

和math方法相同的还有三个方法

//Symbol.replace
//Symbol.search
//Symbol.split

iterator:

指向改数组的默认遍历器方法,done表示是否便利完

可以还写,可以自定义这个遍历器方法

Symbol.toPrimitive

对象的这个值指向一个方法

我们在做自增运算的时候,需要把这个对象转换成数值类型,所以这里的的type是number类型

模板字符串,字符串的拼接

复制到conole中打印出来的是string类型。ts和js是写区别的

Symbol.toStringTag

这里我们用属性值的形式,它的值可以是一个字符串,也可以是一个函数(函数就是方法)

正常对象调用toString应该输出object,这里因为定义了Symbol.toStringTag方法 所以输出了后面的定义的字符串

这里我们作为一个方法,返回的也是同样的结果

Symbol.unscopables

with是废弃的方法,这里现在浏览器中测试,定义一个数组里面有a和b两个属性值,用with分别打印出这两个属性值

我们在with里面并不需要 obj6.a这种形式去打印,只需要把这个对象传入with就可以了,所有的属性都是可以这么去访问的

通过Symbol.unscopables输出的这些方法,例如这个findIndex是没有办法调用到的。

Symbol.unscopables输出的这个属性值在with里面被过滤掉了

filter是js自带的方法

ES6推荐看阮一峰的ES6入门指南

TypeScript完全解读(26课时)_3.TypeScript完全解读-Symbol的更多相关文章

  1. TypeScript完全解读(26课时)_12.TypeScript完全解读-高级类型(1)

    12.TypeScript完全解读-高级类型(1) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建新的测试文件 ind ...

  2. TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建

    1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...

  3. TypeScript完全解读(26课时)_2.TypeScript完全解读-基础类型

    2.TypeScript完全解读-基础类型 src下新建example文件夹并新建文件.basic-type.ts.截图中单词拼错了.后需注意一下是basic-type.ts 可以装tslint的插件 ...

  4. TypeScript完全解读(26课时)_4.TypeScript完全解读-接口

    4.TypeScript完全解读-接口 初始化tslint tslint --init:初始化完成后会生成tslint.json的文件 如果我们涉及到一些规则都会在这个rules里面进行配置 安装ts ...

  5. TypeScript完全解读(26课时)_5.TypeScript完全解读-函数

    5.TypeScript完全解读-函数 新建function.ts.然后在index.ts内引用 给函数定义参数类型:上面是es5的写法 下面是ts6的写法 一个完整的函数类型.括号 箭头 numbe ...

  6. TypeScript完全解读(26课时)_6.TypeScript完全解读-泛型

    6.TypeScript完全解读-泛型 创建实例ts文件generics.ts 在index.ts内引入 fill是填充数组,创建的数组的元素数是times,填充的值就是接收的value的值 这里传入 ...

  7. TypeScript完全解读(26课时)_9.TypeScript完全解读-TS中的类

    9.TypeScript完全解读-TS中的类 创建class.ts文件,并在index.ts内引用 创建一个类,这个类在创建好后有好几个地方都标红了 这是tslint的一些验证规则 一保存就会自动修复 ...

  8. TypeScript完全解读(26课时)_10.TypeScript完全解读-枚举

    10.TypeScript完全解读-枚举 新建enum.ts并在jindex.ts中引用 一个简单的数字枚举 可以通过两种方式获取枚举的值 获取到编码,第一个默认为0,后面的一次递增 第二种形式 可以 ...

  9. TypeScript完全解读(26课时)_11.TypeScript完全解读-类型推论和兼容性

    11.TypeScript完全解读-类型推论和兼容性 在一些时候省略指令,ts会帮我们推断出省略的类型的地方适合的类型,通过学习ts的类型推论了解ts的推论规则 类型兼容性就是为了适应js灵活的特点, ...

随机推荐

  1. PC常用电源IC、MOS、三极管、二极管厂家

    笔记本常用MOS.三极管.二极管厂家: 1.EMC 杰力电子(台湾)官方网站:http://www.excelliancemos.com/tw/solution.php 2.UBIQ(台湾电源厂家UP ...

  2. 图像处理算法2——Otsu最佳阈值分割法http://blog.csdn.net/xiaqunfeng123/article/details/17121195

    http://blog.csdn.net/xiaqunfeng123/article/details/17121195Otsu法是1979年由日本大津提出的.该方法在类间方差最大的情况下是最佳的,即统 ...

  3. POJ1830开关问题——gauss消元

    题目链接 分析: 第一个高斯消元题目,操作是异或.奇偶能够用0.1来表示,也就表示成bool类型的方程,操作是异或.和加法没有差别 题目中有两个未知量:每一个开关被按下的次数(0.1).每一个开关的转 ...

  4. redis缓冲与数据库

    redis是基于key-value结构存储的,且数据存放在内存中,相对数据库读写较快. 基于redis的优势,将redis中存放用户数据,用户第一次登录时,将用户数据从数据库存放redis中,也可以将 ...

  5. 集群服务器状态命令------rs.status()各个字段的含义

    可根据rs.status() 查询集群服务器状态.字段解释: self 这个信息出现在执行rs.status()函数的成员信息中 stateStr用户描述服务器状态的字符串.有SECONDARY,PR ...

  6. MFC学习之对话框---对话框之间的domodle 数据传递

    if(IDOK==data.DoModal()){tx->m_gao=data.m_he;tx->m_kuan=data.m_wi;tx->m_jiao=data.m_jiaoju; ...

  7. 同一世界服务器架构--Erlang游戏服务器

        Erlang最大的优点是方便,很多基础功能都已经集成到Erlang语言中.之前用C++写服务器的时候,管理TCP连接很繁琐,需要写一大堆代码来实现.底层的框架需要写很多代码实现,这样既浪费时间 ...

  8. EasyRTSPClient:基于live555封装的支持重连的RTSP客户端RTSPClient

    今天先简单介绍一下EasyRTSPClient,后面的文章我们再仔细介绍EasyRTSPClient内部的设计过程: EasyRTSPClient:https://github.com/EasyDar ...

  9. Hadoop实战-MapReduce之倒排索引(八)

    倒排索引 (就是key和Value对调的显示结果) 一.需求:下面是用户播放音乐记录,统计歌曲被哪些用户播放过 tom        LittleApple jack       YesterdayO ...

  10. 【R】R语言生成随机数

    1.概述 作为一种语言进行统计分析,R有一个随机数生成各种统计分布功能的综合性图书馆.R语言可以针对不同的分布,生成该分布下的随机数.其中,有许多常用的个分布可以直接调用.本文简单介绍生成常用分布随机 ...