转行学前端的第 44 天 : 了解 ECMAScript 数据类型转换(二)

小又又
813 阅读11分钟

我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。

今日学习目标

昨天基于搜索基础学习了对象解构,然后今天就是准备学习一下之后在很多对象中提到的__proto__和prototype,所以今天实战学习js类型转换，又是适合学习的一天，加油，小又又！！！！

今天主要是实际学习String,Number,Boolean,Object,Date,Array类型的相互转化

强制转换结果

Object强制转换

  • 原始值
实例名 原始值 使用方法
ooo {} ooo.constructor
ooBool [Boolean: true] ooBool.constructor
ooNum [Number: 68] ooNum.constructor
ooString [String: 'hello world'] ooString.constructor
ooArray [ 'demo', 'little', 'you' ] ooArray.constructor
ooDate Tue May 20 2020 22:32:04 ooDate.constructor
  • constructor
实例名 构造体 使用方法
ooo [Function: Object] ooo.constructor
ooBool [Function: Boolean] ooBool.constructor
ooNum [Function: Number] ooNum.constructor
ooString [Function: String] ooString.constructor
ooArray [Function: Array] ooArray.constructor
ooDate [Function: Date] ooDate.constructor
  • __proto__
实例名 默认值 使用方法
ooo {} ooo.__proto__
ooBool [Boolean: false] ooBool.__proto__
ooNumber [Number: 0] ooNum.__proto__
ooString [String: ''] ooString.__proto__
ooArray [] ooArray.__proto__
ooDate Date {} ooDate.__proto__
  • 实例对象原型链中是否包含Object的原型链

通过varName instanceof Object,ooo,ooBool,ooNum,ooString,ooArray和oDate的构造体都是 true.

  • 实例对象原型链中是否包含String的原型链
实例名 属性值 使用方法
ooo false ooo instanceof String
ooBool false ooBool instanceof String
ooNumber false ooNum instanceof String
ooString true ooString instanceof String
ooArray false ooArray instanceof String
ooDate false ooDate instanceof String
  • 实例对象原型链中是否包含Boolean的原型链
实例名 属性值 使用方法
ooo false ooo instanceof Boolean
ooBool true ooBool instanceof Boolean
ooNumber false ooNum instanceof Boolean
ooString false ooString instanceof Boolean
ooArray false ooArray instanceof Boolean
ooDate false ooDate instanceof Boolean
  • 实例对象原型链中是否包含Number的原型链
实例名 属性值 使用方法
ooo false ooo instanceof Number
ooBool false ooBool instanceof Number
ooNumber true ooNum instanceof Number
ooString false ooString instanceof Number
ooArray false ooArray instanceof Number
ooDate false ooDate instanceof Number
  • 实例对象原型链中是否包含Array的原型链
实例名 属性值 使用方法
ooo false ooo instanceof Array
ooBool false ooBool instanceof Array
ooNumber false ooNum instanceof Array
ooString false ooString instanceof Array
ooArray true ooArray instanceof Array
ooDate false ooDate instanceof Array
  • 实例对象原型链中是否包含Date的原型链
实例名 属性值 使用方法
ooo false ooo instanceof Date
ooBool false ooBool instanceof Date
ooNumber false ooNum instanceof Date
ooString false ooString instanceof Date
ooArray false ooArray instanceof Date
ooDate true ooDate instanceof Date

String强制转换

  • 原始值
实例名 原始值 使用方法
soo [object Object] soo.constructor
soBool true soBool.constructor
soNum 68 soNum.constructor
soString hello world soString.constructor
soArray demo,little,you soArray.constructor
soDate Tue May 20 2020 22:32:04 soDate.constructor
  • constructor

通过varName.constructor,soo,soBool,soNum,soString,soArray和soDate的构造体都是 [Function: String].

  • __proto__

通过varName.__proto__,soo,soBool,soNum,soString,soArray和soDate的原型都是 [String: ''].

  • 实例对象原型链中是否包含Object的原型链

通过varName instanceof Object,soo,soBool,soNum,soString,soArray和soDate是否包含Object的原型链都是 false.

  • 实例对象原型链中是否包含String的原型链

通过varName instanceof String,soo,soBool,soNum,soString,soArray和soDate是否包含String的原型链都是 false.

  • 实例对象原型链中是否包含Boolean的原型链

通过varName instanceof Boolean,soo,soBool,soNum,soString,soArray和soDate是否包含Boolean的原型链都是 false.

  • 实例对象原型链中是否包含Number的原型链

通过varName instanceof Number,soo,soBool,soNum,soString,soArray和soDate是否包含Number的原型链都是 false.

  • 实例对象原型链中是否包含Array的原型链

通过varName instanceof Array,soo,soBool,soNum,soString,soArray和soDate是否包含Array的原型链都是 false.

  • 实例对象原型链中是否包含Date的原型链

通过varName instanceof Date,soo,soBool,soNum,soString,soArray和soDate是否包含Date的原型链都是 false.

Boolean强制转换

  • 原始值

通过varName,boo,boBool,boNum,boString,boArray和boDate的原始值都是 true.

  • constructor

通过varName.constructor,boo,boBool,boNum,boString,boArray和boDate的构造体都是 [Function: Boolean].

  • __proto__

通过varName.__proto__,boo,boBool,boNum,boString,boArray和boDate的原型都是 [Boolean: false].

  • 实例对象原型链中是否包含Object的原型链

通过varName instanceof Object,boo,boBool,boNum,boString,boArray和boDate是否包含Object的原型链都是 false.

  • 实例对象原型链中是否包含String的原型链

通过varName instanceof String,boo,boBool,boNum,boString,boArray和boDate是否包含String的原型链都是 false.

  • 实例对象原型链中是否包含Boolean的原型链

通过varName instanceof Boolean,boo,boBool,boNum,boString,boArray和boDate是否包含Boolean的原型链都是 false.

  • 实例对象原型链中是否包含Number的原型链

通过varName instanceof Number,boo,boBool,boNum,boString,boArray和boDate是否包含Number的原型链都是 false.

  • 实例对象原型链中是否包含Array的原型链

通过varName instanceof Array,boo,boBool,boNum,boString,boArray和boDate是否包含Array的原型链都是 false.

  • 实例对象原型链中是否包含Date的原型链

通过varName instanceof Date,boo,boBool,boNum,boString,boArray和boDate是否包含Date的原型链都是 false.

Number强制转换

  • 原始值
实例名 原始值 使用方法
noo NaN noo.constructor
noBool 1 noBool.constructor
noNum 68 noNum.constructor
noString NaN noString.constructor
noArray NaN noArray.constructor
noDate 1589898724740 noDate.constructor
  • constructor

通过varName.constructor,noo,noBool,noNum,noString,noArray和noDate的构造体都是 [Function: Number].

  • __proto__

通过varName.__proto__,noo,noBool,noNum,noString,noArray和noDate的原型都是 [Number: 0].

  • 实例对象原型链中是否包含Object的原型链

通过varName instanceof Object,noo,noBool,noNum,noString,noArray和noDate是否包含Object的原型链都是 false.

  • 实例对象原型链中是否包含String的原型链

通过varName instanceof String,noo,noBool,noNum,noString,noArray和noDate是否包含String的原型链都是 false.

  • 实例对象原型链中是否包含Boolean的原型链

通过varName instanceof Boolean,noo,noBool,noNum,noString,noArray和noDate是否包含Boolean的原型链都是 false.

  • 实例对象原型链中是否包含Number的原型链

通过varName instanceof Number,noo,noBool,noNum,noString,noArray和noDate是否包含Number的原型链都是 false.

这个有些奇怪~~~

  • 实例对象原型链中是否包含Array的原型链

通过varName instanceof Array,noo,noBool,noNum,noString,noArray和noDate是否包含Array的原型链都是 false.

  • 实例对象原型链中是否包含Date的原型链

通过varName instanceof Date,noo,noBool,noNum,noString,noArray和noDate是否包含Date的原型链都是 false.

Array强制转换

  • 原始值
实例名 原始值 使用方法
aoo [ {} ] aoo.constructor
aoBool [ [Boolean: true] ] aoBool.constructor
aoNum [ [Number: 68] ] aoNum.constructor
aoString [ [String: 'hello world'] ] aoString.constructor
aoArray [ [ 'demo', 'little', 'you' ] ] aoArray.constructor
aoDate [Tue May 20 2020 22:32:04 ] aoDate.constructor
  • constructor

通过varName.constructor,aoo,aoBool,aoNum,aoString,aoArray和aoDate的构造体都是 [Function: Array].

  • __proto__

通过varName.__proto__,aoo,aoBool,aoNum,aoString,aoArray和aoDate的原型都是 [].

  • 实例对象原型链中是否包含Object的原型链

通过varName instanceof Object,aoo,aoBool,aoNum,aoString,aoArray和aoDate是否包含Object的原型链都是 false.

  • 实例对象原型链中是否包含String的原型链

通过varName instanceof String,aoo,aoBool,aoNum,aoString,aoArray和aoDate是否包含String的原型链都是 false.

  • 实例对象原型链中是否包含Boolean的原型链

通过varName instanceof Boolean,aoo,aoBool,aoNum,aoString,aoArray和aoDate是否包含Boolean的原型链都是 false.

  • 实例对象原型链中是否包含Number的原型链

通过varName instanceof Number,aoo,aoBool,aoNum,aoString,aoArray和aoDate是否包含Number的原型链都是 false.

  • 实例对象原型链中是否包含Array的原型链

通过varName instanceof Array,aoo,aoBool,aoNum,aoString,aoArray和aoDate是否包含Array的原型链都是 true.

  • 实例对象原型链中是否包含Date的原型链

通过varName instanceof Date,aoo,aoBool,aoNum,aoString,aoArray和aoDate是否包含Date的原型链都是 false.

Date强制转换

  • 原始值

通过varName,doo,doBool,doNum,doString,doArray和doDate的原始值都是 Tue May 20 2020 22:35:18.

  • constructor

通过varName.constructor,doo,doBool,doNum,doString,doArray和doDate的构造体都是 [Function: String].

这个有些奇怪~~~

  • __proto__

通过varName.__proto__,doo,doBool,doNum,doString,doArray和doDate的原型都是 [String: ''].

  • 实例对象原型链中是否包含Object的原型链

通过varName instanceof Object,doo,doBool,doNum,doString,doArray和doDate是否包含Object的原型链都是 false.

  • 实例对象原型链中是否包含String的原型链

通过varName instanceof String,doo,doBool,doNum,doString,doArray和doDate是否包含String的原型链都是 false.

  • 实例对象原型链中是否包含Boolean的原型链

通过varName instanceof Boolean,doo,doBool,doNum,doString,doArray和doDate是否包含Boolean的原型链都是 false.

  • 实例对象原型链中是否包含Number的原型链

通过varName instanceof Number,doo,doBool,doNum,doString,doArray和doDate是否包含Number的原型链都是 false.

  • 实例对象原型链中是否包含Array的原型链

通过varName instanceof Array,doo,doBool,doNum,doString,doArray和doDate是否包含Array的原型链都是 false.

  • 实例对象原型链中是否包含Date的原型链

通过varName instanceof Date,doo,doBool,doNum,doString,doArray和doDate是否包含Date的原型链都是 false.

总结

object 强制类型转换

  • 不会所有修改对象内容
  • 所有对象的__proto__也不会改变
  • 所有对象的构造体也不会改变
  • 所有对象的原型链都包含object的原型链
  • 除此之外，所有对象的原型链判断都和非强制转换前一样，原本是什么构造体生成的，现在对哪个构造体原型链的值就为真，比如oNumber原本是实例化的Number对象，所以在判断原型链包含情况的时候，只会在判断时候包含Number构造体原型链的时候是true，对于剩下的四种构造体原型链判断，都是false。

String强制类型转换

  • 所有对象的内容展示形式会有不同

    • 原本object的展示为[object Object]
    • 原本String的展示没有变化
    • 原本Boolean的展示为字符串类型的boolean值
    • 原本Number的展示为字符串类型的Number值
    • 原本Array的展示为字符串类型的Array值，原数组中每个数值，都以逗号拼接起来
    • 原本Date的展示为默认日期类型（显示了所有时间信息并且有时区之类）

  • 所有对象的__proto__全部变成了[String: '']

  • 所有对象的构造体全部变成了[Function: String]

  • 所有对象的原型链和六大数据类型的原型链都不匹配

Boolean强制类型转换

  • 所有对象的内容都变成了true
  • 所有对象的__proto__全部变成了[Boolean: false]
  • 所有对象的构造体全部变成了[Function: Boolean]
  • 所有对象的原型链和六大数据类型的原型链都不匹配

Number强制类型转换

  • 所有对象的内容展示形式会有不同
    • 原本object的展示为NaN
    • 原本String的展示没有变化
    • 原本Boolean的展示为1
    • 原本Number的展示为68
    • 原本Array的展示为NaN
    • 原本Date的展示为1589898724740，当前日期（Tue May 20 2020 22:35:18）对应的时间戳，当前日期距离2070年1月1日的毫秒数，时间戳/(10006060*24)，可以得出当前日期到2070年1月1日的天数。
  • 所有对象的__proto__全部变成了[Number: 0]
  • 所有对象的构造体全部变成了[Function: Number]
  • 所有对象的原型链和六大数据类型的原型链都不匹配

Array强制类型转换

  • 所有对象的内容展示形式会有不同，就是在原始内容外层套了一层中括号，比如 原本Array的内容为[ 'demo', 'little', 'you' ] ，转换之后成了[ [ 'demo', 'little', 'you' ] ]

  • 所有对象的__proto__全部变成了[]

  • 所有对象的构造体全部变成了[Function: Array]

  • 所有对象的原型链都包含object的原型链和Array的原型链

  • 所有对象的原型链和剩下的四个数据类型的原型链都不匹配

Date强制类型转换

  • 所有对象的内容都变成了Tue May 20 2020 22:35:18默认日期类型（显示了所有时间信息并且有时区之类）

  • 所有对象的__proto__全部变成了[String: '']

  • 所有对象的构造体全部变成了[Function: String]

  • 所有对象的原型链和六大数据类型的原型链都不匹配

强制类型转换共同点

  • 所有对象通过Object或Array类型强制转换之后，原型链上都可以找到object构造体原型链
  • 所有对象通过String或Date类型强制转换之后，对象的__proto__都是[String: '']，对象的构造体都变成了[Function: String]。
  • 除了Object和Array类型强制转换之外，其他强制类型转换之后，所有对象的原型链和六大数据类型的原型链都不匹配

今日学习总结

今日心情

今天主要是学习String,Number,Boolean,Object,Date,Array类型的相互转化，感觉这几个类型的转化有些麻烦,感觉之后要在实际应用中再加深一下理解吧~,这个希望明天学到更多的内容~~~~

本文使用 mdnice 排版

avatar
文章
阅读
粉丝