关于程序员:JavaScript隐式类型转换原理优先级规则及场景

30次阅读

共计 2820 个字符,预计需要花费 8 分钟才能阅读完成。

写作不易,如有帮忙请点赞、珍藏 + 关注,更多技术材料获取请点击

Gitee

JavaScript 中的类型转换是一项十分重要的性能,它使得在编写代码时更加灵便和便捷。其中,隐式类型转换是指在代码执行期间,JavaScript 主动地将一个数据类型转换为另一个数据类型,而无需手动进行显式类型转换。

隐式类型转换的原理能够总结为以下几点:

  • JavaScript 是一门动静类型语言,变量的类型是在运行时确定的。在表达式中应用不同类型的变量时,JavaScript 引擎会依据变量的值和上下文主动进行类型转换。
  • JavaScript 中的类型转换是通过内置的类型转换函数实现的。例如,Number()函数用于将一个值转换为数字类型,String()函数用于将一个值转换为字符串类型。
  • 隐式类型转换的规定是由 JavaScript 引擎所遵循的,不同的引擎实现可能会有所不同。通常,JavaScript 引擎会尽可能地依照开发者的用意进行转换,但也有一些隐式类型转换可能会导致一些意外的行为。
  • 在 JavaScript 中,布尔类型值会被转换为数字类型进行运算。true 会被转换为 1,false 会被转换为 0。字符串类型的值会被尝试转换为数字类型进行运算,如果无奈转换则会返回 NaN。另外,在进行字符串和数字类型的加法操作时,数字类型的值会被转换为字符串类型,而后进行字符串的拼接。

须要留神的是,只管 JavaScript 引擎可能主动执行隐式类型转换,但在编写代码时,最好还是尽可能地防止隐式类型转换,以缩小代码的不确定性和谬误。在须要进行类型转换的状况下,倡议尽量应用显式类型转换函数来进行转换,以减少代码的可读性和可维护性。

优先级

在 JavaScript 中,隐式类型转换的优先级是依据数据类型和操作符来决定的。以下是一些常见的数据类型和操作符的优先级:

  • 字符串拼接(+):如果一个操作数是字符串,则另一个操作数将被强制转换为字符串。因而,字符串拼接的优先级高于其余所有操作符。
  • 比拟操作符(==、!=、<、>、<=、>=):比拟操作符比算术操作符的优先级要高。如果两个操作数的类型不同,则 JavaScript 会进行隐式类型转换,以使它们类型雷同,并尝试进行比拟。
  • 算术操作符(+、-、、/、%):算术操作符的优先级要低于比拟操作符。(+)执行 ” 字符串拼接 ” 准则,(-、、/、%)则转为数字,进行数学计算。如果一个操作数是布尔值、null 或 undefined,另一个操作数是数字,则进行隐式类型转换为数字,如果另一个操作数是字符串,则执行 ” 字符串拼接 ” 准则。
  • 逻辑操作符(&&、||):逻辑操作符的优先级比算术操作符低。如果操作数是布尔值,则进行布尔逻辑运算。如果操作数是非布尔值,则进行隐式类型转换为布尔值。
  • 三元运算符(?:):三元运算符的优先级最低。如果第一个操作数为 true,则返回第二个操作数;否则返回第三个操作数。如果操作数类型不同,则进行隐式类型转换以使它们类型雷同。

须要留神的是,尽管隐式类型转换能够使代码更简洁和不便,但也可能会导致一些难以发现的谬误。因而,在开发 JavaScript 应用程序时,应尽可能防止依赖于隐式类型转换,尽可能应用显式类型转换和严格比拟操作符(如 === 和 !==)。

转换规则

转换为字符串 转换为数字 转换为布尔值 转换为对象
undefined “undefined” NaN false throw TypeError
null “null” 0 false throw TypeError
true “true” 1 new Boolean(“true”)
false “false” 0 new Boolean(“false”)
“”(空字符串) 0 false new String(“”)
“1.2”(非空, 数字) 1.2 true new String(“1.2”)
“1.2a”(非空, 非数字) NaN true new String(“1.2a”)
“aaa” NaN true new String(“aaa”)
0 “0” false new Number(0)
-0 “0” false new Number(-0)
NaN “NaN” false new Number(NaN)
Infinity “Infinity” true new Number(Infinity)
-Infinity “-Infinity” true new Number(-Infinity)
1(无穷大, 非零) “1” true new Number(1)
{} ‘[object Object]’ NaN true
[] “” 0 true
[9] “9” 9 true
[“a”] “a” NaN true
function(){} ‘function(){}’ NaN true

场景

逻辑判断 逻辑运算 ,如需深刻学习,JavaScript 权威指南(犀牛书) 第三章 -3.8 类型转换,请返回 Gitee 获取

特例

console.log({} == {}) // false 比拟援用地址
console.log({} == !{}) // false  !{}->false->0  {}->"[object Object]"->NaN
console.log({} == true) // false
console.log([] == []) // false 比拟援用地址
console.log([] == ![]) // true []->""->0  ![]->false->0
console.log([] == 0) // true    []->""->0
console.log(![] == 0) // true   ![]->false->0
console.log({} == []) // 报错   ({}, ==[])-> 报错
console.log(NaN == NaN) // false
console.log(undefined == null) // true
console.log(null == null) // true
console.log(undefined == undefined) // true
console.log('2' > '10') // true  // 首先将操作符两边都转为字符编码再进行比拟 '2'.charCodeAt() //50  '10'.charCodeAt() // 49  所以 '2'>'10' 会返回 true

console.log({} + {}) // "[object Object][object Object]"
console.log([1,2,3] + []) // "1,2,3" + ""->"1,2,3"console.log([] + {}) //"" + "[object Object]" -> "[object Object]"

// 非变量模式
console.log({} + []) // 0 {}被当做一个块,并非 {} 转 NaN,相当于执行 ({},+[]),返回值为小括号最初面的表达式的返回值
console.log({q:1} + []) // 0

// 变量模式
var a = {q:1};
console.log(a + []) // "[object Object]"

本文由 mdnice 多平台公布

正文完
 0