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

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

今日学习目标

昨天基于搜索基础学习了对象解构,然后今天就是准备学习之前一个小伙伴提到的拆箱和装箱,所以今天基础学习js类型转换基础概念，又是适合学习的一天，加油，小又又！！！！

今天文章中的内容,是有参考一个检索的文章,感觉她文章的章节结构很赞,也写的很详细,所以这边就基于文章来学习啦~~~

---

js中类型转换

基础说明

在 JavaScript中，大多数事物都是对象, 从作为核心功能的字符串和数组，到建立在JavaScript之上的浏览器 API。

今天主要是学习六大基本对象数据类型之间的强制类型转化，将其他类型的对象实例转化成规定的数据对象类型。

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

---

拆箱与装箱

把基本数据类型转换为对应的引用类型的操作称为装箱

//（1）创建String类型的一个实例；
 
//（2）在实例上调用指定的方法；
 
//（3）销毁这个实例；
var s1  = new String("some text");
var s2 = s1.substring(2);
s1 = null;

s1// ''
s2// 'me text'
sl// null

奇怪第一次打印s1的值竟然是''

---

把引用类型转换为基本的数据类型称为拆箱

将引用类型对象转换为对应的值类型对象，它是通过引用类型的valueOf()或者toString()方法来实现的。如果是自定义的对象，你也可以自定义它的valueOf()/tostring()方法，实现对这个对象的拆箱。

var objNum = new Number(123); 
var objStr = new String("123"); 

console.log( typeof objNum ); //object
console.log( typeof objStr ); //object

console.log( typeof objNum.valueOf() ); //number
console.log( typeof objStr.valueOf() ); //string
console.log( typeof objNum.toString() ); // string
console.log( typeof objStr.toString() ); // string

---

名词字典

本文中出现变量名词的解释

  var oo = new Object();
  var oBool = new Boolean(true);
  var oNum = new Number(68);
  var oString = new String("hello world");
  var oArray = new Array("demo","little","you");
  var oDate = new Date();

  var ooo = Object(oo);
  var ooString = Object(oString);
  var ooBool = Object(oBool);
  var ooNum = Object(oNum);
  var ooArray = Object(oArray);
  var ooDate = Object(oDate);

  var soo = String(oo);
  var soString = String(oString);
  var soBool = String(oBool);
  var soNum = String(oNum);
  var soArray = String(oArray);
  var soDate = String(oDate);

  var boo = Boolean(oo);
  var boString = Boolean(oString);
  var boBool = Boolean(oBool);
  var boNum = Boolean(oNum);
  var boArray = Boolean(oArray);
  var boDate = Boolean(oDate);

  var noo = Number(oo);
  var noString = Number(oString);
  var noBool = Number(oBool);
  var noNum = Number(oNum);
  var noArray = Number(oArray);
  var noDate = Number(oDate);

  var aoo = Array(oo);
  var aoString = Array(oString);
  var aoBool = Array(oBool);
  var aoNum = Array(oNum);
  var aoArray = Array(oArray);
  var aoDate = Array(oDate);

  var doo = Date(oo);
  var doString = Date(oString);
  var doBool = Date(oBool);
  var doNum = Date(oNum);
  var doArray = Date(oArray);
  var doDate = Date(oDate);

  function demoo(){}

---

变量名	含义	举例
objectName	相关对象类型名称	就像上面js代码中Object,Boolean
varName	相关对象类型实例化后的变量名	就像上面js代码中oo,oBool
param1,param2,param3,...,paramN	函数中需要传入第一个到第N个的参数值	就像上面js代码中true,68,hello world
functionName	函数名称	就像上文的demoo

---

varName转换前的信息

打印原本相关数据

原始值

实例名	原始值	使用方法
oo	{}	oo.constructor
oBool	[Boolean: true]	oBool.constructor
oNum	[Number: 68]	oNum.constructor
oString	[String: 'hello world']	oString.constructor
oArray	[ 'demo', 'little', 'you' ]	oArray.constructor
oDate	Tue May 19 2020 22:35:18	oDate.constructor

---

constructor

实例名	构造体	使用方法
oo	[Function: Object]	oo.constructor
oBool	[Function: Boolean]	oBool.constructor
oNum	[Function: Number]	oNum.constructor
oString	[Function: String]	oString.constructor
oArray	[Function: Array]	oArray.constructor
oDate	[Function: Date]	oDate.constructor

---

__proto__

实例名	默认值	使用方法
oo	{}	oo.__proto__
oBool	[Boolean: false]	oBool.__proto__
oNumber	[Number: 0]	oNum.__proto__
oString	[String: '']	oString.__proto__
oArray	[]	oArray.__proto__
oDate	Date {}	oDate.__proto__

---

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

通过varName instanceof Object,oo,oBool,oNum,oString,oArray和oDate是否包含Object的原型链都是 true.

---

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

实例名	属性值	使用方法
oo	false	oo instanceof String
oBool	false	oBool instanceof String
oNumber	false	oNum instanceof String
oString	true	oString instanceof String
oArray	false	oArray instanceof String
oDate	false	oDate instanceof String

---

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

实例名	属性值	使用方法
oo	false	oo instanceof Boolean
oBool	true	oBool instanceof Boolean
oNumber	false	oNum instanceof Boolean
oString	false	oString instanceof Boolean
oArray	false	oArray instanceof Boolean
oDate	false	oDate instanceof Boolean

---

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

实例名	属性值	使用方法
oo	false	oo instanceof Number
oBool	false	oBool instanceof Number
oNumber	true	oNum instanceof Number
oString	false	oString instanceof Number
oArray	false	oArray instanceof Number
oDate	false	oDate instanceof Number

---

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

实例名	属性值	使用方法
oo	false	oo instanceof Array
oBool	false	oBool instanceof Array
oNumber	false	oNum instanceof Array
oString	false	oString instanceof Array
oArray	true	oArray instanceof Array
oDate	false	oDate instanceof Array

---

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

实例名	属性值	使用方法
oo	false	oo instanceof Date
oBool	false	oBool instanceof Date
oNumber	false	oNum instanceof Date
oString	false	oString instanceof Date
oArray	false	oArray instanceof Date
oDate	true	oDate instanceof Date

---

强制类型转换列表

方法名	解释	使用方法
Object	将其他类型的对象转换成Object类型对象	Object(varName)
String	将其他类型的对象转换成String类型对象	String(varName)
Boolean	将其他类型的对象转换成Boolean类型对象	Boolean(varName)
Number	将其他类型的对象转换成Number类型对象	Number(varName)
Array	将其他类型的对象转换成Array类型对象	Array(varName)
Date	将其他类型的对象转换成Date类型对象	Date(varName)

---

instanceof用法

语法

object instanceof constructor

---

参数

• @param1 object 要检测的对象.
• @param2 constructor 某个构造函数

---

描述

instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

---

注意事项

• 请注意方法接受传入的构造体包括六个数据对象类型名，还有函数方法名，如果传入其他则会报错，比如如果传入varName，会报错Expecting a function in instanceof check, but got #<C>。
• 基本数据类型（null，undefined，String，Number，Boolean），没有通过new关键字或者强制类型转换的变量，即隐式声明变量，默认的原型链是未定义的
• 通过new关键词实例化functionName的时候，使用instanceof检测是否包含object原型链会返回true。
• objectName instanceof functionName的值为false，不代表functionName instanceof objectName的值也为false
• 存在父子关系的两个对象或者函数，实例化子对象或着子方法之后，在没有修改父级和子级的原型链前提下，使用instanceof检测子级或者父级的对象或者方法的时候，都会返回true。
• 需要注意的是，如果表达式 varName instanceof functionName 返回true，则并不意味着该表达式会永远返回true。
• 因为functionName.prototype属性的值有可能会改变，改变之后的值很有可能不存在于varName的原型链上，这时原表达式的值就会成为false。
• 另外一种情况下，原表达式的值也会改变，就是改变对象varName的原型链的情况，虽然在目前的ES规范中，我们只能读取对象的原型而不能改变它，但借助于非标准的__proto__魔法属性，是可以实现的，比如执行varName.__proto__ = {}之后，varName instanceof functionName就会返回false了。

这一段有点点绕~~~~~~

---

今日学习总结

---

今日心情

今天主要是学习类型相互转化基础概念，也基础了解了类型的装箱和拆箱,希望明天实际学习的时候,能加深一下理解~~~,这个希望明天学到更多的内容~~~~

本文使用 mdnice 排版