TypeScript彻底解读(26课时)_3.TypeScript彻底解读-Symbol

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入门指南