JavaScript隐式类型转换

bingo 发布于2019-08-23 15:12 / 1253人阅读

摘要：所谓装箱转换，正是把基本类型转换为对应的对象，他是类型转换中一种相当重要的种类。拆箱转换在标准中，规定了函数，它是对象类型到基本类型的转换即，拆箱转换。拆箱转换会尝试调用和来获得拆箱后的基本类型。

JavaScript隐式类型转换 基本数据类型

ECMAScript 一共定义了七种 build-in types，其中六种为 Primitive Value，Null， Undefined，String， Number， Boolean， Symbol。而最后一种 Object build-in type 与通常意义上的 JavaScript 中 Object 并不一样，总的来说，只要不属于 Primitive Value 的值，就属于 Object 类型，比如数组、对象、日期、正则、函数。

装箱转换

每一种基本类型 number, string, boolean, symbol 在 Object(build-in type) 中都有对应的类。所谓装箱转换，正是把基本类型转换为对应的对象，他是类型转换中一种相当重要的种类。

JavaScript 语言设计上试图模糊对象和基本类型之间的关系，比如，我们可以直接在基本类型上使用对象的方法：

console.log("abc".charAt()); // a

甚至我们在原型上添加方法，都可以应用于基本类型。

实际上是 . 运算符提供了装箱操作，它会根据基础类型构造一个临时对象，使得我们能在基础类型上调用对应对象的方法。

拆箱转换

在 JavaScript 标准中，规定了 ToPrimitive 函数，它是对象类型到基本类型的转换（即，拆箱转换）。

对象到 String 和 Number 的转换都遵循“先拆箱再转换”的规则。通过拆箱转换，把对象变成基本类型，再从基本类型转换为对应的 String 或者 Number。

拆箱转换会尝试调用 valueOf 和 toString 来获得拆箱后的基本类型。如果 valueOf 和 toString 都不存在，或者没有返回基本类型，则会产生类型错误 TypeError。

ToPrimitive

ToPrimitive 用于将 Object 转为 Primitive Value

对于我们平常遇到的 Object，其处理逻辑是：

调用 Object.valueOf，如果结果是 Primitive Value，则返回;

调用 Object.toString，如果结果是 Primitive Value，则返回;

都不是，返回 TypeError

普通对象和数组的这两个方法返回的结果如下：

var a = [12]
var b = {a: 123}

// [12]
a.valueOf()

// "12"
a.toString()

// {a: 123}
b.valueOf()

// "[object Object]"
b.toString()

如上，两者的 valueOf 返回的都不是 Primitive Value (返回了自身，还是 Object 类型)。那么，根据规范，两者调用 ToPrimitive 返回的将是一个 字符串。

显示类型转换 ToBoolean

这个方法用于将不是 Boolean 类型的值转换为 Boolean 类型。

Undefined 返回 false

Null 返回 false

所有 Object 类型都会被转换为 true;

Number 类型中，0，NaN 会被转换为 false，其它都为 true

只有空字符串为 false，其它都为 true

ToNumber

其它类型转换为 Number 类型。

Undefined 返回 NaN

Null 返回 0

Boolean 类型，true 为 1； false 为 0

String 类型，如果满足数字语义则转为数字，否则转换为 NaN

Object 类型，先转换为 Primitive Value 再递归调用自身 ToNumber 来转换。

// "56" ==> 56
Number([56])

// ",56" ==> NaN
Number([,56])

// "55,56" ==> NaN
Number([55, 56])

ToString

Number 返回对应数值字符串

Boolean 返回字符串 “true” 或者 “false”

Undefined 返回 “undefined”

Null 返回 “null”

隐式类型转换

了解了上面的知识，可以开始进入我们的正题了，在 JavaScript 中可以触发隐式类型转换的操作有：

四则运算: +, -, *, /

比较运算符: ==, <, >, >=, <=

判断语句: if, while

Native调用: console, alet 输入时会自动转换成 String 类型

逻辑非 !，将直接调用 ToBoolean 方法，然后取反返回。

比较运算符 非严格比较（==）

如果 Type 相同，等价于 A === B

特别的, undefined == null

String == Number，则把 String 转换成 Number

有 Boolean 值的，将 Boolean 转换成 Number

Object String/Number/Symbol，将 Object 转换成 Primitive Value

否则，返回 false

// "12" ==> 12;
// 返回 true
12 == "12"

// 转 boolean: [] == 0
// 转 object: "" == 0
// 转 string: 0 == 0
// 返回 true
[] == false

// 转 object: "45" == 45
// 转 string: 45 == 45
// 返回 true
[45] == 45

// 单目: {} == false
// 转 boolean: {} == 0
// 转 object: "[object Object]" == 0
// 转 string: NaN == 0
// 返回 false
{} == !{}

// 单目：[] == fasle
// 转 boolean： [] == 0
// 转 array: "" == 0
// 转 string: 0 == 0
// 返回 true
[] == ![]

[] == []
[] == 0

严格比较 (===)

类型不同，直接返回 false

Number 类型判断：有 NaN 就 false；

特别的 +0 === -0；

最后调用 SameValueNonNumber

另外 != 和 !== 则是指出了 A != B 与 !(A == B) 是完全等价的。在判断 !=/!== 时，其实就是在判断 ==/===.

不等关系

两边操作数调用 ToPrimitive 转换为 Primitive Value

由于 Primitive Value 出来有 String 和 Number 两种结果，分别有不同的比较规则；

如果两边的值都是 String，则按 code unit 比较，

如果一边是 Number，则将另一边也转换为 Number;注意 Number 需要处理 +0/-0/NaN/Infinity 等情况

// 注意转换后为 "45" < "46"
// 按字符串规则比较 最终比较的是 "5".charCodeAt() < "6".charCodeAt() => 53 < 54
// 返回 true
[45] < [46]

// 同理 [10] < [9] 最后进行的是 "10" < "9" 的比较，是字符串之间的笔记，不会转换为数字间的比较，
// 其实最终比较的是 "1".charCodeAt() < "9".charCodeAt() => 49 < 57.
[10] < [9]

练习题

// 每个表达式是 true 还是 false 呢？为啥呢？

// 初阶
!{}
12 == "12"
"false" == false
null == undefined

// 高阶
[] == []
[] == false
[] === false
[45] == 45

// 终阶
[45] < [46] ?
[10] < [9] ?
{} == !{}
{} != {}
-0 === +0
NaN === NaN
NaN != NaN

// 转换条件 转换后类型 结果
[]+[] // String “”
[1,2]+[3,4] // String “1,23,4”
[]+{} // String “[object Object]”
[1,2] + {a:1} // String “1,2[object Object]”
{}+[] // Number 0
{}+[1] //Number 1
{a:1}+[1,2] // Number NaN
{a:1}+{b:2} // Chrome - String “[object Object][object Object]” (背后实现eval)
{a:1}+{b:2} // Firefox - Number NaN
true+true // Number 2
1+{a:1} // String “1[object Object]”

reference

JavaScript 中的隐式类型转换的规范

JavaScript 运算符规则与隐式类型转换详解

JavaScript类型：关于类型，有哪些你不知道的细节？

深入浅出弱类型JS的隐式转换

JavaScript字符串间的比较

ecma-sec-relational-operators

海外云主机私有云隐式类型转换隐式转换 java隐式转换 mysql隐式转换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101673.html

JavaScript 强制类型转换

摘要：强制类型转换作为程序员，你一定获取过当前系统的时间戳。比如对于变量而言，此次强制类型转换是隐式的。然而则是非常典型的显式强制类型转换。隐式强制类型转换大部分被诟病的强制类型转换都是隐式强制类型转换。 JavaScript 强制类型转换作为 JavaScript 程序员，你一定获取过当前系统的时间戳。在 ES5 引入 Date.now() 静态方法之前，下面这段代码你一定不会陌生： v...

OnlyLing 2019-08-22 16:33 评论0 收藏0
聊一聊 JS 中的『隐式类型转换』

摘要：具体的行为取决于参数的类型。说到，就不得不提一下方法，方法自带隐式类型转换，该方法在测试其参数之前，会先调用方法将其转换为数字。全等运算符会先进行数据类型判断，并且不会发生隐式类型转换。类型转换还不行？还非得隐式？这是什么高级玩意？废话不多说，我们先上一盘?，额，不对，先看一个例子吧。 3 + true 实际上在大多数编程语言中，都会认为上面这个表达式是错误的。因为布尔表达式与算术...

Jenny_Tong 2019-08-19 17:39 评论0 收藏0
JavaScript 中的隐式类型转换

摘要：虽然你可能很惊讶甚至可能怀疑是的但是这都是有语言自己的一个隐式类型转换的套路。基本的隐式类型转换基本类型的隐式转换这个其实我们使用的最多例如结果返回的是而不是这就是类型的隐式转换。基本上所有的语言都有隐式类型转换 ,但是对于弱类型语言(JS) 来说 ,隐式类型转换会比强类型语言(Java) 带来更大的副作用,有些行为甚至是不可思议的。虽然你可能很惊讶 ,甚至可能怀疑是 JS 的...

txgcwm 2019-08-26 11:44 评论0 收藏0
JavaScript数据类型及(隐式)类型转换详解

摘要：显示的调用转换过程称为显式强制类型转换，隐式的情况称为隐式强制类型转换。隐式强制类型转换让代码变得晦涩难懂而又便捷而奇妙。事实上，允许在比较中进行强制类型转换，而不允许。如果有并且返回基本类型值，就使用该值进行强制类型转换。 JavaScript是一种非常灵活的现代编程语言，灵活到使用者极其容易被忽视的它那广阔的世界以及它带给我们的无限遐想空间。本文将对JavaScript最最基础也最...

hiyayiji 2019-08-26 10:28 评论0 收藏0
Front-end developmenter必看，超实用的javaScript隐式类型转换规则记忆

摘要：下面先看看涉及到的几个函数以及他们的转换规则，这个是需要记忆的内容类型转换需要使用到的函数对于布尔值用到的是对于数值，用到的是当然还有但是对于隐式类型转换的时候，调用的是前者。 javaScript类型转换规则 javaScript的类型转换其实一直是很多前端开发人员很迷的地方，一会儿这里要转换，一会儿那里又要转换，总之就是一个大写的迷，因为它隐式类型转换的地方实在是太多了。但其实...

fuchenxuan 2019-08-23 12:13 评论0 收藏0