25 道神奇的 javascript 示例，全答对算我输！！！

迷南。 2022-09-02 04:05 108阅读 0赞

![9a5991fe56143933ebd10f9463cefef8.png][]

## 前言 ##

> JavaScript 是一种很好的语言。它有一个简单的语法，庞大的生态系统，以及最重要，最伟大的社区。同时，我们都知道，JavaScript 是一个非常有趣又充满戏法的语言。他们中的有些可以迅速将我们的日常工作变成地狱，有些可以让我们大声笑起来。

## 背景 ##

> 这些示例的主要目的是收集一些疯狂的例子，并解释它们如何工作，如果可能的话。只是因为学习以前不了解的东西很有趣。如果您是初学者，您可以阅读此文章来深入了解 JavaScript。我希望这个文章会激励你花更多的时间阅读规范。如果您是专业开发人员，您可以将这些示例视为您公司新手访问问题和测验的重要资源。同时，这些例子在准备面试时会很方便。无论如何，读读看。也许你会为自己找到新的东西。

## 例子 ##

### 1. true + false ###

Number(true); // -> 1
    Number(false); // -> 0
    1 + 0; // -> 1

### ???? 说明： ###

布尔值被转换为它们的数字表示

### 2. true 是 false ###

!!"false" == !!"true"; // -> true
    !!"false" === !!"true"; // -> true

### ???? 说明： ###

考虑一下这一步：

true == "true"; // -> true
    false == "false"; // -> false
    
    // 'false' 不是空字符串，所以它的值是 true
    !!"false"; // -> true
    !!"true"; // -> true

### 3. baNaNa ###

"b" + "a" + +"a" + "a"; // baNaNa

用 JavaScript 写的老派笑话：

"foo" + +"bar"; // -> 'fooNaN'

### ???? 说明： ###

这个表达式可以转化成 `'foo' + (+'bar')`，但无法将`'bar'`强制转化成数值。

### 4. `NaN` 不是一个 `NaN` ###

NaN === NaN; // -> false

### ???? 说明： ###

规范严格定义了这种行为背后的逻辑：

> 1.  如果 `Type(x)` 不同于 `Type(y)`, return false.
> 2.  如果 `Type(x)` 数值, 然后
> 3.  1.  如果 `x` 是 NaN, return false.
>     2.  如果 `y` 是 NaN, return false.
>     3.  … … …

遵循 IEEE 的“NaN”的定义：

> 有四种可能的相互排斥的关系：小于，等于，大于和无序。 当至少一个操作数是 NaN 时，便是最后一种情况。每个 NaN 都要比较无穷无尽的一切，包括自己。

### 5. 它是 fail ###

你不会相信，但...

(![] + [])[+[]] +
      (![] + [])[+!+[]] +
      ([![]] + [][[]])[+!+[] + [+[]]] +
      (![] + [])[!+[] + !+[]];
    // -> 'fail'

### ???? 说明： ###

将大量的符号分解成片段，我们注意到，以下表达式经常出现：

![] + []; // -> 'false'
    ![]; // -> false

所以我们尝试将`[]`和`false`加起来。 但是通过一些内部函数调用（`binary + Operator` \- >`ToPrimitive` \- >`[[DefaultValue]` \]），我们最终将右边的操作数转换为一个字符串：

![] + [].toString(); // 'false'

将字符串作为数组，我们可以通过`[0]`来访问它的第一个字符：

"false"[0]; // -> 'f'

现在，其余的是明显的，可以自己弄清楚！

### 6. `[]` 是 `true`, 但它不等于 `true` ###

!![]       // -> true
    [] == true // -> false

### ???? 说明： ###

数组是一个`true`，但是它不等于`true`。

### 7. `null` 是 false, 但又不等于 `false` ###

尽管 `null` 是 `false`，但它不等于 `false`。

!!null; // -> false
    null == false; // -> false

同时，其他的一些等于 false 的值，如 `0` 或 `''` 等于 `false` 。

0 == false; // -> true
    "" == false; // -> true

### ???? 说明： ###

跟前面的例子相同。这是一个相应的链接：

*  7.2.13 抽象相等比较

### 8. `document.all` 是一个 object，但又同时是 undefined ###

> ⚠️ 这是浏览器 API 的一部分，对于 Node.js 环境无效 ⚠️

尽管 document.all 是一个 array-like object 并且通过它可以访问页面中的 DOM 节点，但在通过 `typeof` 的检测结果是 `undefined`。

document.all instanceof Object; // -> true
    typeof document.all; // -> 'undefined'

同时，`document.all` 不等于 `undefined`。

document.all === undefined; // -> false
    document.all === null; // -> false

但是同时：

document.all == null; // -> true

### ???? 说明： ###

> `document.all` 曾经是访问页面 DOM 节点的一种方式，特别是在早期版本的 IE 浏览器中。它从未成为标准，但被广泛使用在早期的 JS 代码中。当标准演变出新的 API 时（例如 `document.getElementById`）这个 API 调用就被废弃了，标准委员会必须决定如何处理它。因为它被广泛使用嗯他们决定保留这个 API 但引入一个有意的对 JavaScript 的标准的违反。 其与 `undefined` 使用严格相等比较得出 `false` 而使用抽象相等比较 得出 `true` 是因为这个有意的对标准的违反明确地允许了这一点。

### 9. 最小值大于零 ###

`Number.MIN_VALUE` 是最小的数字，大于零：

Number.MIN_VALUE > 0; // -> true

### ???? 说明： ###

> `Number.MIN_VALUE` 是 `5e-324` ，即可以在浮点精度内表示的最小正数，即可以达到零。 它定义了浮点数的最高精度。

> 现在，整体最小的值是 `Number.NEGATIVE_INFINITY` ，尽管这在严格意义上并不是真正的数字。

### 10. 函数不是函数 ###

> ⚠️ V8 v5.5 或更低版本中出现的 Bug（Node.js <= 7） ⚠️

你们所有人都知道的关于讨厌的 *undefined 不是 function* ，但是这个呢？

// Declare a class which extends null
    class Foo extends null {}
    // -> [Function: Foo]
    
    new Foo() instanceof null;
    // > TypeError: function is not a function
    // >     at … … …

### ???? 说明： ###

这不是规范的一部分。这只是一个错误，现在它已被修复，所以将来不会有这个问题。

### 11. 数组相加 ###

如果您尝试两个数组相加呢？

[1, 2, 3] + [4, 5, 6]; // -> '1,2,34,5,6'

### ???? 说明： ###

会发生合并。一步一步地，它是这样的:

[1, 2, 3] +
      [4, 5, 6][
        // joining
        (1, 2, 3)
      ].join() +
      [4, 5, 6].join();
    // concatenation
    "1,2,3" + "4,5,6";
    // ->
    ("1,2,34,5,6");

### 12. 数组中的逗号 ###

您已经创建了一个包含 4 个空元素的数组。尽管如此，你还是会得到一个有三个元素的，因为后面的逗号：

let a = [, , ,];
    a.length; // -> 3
    a.toString(); // -> ',,'

### ???? 说明： ###

> 尾逗号 (有时也称为“最后逗号”) 在向 JavaScript 代码中添加新元素、参数或属性时有用。如果您想添加一个新属性，您可以简单地添加一个新行，而不用修改以前的最后一行，如果该行已经使用了后面的逗号。这使得版本控制比较清洁和编辑代码可能不太麻烦。

### 13. 数组相等是一个怪物 ###

数组进行相等比较是一个怪物，看下面的例子：

[] == ''   // -> true
    [] == 0    // -> true
    [''] == '' // -> true
    [0] == 0   // -> true
    [0] == ''  // -> false
    [''] == 0  // -> true
    
    [null] == ''      // true
    [null] == 0       // true
    [undefined] == '' // true
    [undefined] == 0  // true
    
    [[]] == 0  // true
    [[]] == '' // true
    
    [[[[[[]]]]]] == '' // true
    [[[[[[]]]]]] == 0  // true
    
    [[[[[[ null ]]]]]] == 0  // true
    [[[[[[ null ]]]]]] == '' // true
    
    [[[[[[ undefined ]]]]]] == 0  // true
    [[[[[[ undefined ]]]]]] == '' // true

### ???? 说明： ###

你应该非常小心留意上面的例子！ 7.2.13 Abstract Equality Comparison 规范描述了这些行为。

### 14. `undefined` 和 `Number` ###

如果我们不把任何参数传递到 `Number` 构造函数中，我们将得到 `0` 。`undefined` 是一个赋值形参，没有实际的参数，所以您可能期望 `NaN` 将 `undefined` 作为参数的值。然而，当我们通过 `undefined` ，我们将得到 `NaN` 。

Number(); // -> 0
    Number(undefined); // -> NaN

### ???? 说明： ###

根据规范：

1.  如果没有参数传递给这个函数，让 `n` 为 `+0` ;
2.  否则，让 `n` 调用 `ToNumber(value)`
3.  如果值为 `undefined`,那么 `ToNumber(undefined)` 应该返回 `NaN`.

### 15. `parseInt` 是一个坏蛋 ###

`parseInt` 它以的怪异而出名。

parseInt("f*ck"); // -> NaN
    parseInt("f*ck", 16); // -> 15

\*\*???? 说明：

\*\* 这是因为 `parseInt` 会持续通过解析直到它解析到一个不识别的字符，`'f*ck'` 中的 `f` 是 16 进制下的 `15`。

解析 `Infinity` 到整数也很有意思…

//
    parseInt("Infinity", 10); // -> NaN
    // ...
    parseInt("Infinity", 18); // -> NaN...
    parseInt("Infinity", 19); // -> 18
    // ...
    parseInt("Infinity", 23); // -> 18...
    parseInt("Infinity", 24); // -> 151176378
    // ...
    parseInt("Infinity", 29); // -> 385849803
    parseInt("Infinity", 30); // -> 13693557269
    // ...
    parseInt("Infinity", 34); // -> 28872273981
    parseInt("Infinity", 35); // -> 1201203301724
    parseInt("Infinity", 36); // -> 1461559270678...
    parseInt("Infinity", 37); // -> NaN

也要小心解析 `null`：

parseInt(null, 24); // -> 23

???? 说明：

> 它将 `null` 转换成字符串 `'null'` ，并尝试转换它。 对于基数 0 到 23，没有可以转换的数字，因此返回 NaN。 在 24，`“n”` ，第 14 个字母被添加到数字系统。 在 31，`“u”` ，添加第 21 个字母，可以解码整个字符串。 在 37 处，不再有可以生成的有效数字集，并返回 `NaN` 。

不要忘记八进制：

parseInt("06"); // 6
    parseInt("08"); // 8 如果支持 ECMAScript 5
    parseInt("08"); // 0 如果不支持 ECMAScript 5

???? 说明：

这是因为 `parseInt` 能够接受两个参数，如果没有提供第二个参数，并且第一个参数以 `0` 开始，它将把第一个参数当做八进制数解析。

`parseInt` 总是把输入转为字符串：

parseInt({ toString: () => 2, valueOf: () => 1 }); // -> 2
    Number({ toString: () => 2, valueOf: () => 1 }); // -> 1

解析浮点数的时候要注意

parseInt(0.000001); // -> 0
    parseInt(0.0000001); // -> 1
    parseInt(1 / 1999999); // -> 5

???? 说明： `ParseInt` 接受字符串参数并返回一个指定基数下的证书。`ParseInt` 也去除第一个字符串中非数字字符（字符集由基数决定）后的内容。`0.000001` 被转换为 `"0.000001"` 而 `parseInt` 返回 `0`。当 `0.0000001` 被转换为字符串时它被处理为 `"1e-7"` 因此 `parseInt` 返回 `1`。`1/1999999` 被转换为 `5.00000250000125e-7` 而 `parseInt` 返回 `5`。

### 16. `true` 和 `false` 数学运算 ###

我们做一些数学计算：

true +
      true(
        // -> 2
        true + true
      ) *
        (true + true) -
      true; // -> 3

嗯… ????

### ???? 说明： ###

我们可以用 `Number` 构造函数强制转化成数值。 很明显，`true` 将被强制转换为 `1` ：

Number(true); // -> 1

一元加运算符尝试将其值转换成数字。 它可以转换整数和浮点的字符串表示，以及非字符串值 `true` ，`false` 和 `null` 。 如果它不能解析特定的值，它将转化为 `NaN` 。 这意味着我们可以更容易地强制将 `true` 换成 `1`

+true; // -> 1

当你执行加法或乘法时，`ToNumber`方法调用。 根据规范，该方法返回：

> 如果 `参数` is true , 返回 1 。 如果 `参数` 是 false 返回 +0。

这就是为什么我们可以进行进行布尔值相加并得到正确的结果

相应部分：

*  12.5.6 一元 `+` 运算符
 *  12.8.3 加法运算符（`+`）
 *  7.1.3 ToNumber(`argument`)

### 17. HTML 注释在 JavaScript 中有效 ###

你会留下深刻的印象，`<!--` (这是 HTML 注释）是一个有效的 JavaScript 注释。

// 有效注释
    <!-- 也是有效的注释

### ???? 说明： ###

感动吗? 类似 HTML 的注释旨在允许不理解标签的浏览器优雅地降级。这些浏览器，例如 Netscape 1.x 已经不再流行。因此，在脚本标记中添加 HTML 注释是没有意义的。

由于 Node.js 基于 V8 引擎，Node.js 运行时也支持类似 HTML 的注释。

### 18. `NaN` 不是一个数值 ###

尽管 `NaN` 类型是 `'number'` ，但是 `NaN` 不是数字的实例：

typeof NaN; // -> 'number'
    NaN instanceof Number; // -> false

### ???? 说明： ###

`typeof` 和 `instanceof` 运算符的工作原理：

*  12.5.5 `typeof` 操作符
 *  12.10.4 Runtime Semantics: InstanceofOperator(`O`,`C`)

### 19. `[]` 和 `null` 是对象 ###

typeof []; // -> 'object'
    typeof null; // -> 'object'
    
    // 然而
    null instanceof Object; // false

### ???? 说明： ###

`typeof` 运算符的行为在本节的规范中定义：

根据规范，`typeof` 操作符返回一个字符串 。对于没有 `[[Call]]` 实现的 `null`、普通对象、标准特异对象和非标准特异对象，它返回字符串 `"object“`。

但是，您可以使用 `toString` 方法检查对象的类型。

Object.prototype.toString.call([]);
    // -> '[object Array]'
    
    Object.prototype.toString.call(new Date());
    // -> '[object Date]'
    
    Object.prototype.toString.call(null);
    // -> '[object Null]'

### 20. 神奇的数字增长 ###

999999999999999; // -> 999999999999999
    9999999999999999; // -> 10000000000000000

### ???? 说明： ###

这是由 IEEE 754-2008 二进制浮点运算标准引起的。

### 21. `0.1 + 0.2` 精度计算 ###

来自 JavaScript 的知名笑话。`0.1` 和 `0.2` 相加是存在精度错误的

0.1 +
      0.2(
        // -> 0.30000000000000004
        0.1 + 0.2
      ) ===
      0.3; // -> false

### ???? 说明： ###

浮点计算坏了:

> 程序中的常量 `0.2` 和 `0.3` 也将近似为真实值。最接近 `0.2` 的 `double` 大于有理数 `0.2` ，但最接近 `0.3` 的 `double` 小于有理数 `0.3`。`0.1` 和 `0.2` 的总和大于有理数 `0.3`，因此不符合您的代码中的常数判断。

这个问题是众所周知的，甚至有一个网站叫 0.30000000000000004.com。

### 22. 扩展数字的方法 ###

您可以添加自己的方法来包装对象，如 `Number` 或 `String` 。

Number.prototype.isOne = function() {
      return Number(this) === 1;
    };
    
    (1.0).isOne(); // -> true
    (1).isOne(); // -> true
    (2.0)
      .isOne()(
        // -> false
        7
      )
      .isOne(); // -> false

### ???? 说明： ###

显然，您可以像 JavaScript 中的任何其他对象一样扩展 `Number` 对象。但是，不建议扩展不属于规范的行为定义。以下是 `Number` 属性的列表：

### 23. 三个数字的比较 ###

1 < 2 < 3; // -> true
    3 > 2 > 1; // -> false

### ???? 说明： ###

为什么会这样呢？其实问题在于表达式的第一部分。以下是它的工作原理：

1 < 2 < 3; // 1 < 2 -> true
    true < 3; // true -> 1
    1 < 3; // -> true
    
    3 > 2 > 1; // 3 > 2 -> true
    true > 1; // true -> 1
    1 > 1; // -> false

我们可以用 *大于或等于运算符（`>=`）*：

3 > 2 >= 1; // true

### 24. 有趣的数学 ###

通常 JavaScript 中的算术运算的结果可能是非常难以预料的。 考虑这些例子：

3  - 1  // -> 2
     3  + 1  // -> 4
    '3' - 1  // -> 2
    '3' + 1  // -> '31'
    
    '' + '' // -> ''
    [] + [] // -> ''
    {} + [] // -> 0
    [] + {} // -> '[object Object]'
    {} + {} // -> '[object Object][object Object]'
    
    '222' - -'111' // -> 333
    
    [4] * [4]       // -> 16
    [] * []         // -> 0
    [4, 4] * [4, 4] // NaN

### ???? 说明： ###

前四个例子发生了什么？这是一个小表，以了解 JavaScript 中的添加：

Number  + Number  -> addition
    Boolean + Number  -> addition
    Boolean + Boolean -> addition
    Number  + String  -> concatenation
    String  + Boolean -> concatenation
    String  + String  -> concatenation

剩下的例子呢？在相加之前，`[]` 和 `{}` 隐式调用 `ToPrimitive` 和 `ToString` 方法。

### 25. 字符串不是 `String` 的实例 ###

"str"; // -> 'str'
    typeof "str"; // -> 'string'
    "str" instanceof String; // -> false

### ???? 说明： ###

`String` 构造函数返回一个字符串：

typeof String("str"); // -> 'string'
    String("str"); // -> 'str'
    String("str") == "str"; // -> true

我们来试试一个 `new`：

new String("str") == "str"; // -> true
    typeof new String("str"); // -> 'object'

对象？那是什么？

new String("str"); // -> [String: 'str']

> 注： 部分内容参考自[jsisweird][]

[9a5991fe56143933ebd10f9463cefef8.png]: /images/20220829/61150251fe0446778c4a87686e370a55.png
[jsisweird]: https://mp.weixin.qq.com/s?__biz=MzIwNTA4NzI1Mw%3D%3D&idx=1&mid=2247485033&scene=21&sn=28ec26dcd5bd76c9f30029770cdb6f67#wechat_redirect