Javascript中的范例转换

2024年5月16日 181次阅读 来源: 杰克船长

Javascript为何会有范例转换

Javascirpt天下里，不引荐大批的运用try…catch…，我想也许缘由：

  • JS里任何范例之间的算数运算，逻辑运算和位运算都不会抛非常或许毛病。比方 1/0 == Infinity， 0/0 = NaN， [ ] + 1 = ‘1’ 等。所以catch到excepton／error的概率，相对于编译型言语甚至于python／ruby等动态言语，是大大地下降了。

  • try…catch…会在catch里转换到一个新的作用域，catch内里挪用本函数或许函数外的对象时，增加了一层作用域的查找，下降了运转效力

  • 假如有未知的风险，确切能够try…catch…。然则假如你的代码里有比较多的try…catch…，这就是bad smell，申明须要增强coding质量或许重构了。

范例转换轨则

这里议论JS里对差别范例举行运算的时刻，是如何做范例转换的（平常是隐式转换）。

加法运算

  1. 1 + '-1' = '1-1'
    基础范例之间相加时，只需其一是字符串，别的一个也会先转换为字符串，效果就变成字符串的衔接。

  2. [ ] + 1 = '1'
    援用范例和基础范例相加。援用范例先转化为基础范例。转化历程：先检察对象的valueOf()要领是不是返回基础范例。数组的valueOf返回它本身，属于object范例，不是基础范例。所以再挪用toString要领。空数组[]的toString返回空字符串。效果转为‘’ + 1. 返回字符串‘1’。

  3. [ ] + { } = [object Object]
    援用范例之间的加法。援用范例需先转换为基础范例。 参考2，空数组[]转为空字符串。相似地空对象{ } 转换时，也先检察{ }.valueOf(). 由于 {}的valueof要领返回它本身，所以会挪用{}.toString()返回‘[object Object]’。
    如许效果变成 ” + ‘[object Object]’ = ‘[object Object]’

  4. 1 + null = 1
    由于已是基础范例，而且没有字符串，所以会基于number范例运算。 null转为0， 效果是 1 + 0 = 1

  5. 1 + undefined = NaN
    undefined 转为NaN, so 1+ NaN = NaN

  6. false + null = 0
    都是基础范例而且没有字符串，所以基于数字范例相加。 false转为0， null也为0. 效果 0 + 0 = 0

  7. [1] + [2] = '12'
    离别挪用toString要领以转为基础范例，获得’1’和‘2’, ‘1’ + ‘2’ = ’12’

加法之外的算数运算

加法之外的算数运算，假如有object范例（包含数组），先转为基础范例，这和加法运算是雷同的。转换历程也是先检察valueOf是不是返回基础范例，假如不是，就挪用toString（这里假定toString都返回string。除非谁闲着没事，非得给一对象的toString返回对象范例？）

和加法运算差别的是，转换为基础范例后，一切的基础范例再转为number范例，终究以number范例举行运算。

  1. 1 - "-1" = "-1"
    字符串“-1”转为number的-1， 效果1 – (-) = 2

  2. [ ] - 1 = -1
    [ ]先转为基础范例，是空字符。空字符再转为number为0 ，效果是0 – 1 = -1

  3. [ ] / { }
    空数组转为基础范例是空字符，空对象转为基础范例是[object Object]，两者再离别转为数字范例是 0 和 NaN，终究效果为0/NaN = NaN

  4. 1 / null
    都已为基础范例，所以只需把null转为number范例的0， 然后1 / 0 = Infinity

  5. 1 * undefined
    都已为基础范例，所以只需把undefined转为number范例的NaN， 然后1 * NaN = NaN

逻辑运算

  1. 1 && null = null.
    由于1 是真值，则返回第二个值， 即null

  2. null && undefined = null
    返回null，由于null是falsy，则返回第一个。

  3. 0 || {} = {}
    返回 {}. 由于0 是falsy，返回第二个

  4. 1 || null = 1
    返回1， 由于1是真值，返回第一个

位运算

  1. ~n = -(n+1)，
    比方~25 = -26. 这里是带标记的取反。假如是无标记的取反，效果就不一样了，有兴致的能够在C言语里尝尝 ~25u

  2. ~null = -1
    null转为0， ～0 = -(0+1) =-1

  3. ~undefined //SyntaxError: Invalid or unexpected token

  4. ~~23.5 = 23 ~~-23.5 = -23
    但 Math.floor(-23.5) = -24. 故而平常用～～取整数位

If 运算

if(-1) 和if (-1 == true) 是不一样的。前者是真假推断: -1是truthy,是真值。后者相似算术运算:先转为number，true 转为1， 故而 -1 == 1是假值。

小结

这里总结了js范例转换和运转的基础规律，愿望是能够满足基础的项目须要了。

跋文

JS差别范例之间的范例转换，确切是让人挠头的言语。我猜测多是JS发生的时刻，web蒸蒸日上，web工程师的编程功底还没有很范例（最少没有本日这么多材料书本和培训机构等），所以js许可范例转换，差别范例之间运算时，保证不抛非常或许只管少抛。

然则如今前端和后端一样的巨大了，明显js的如许那样的技法每每会使工程师掉入圈套。typescript应允而生，一个目标是也是协助低级工程师写出还能够的代码（别的一个目标预计是下降后端开发者写前端的门坎和头脑改变）。从这角度解读，ts也是为满足项目工程和公司的须要。假如想深切js进修，原生的js（es5/6）是绕不开的。

补证

前面提到“try…catch…会在catch里转换到一个新的作用域”，这是在《你不知道的JavaScript》中卷里看到的。厥后觉得照样做些论证，不然老觉得不扎实。看以下代码：

function testException() {
    var error = 'outer error'
    try {
        throw 'inner error'
    } catch (error) {
        console.log(error)
        error = 'modify inner error'
    }
    
    // 这里会输出 outer error（而不是modify inner error），
    // 申明catch...里修正的error，不是testExecution()函数作用域里的，而是一个“新”作用域里的error
    // 所以我们可以为，catch...创建了一个新的作用域。看来它和函数作用域的相似点，都接收“参数”
    console.log(error) 
}

testException()
    原文作者：杰克船长
    原文地址: https://segmentfault.com/a/1190000009940342
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞