• 技术文章 >web前端 >js教程

    20个稀奇古怪的JS表达式,猜猜输出结果吧!

    青灯夜游青灯夜游2022-06-27 13:41:28转载110
    本篇文章给大家分享20个稀奇古怪的 JavaScript 表达式,你能回答出其输出结果吗?快来挑战回答一下吧!

    JavaScript是一种非常容错的编程语言,许多在其他编程语言中不合法的表达式在JavaScript中都能正常工作。

    这导致了很多奇怪的代码。你想挑战它吗?

    挑战

    在这个挑战中,你将看到20个古怪表达式,并要猜出其输出结果。

    1.

    true + false

    2.

    **1.**

    3.

    [1, 2, 3] + [4, 5, 6]

    4.

    0.2 + 0.1 === 0.3

    5.

    10,2

    6.

    !!""

    7.

    +!![]

    8.

    true == "true"

    9.

    010 - 03

    10.

    "" - - ""

    11.

    null + 0

    12.

    0/0

    13.

    1/0 === 10 ** 1000

    14.

    true++

    15.

    "" - 1

    16.

    (null - 1) - "1"

    17.

    38 * 4343 * 2342+ (“true” — 0)

    18.

    5 + !5 + !!5

    19.

    [] + [1] + 2

    20.

    1 + 2 + "3"

    结果和分析

    true + false

    试图在两个布尔值之间使用加法运算符(+)时,它们会被转换为数字。

    而且我们都知道true应该被转换为1false应该被转换为0。所以true+false返回1

    [,,,].length

    [,,,] 输出一个有三个空槽的数组。最后一个逗号是尾部的逗号。

    你可以这么想。

    [,]     ==> [empty,]
    [,,]    ==> [empty, empty,]
    [,,,]   ==> [empty, empty, empty,]

    所以 [,,,].length 返回3。

    [1, 2, 3] + [4, 5, 6]

    当你试图在数组之间使用加法运算符(+)时,它们会被转换为字符串。

    将一个数组转换为字符串时,数组的 toString() 方法被调用。toString()方法是JavaScript 内部使用的,当一个数组需要显示为文本时,它将用逗号连接其元素。

    [1, 2, 3].toString() ==> '1, 2, 3'
    [4, 5, 6].toString() ==> '4, 5, 6'

    所以

    [1, 2, 3] + [4, 5, 6] ==> '1, 2, 3' + '4, 5, 6' ==> "1,2,34,5,6"

    0.2 + 0.1 === 0.3

    由于浮点数很难在计算机中准确表示,数学上的0.10.2在计算机中只能用近似的数字表示。

    0.1+0.2的结果不完全是0.3。不仅仅是JavaScript,其他编程语言也有同样的问题。

    10, 2

    逗号(,)在JavaScript中也是一个合法的操作符,它评估每个操作数(从左到右),并返回最后一个操作数的值。

    因此,10,2返回2

    !!""

    ""是一个空字符串,它是一个虚值。

    注意:0、空字符串""、null 和undefined都是虚值。

    ! 是逻辑上的 "非 "运算符,把 true 变成 false,反之亦然。

    如果我们使用两次!,也就是!!,它将把一个正常的值转换成一个布尔值。所以!""返回 false

    +!![]

    数组都是真值,甚至是空数组。所以!![]将返回true

    !![]; // -> true

    +号会将真值转换为其数字表示: 1,所以 +!![] 返回 1

    true == "true"

    双等运算符(==)检查其两个操作数是否相等,并返回一个布尔值结果。

    根据抽象的双等比较规则,这两个值在比较时都被转换为数字。

    true == "true" ==> Number(true) == Number("true") ==> 1 == NaN

    所以,ture =="true" 返回false。

    010 - 03

    这里有一个小小的技巧:如果一个数字以0开头,那么在JavaScript中它就被当作一个八进制数字。所以:

    010 - 03 ==> 8 - 3 ==> 5

    另外:

    image.png

    ""--""

    这看起来是一个错误的语法,但它确实工作正常。

    空字符串可以被转换为布尔值false或数字值0。所以 -""0

    image.png

    null + 0

    正如我们之前所说,null是一个虚值。它将被转换为布尔值false或数字值0。所以结果返回 0

    0/0

    这是一个非法的数学表达式。方程0/0没有任何有意义的数字答案,输出的结果只是NaN

    1/0 === 10 1000**

    虽然1/0和之前一样也是一个非法的数学表达式。但是当除数不是0时,JavaScript认为这个表达式的结果是Infinity

    image.png

    10**1000是一个很大数字,JS 无法正确表示这个数字。(JavaScript中最高的整数值是2^53-1)。所以10 * 1000也被当作无限大(Infinity)。

    无穷大总是等于另一个无穷大,所以1/0 === 10 ** 1000返回 true。

    true++

    这没有什么特别的,这只是一个语法错误。

    image.png

    ""- 1

    虽然加法运算符(+)同时用于数字和字符串,但减法运算符(-)对字符串没有用处,所以JavaScript将其解释为数字之间的操作。一个空的字符串会被类型强制为0。

    "" - 1 ==> Number("") - 1 ==> 0 - 1 ==> -1

    所以 "" — 1 返回 -1

    (null - 1) - "1"

    正如上面所说。

    null ==>  0
    (null - 1) ==> -1
    "1" ==> 1

    所以 (null — 1) — “1” 返回 -2

    38 4343 2342+ ("true" - 0)

    你可能会怀疑JS是如此疯狂,以至于它将字符串 "true" 转换为布尔值 true 的数字表示。然而,它并没有那么疯狂。实际发生的情况是,它试图将字符串转换为数字,但失败了。

    Number("true"); // -> NaN

    在JavaScript的数字运算中,只要有一个值是NaN,运算的最终结果就一定是NaN。38 * 4343 * 2342只是一个烟雾弹。

    5 + !5 + !!5

    正如上面所说。

    所以:

    !5 ==> 0
    !!5 ==> 1

    [] + [1] + 2

    试图在数组之间使用加法运算符(+)时,它们会被转换为字符串。

    [] ==> ''
    [1] ==> '1'
    [] + [1] ==> '1'
    '1' + 2 ==> '12'

    所以结果是'12'。

    image.png

    1 + 2 + "3"

    JavaScript 从左到右执行这些操作。当数字3与字符串3相加时,字符串连接将优先进行。

    1 + 2; // -> 3
    3 + "3"; // -> "33"

    总结

    坦率地说,这些挑战并没有为我胶们编码技能提供任何价值,所以不应该在实际项目中写这种代码

    但是,把这些技巧作为朋友和同事之间的一些装13,不是一件非常有趣的事情吗?

    作者:Marina Mosti

    来源:medium

    原文:https://medium.com/frontend-canteen/20-useless-but-funny-challange-for-javascript-develor-9eea39bb8efb

    【相关视频教程推荐:web前端

    以上就是20个稀奇古怪的JS表达式,猜猜输出结果吧!的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript
    上一篇:聊聊怎么使用Node.js创建一个简单的HTTP服务器 下一篇:JavaScript日期对象Date(总结分享)
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• javascript是事件驱动的吗• JavaScript弱映射与弱集合知识详解• 什么是javascript对象的属性值• javascript中什么是继承• JavaScript对象和数组的解构赋值基础详解• 简单聊聊JavaScript中的事件监听
    1/1

    PHP中文网