两人相对而坐,风魂伸展了一下,知道自己体内错位的肺腑已经完全治好,这才苦笑道:“红线,你踢得也太重了。”

号左右分别进行取值


前言

相信刚开始了解js的时候,都会遇到 2 =="2",但是 1+"2" == "1"+"2"为false的情况,这时候应该会是一脸懵逼的状态,不得不感慨js弱类型的灵活让人发指,隐式类型转换就是这么猝不及防。结合实际中的情况来看,有意或无意中涉及到隐式类型转换的情况还是很多的。既然要用到,就需要掌握其原理,知其然重要知其所以然更重要。

js的变量类型

JavaScript 是弱类型语言,意味着JavaScript 变量没有预先确定的类型。
并且变量的类型是其值的类型。也就是说变量当前的类型由其值所决定,夸张点说上一秒种的string,下一秒可能就是个array了。此外当进行某些操作时,变量可以进行类型转换,我们主动进行的就是显式类型转换,另一种就是隐式类型转换了。例如:

var a = "1";
typeof a;//string

a =parseInt(a); //显示转换为number
typeof a //number

a == "1" //true

弱类型的特性在给我们带来便利的同时,也会给我们带来困扰。趋利避害,充分利用该特性的前提就是掌握类型转换的原理,下面一起看一下。

js数据类型

老生常谈的两大类数据类型:

  1. 原始类型
    Undefined、 Null、 String、 Number、 Boolean
  2. 引用类型
    object
    此外还有一个es6新增的Symbol,先不讨论它。对于这五类原始类型,突然提问可能想不全,没必要去死记硬背,可以想一下为否的常见变量及其对应值即可。
0 Number
"" String
false Boolean
null Null
undefined Undefined

对于不同的数据格式转换规则是不同的,我们需要分别对待。

转换规则

既然是规范定义的规则,那就不要问为什么了,先大致看一下,争取记住。是在不行经常翻翻看看大佬的博客es5规范。转换有下面这么几类,我们分别看一下具体规范。(这部分转换规则,完全可以跳过去,看到下面的实例再回头看应该更容易接受一些)

  • 转换为原始值
  • 转换为数字
  • 转换为字符串

ToPrimitive(转换为原始值)

ToPrimitive 运算符接受一个值,和一个可选的 期望类型 作参数。ToPrimitive 运算符把其值参数转换为非对象类型。如果对象有能力被转换为不止一种原语类型,可以使用可选的 期望类型 来暗示那个类型。根据下表完成转换

这段定义看起来有点枯燥。转换为原始值,其实就是针对引用数据的,其目的是转换为非对象类型。
如果已经是原始类型,当然就不做处理了
对于object,返回对应的原始类型,该原始类型是由期望类型决定的,期望类型其实就是我们传递的type。直接看下面比较清楚。
ToPrimitive方法大概长这么个样子具体如下。

/**
* @obj 需要转换的对象
* @type 期望转换为的原始数据类型,可选
*/
ToPrimitive(obj,type)

type可以为number或者string,两者的执行顺序有一些差别
string:

  1. 调用obj的toString方法,如果为原始值,则返回,否则下一步
  2. 调用obj的valueOf方法,后续同上
  3. 抛出TypeError 异常

number:

  1. 调用obj的valueOf方法,如果为原始值,则返回,否则下一步
  2. 调用obj的toString方法,后续同上
  3. 抛出TypeError 异常

其实就是调用方法先后,毕竟期望数据类型不同,如果是string当然优先调用toString。反之亦然。
当然type参数可以为空,这时候type的默认值会按照下面的规则设置

  1. 该对象为Date,则type被设置为String
  2. 否则,type被设置为Number

对于Date数据类型,我们更多期望获得的是其转为时间后的字符串,而非毫秒值,如果为number,则会取到对应的毫秒值,显然字符串使用更多。
其他类型对象按照取值的类型操作即可。

概括而言,ToPrimitive转成何种原始类型,取决于type,type参数可选,若指定,则按照指定类型转换,若不指定,默认根据实用情况分两种情况,Date为string,其余对象为number。那么什么时候会指定type类型呢,那就要看下面两种转换方式了。

toNumber

某些特定情况下需要用到ToNumber方法来转成number
运算符根据下表将其参数转换为数值类型的值

对于string类型,情况比较多,只要掌握常见的就行了。和直接调用Number(str)的结果一致,这里就不多提了,主要是太多提不完。
需要注意的是,这里调用ToPrimitive的时候,type就指定为number了。下面的toString则为string。

toString

ToString 运算符根据下表将其参数转换为字符串类型的值:
其实了解也很简单,毕竟是个规范,借用大佬一张图:

虽然是需要死记的东西,还是有些规律可循的。
对于原始值:

  • Undefined,null,boolean
    直接加上引号,例如"null"
  • number 则有比较长的规范,毕竟范围比较大
    常见的就是 "1" NaN则为"NaN" 基本等同于上面一条
    对于负数,则返回-+字符串 例如 "-2" 其他的先不考虑了。
  • 对象则是先转为原始值,再按照上面的步骤进行处理。

valueOf

当调用 valueOf 方法,采用如下步骤:

  1. 调用ToObject方法得到一个对象O
  2. 原始数据类型转换为对应的内置对象, 引用类型则不变
  3. 调用该对象(O)内置valueOf方法.

不同内置对象的valueOf实现:

  • String => 返回字符串值
  • Number => 返回数字值
  • Date => 返回一个数字,即时间值,字符串中内容是依赖于具体实现的
  • Boolean => 返回Boolean的this值
  • Object => 返回this

对照代码更清晰一点

var str = new String("123")
//123
console.log(str.valueOf())
var num = new Number(123)
//123
console.log(num.valueOf())
var date = new Date()
//1526990889729
console.log(date.valueOf())
var bool = new Boolean("123")
//true
console.log(bool.valueOf())
var obj = new Object({valueOf:()=>{
return 1
}})
//依赖于内部实现
console.log(obj.valueOf())

运算隐式转换

前面提了那么多抽象概念,就是为了这里来理解具体转换的。
对于+运算来说,规则如下:

  • +号左右分别进行取值,进行ToPrimitive()操作
  • 分别获取左右转换之后的值,如果存在String,则对其进行ToString处理后进行拼接操作。
  • 其他的都进行ToNumber处理
  • 在转换时ToPrimitive,除去Date为string外都按照ToPrimitive type为Number进行处理
    说的自己都迷糊了快,一起结合代码来看一下
1+"2"+false
  1. 左边取原始值,依旧是Number
  2. 中间为String,则都进行toString操作
  3. 左边转换按照toString的规则,返回"1"
  4. 得到结果temp值"12"
  5. 右边布尔值和temp同样进行1步骤
  6. temp为string,则布尔值也转为string"false"
  7. 拼接两者 得到最后结果 "12false"

我们看一个复杂的

var obj1 = {
valueOf:function(){
return 1
}
}
var obj2 = {
toString:function(){
return "a"
}
}
//2
console.log(1+obj1)
//1a
console.log("1"+ obj2)
//1a
console.log(obj1+obj2)

不管多复杂,按照上面的顺序来吧。

  • 1+obj1
  1. 左边就不说了,number
  2. 右边obj转为基础类型,按照type为number进行
  3. 先调用valueOf() 得到结果为1
  4. 两遍都是number,则进行相加得到2
  • 1+obj2
  1. 左边为number
  2. 右边同样按照按照type为number进行转化
  3. 调用obj2.valueOf()得到的不是原始值
  4. 调用toString() return "a"
  5. 依据第二条规则,存在string,则都转换为string进行拼接
  6. 得到结果1a
  • obj1+obj2
  1. 两边都是引用,进行转换 ToPrimitive 默认type为number
  2. obj1.valueOf()为1 直接返回
  3. obj2.valueOf()得到的不是原始值
  4. 调用toString() return "a"
  5. 依据第二条规则,存在string,则都转换为string进行拼接
  6. 得到结果1a

到这里相信大家对+这种运算的类型转换了解的差不多了。下面就看一下另一种隐式类型转换

== 抽象相等比较

这种比较分为两大类,

  • 类型相同
  • 类型不同
    相同的就不说了,隐式转换发生在不同类型之间。规律比较复杂,规范比较长,这里也不列举了,大家可以查看抽象相等算法。简单总结一句,相等比较就不想+运算那样string优先了,是以number优先级为最高。概括而言就是,都尽量转成number来进行处理,这样也可以理解,毕竟比较还是期望比较数值。那么规则大概如下:
    对于x == y
  1. 如果x,y均为number,直接比较
没什么可解释的了
1 == 2 //false
  1. 如果存在对象,ToPrimitive() type为number进行转换,再进行后面比较
var obj1 = {
valueOf:function(){
return "1"
}
}
1 == obj2 //true
//obj1转为原始值,调用obj1.valueOf()
//返回原始值"1"
//"1"toNumber得到 1 然后比较 1 == 1
[] == ![] //true
//[]作为对象ToPrimitive得到 ""
//![]作为boolean转换得到0
//"" == 0
//转换为 0==0 //true
  1. 存在boolean,按照ToNumber将boolean转换为1或者0,再进行后面比较
//boolean 先转成number,按照上面的规则得到1
//3 == 1 false
//0 == 0 true
3 == true // false
"0" == false //true
  1. 如果x为string,y为number,x转成number进行比较
//"0" toNumber()得到 0
//0 == 0 true
"0" == 0 //true

结束语

参考文章

ECMAScript5.1中文版 + ECMAScript3 + ECMAScript(合集)
你所忽略的js隐式转换
这篇文章的本意是为自己解惑,写到后面真的感觉比较乏味,毕竟规范性的东西多一点,不过深入了解一下总好过死记硬背。原文请移步我的博客。对于有些观点说这些属于js糟粕,完全不应该深入,怎么说呢,结合自己情况判断吧。本人水平有限,抛砖引玉共同学习。

当前文章:http://hnhdqp.com/list_57003.html

发布时间:2018-11-13 03:02:48

20万做什么投资好 风险投资公司 网络兼职靠谱么 网络小说配音兼职招聘 武汉兼职配音员招聘 深圳家教兼职 免费兼职打字员电脑 淘宝好评师兼职 大学生暑假兼职日志 大学兼职网

编辑:海马安纯

相关新闻

定边县着力构建更加科学规范的考核评价体系

2018-11-13 05:25:23

上海坏寡教育咨询有限公司

周河镇扎实推进平安建设提升“两率一度”

2018-11-13 01:53:42

鸡西问独工贸有限公司

《一年级》曝下集预告 袁姗姗佟梦实亲密交杯

2018-11-13 05:56:49

正定腊榷幼儿园

出名要趁早 盘点乐坛新生代小帅哥们

2018-11-13 00:44:26

佳木斯巢壕信息科技有限公司

热门推荐

  • 安徽加强农村地区治安整治 预防、减少违法犯罪
  • 曝微软将推机器人玩家服务
  • 北京将启动长达4天的空气重污染橙色预警
  • 你真的需要苹果Apple Watch吗?
  • Steam今年发行新游将达6000款 较去年提升四成
  • 《琅琊榜:风起长林》手游经典特色曝光
  • 《零-云之声》威人设资料公开 谱写音乐史诗
  • (MariaDB)MySQL内置函数大全
  • 印尼两名挖隧道越狱外籍囚犯在东帝汶被抓获
  • 网红县委书记辞官这半年:档案被塞人才市场
  • 河北新闻网版权所有 本站点信息未经允许不得复制或镜像 法律顾问:赚钱宝官网 2018真实网赚项目
  • 国外互联网创业项目 copyright ? 2000 - 2016
  • 新闻热线:0311-67563366 广告热线:0311-67562966 新闻投诉:0311-67562994
  • 冀ICP备 09047539号-1 | 互联网新闻信息服务许可证编号:1312006002
  • 广播电视节目制作经营许可证(冀)字第101号|信息网络传播视听节目许可证0311618号
  • 微投资能赚钱吗 手机挖矿赚钱软件日结 逆水寒怎么搬砖赚钱 想靠网络赚钱