wtfjs：一个接近20k关注的有趣JS项目(上）

最新推荐文章于 2024-10-01 18:51:18 发布

前端开发博客

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量435

点赞数

文章标签：字符串 javascript java js html

原文链接：https://github.com/denysdovhan/wtfjs/blob/master/README-zh-cn.md

版权

关注公众号前端开发博客，回复“加群”

加入我们一起学习，天天进步

点击阅读原文直达

项目：https://github.com/denysdovhan/wtfjs

中文翻译：https://github.com/denysdovhan/wtfjs/blob/master/README-zh-cn.md

一个有趣和棘手的 JavaScript 示例列表。

JavaScript 是一种很好的语言。它有一个简单的语法，庞大的生态系统，以及最重要，最伟大的社区。

同时，我们都知道，JavaScript 是一个非常有趣又充满戏法的语言。他们中的有些可以迅速将我们的日常工作变成地狱，有些可以让我们大声笑起来。

WTFJS 的原创思想属于 Brian Leroux。这个列表受到他的讲话的高度启发 “WTFJS” at dotJS 2012：

???????? 动机

只是为了好玩

— “只是为了好玩：一个意外革命的故事”, Linus Torvalds

这个列表的主要目的是收集一些疯狂的例子，并解释它们如何工作，如果可能的话。只是因为学习以前不了解的东西很有趣。

如果您是初学者，您可以使用此笔记来深入了解 JavaScript。我希望这个笔记会激励你花更多的时间阅读规范。

如果您是专业开发人员，您可以将这些示例视为您公司新手访问问题和测验的重要资源。同时，这些例子在准备面试时会很方便。

无论如何，读读看。也许你会为自己找到新的东西。

✍???? 符号

// -> 用于显示表达式的结果。例如：

1 + 1; // -> 2

// > 意思是 console.log 或其他输出的结果。例如：

console.log("hello, world!"); // > hello, world!

// 只是一个解释的评论。例如：

// Assigning a function to foo constant
const foo = function() {};

???? 例子

`[]` 等于 `![]`

数组等于一个数组取反：

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

???? 说明：

12.5.9 逻辑非运算符 (!)
7.2.13 抽象相等比较

true 是 false

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

???? 说明：

考虑一下这一步：

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

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

7.2.13 抽象相等比较

baNaNa

"b" + "a" + +"a" + "a";

用 JavaScript 写的老派笑话：

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

???? 说明：

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

12.8.3 加法运算符 (+)

`NaN` 不是一个 `NaN`

NaN === NaN; // -> false

???? 说明：

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

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

— 7.2.14 严格模式相等比较

遵循 IEEE 的“NaN”的定义：

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

— “对于 IEEE754 NaN 值的所有比较返回 false 的理由是什么？” at StackOverflow

它是 fail

你不会相信，但...

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

???? 说明：

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

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

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

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

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

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

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

`[]` 是 `true`, 但它不等于 `true`

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

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

???? 说明：

以下是 ECMA-262 规范中相应部分的链接：

12.5.9 逻辑非运算符 (!)
7.2.13 抽象相等比较

`null` 是 false, 但又不等于 `false`

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

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

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

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

???? 说明：

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

7.2.13 抽象相等比较

`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 是因为这个有意的对标准的违反明确地允许了这一点。

— “Obsolete features - document.all” at WhatWG - HTML spec — “Chapter 4 - ToBoolean - Falsy values” at YDKJS - Types & Grammar

最小值大于零

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

Number.MIN_VALUE > 0; // -> true

???? 说明：

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

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

— “为什么在 JavaScript 中0小于Number.MIN_VALUE？” at StackOverflow

20.1.2.9 Number.MIN_VALUE

函数不是函数

⚠️ 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 … … …

???? 说明：

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

数组相加

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

[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");

数组中的逗号

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

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

???? 说明：

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

— Trailing commas at MDN

数组相等是一个怪物

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

[] == ''   // -> 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 规范描述了这些行为。

`undefined` 和 `Number`

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

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

???? 说明：

根据规范：

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

这是相应的部分：

20.1.1 Number 构造器函数
7.1.3 ToNumber(argument)

`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(null, 24) === 23… wait, what?” at StackOverflow

不要忘记八进制：

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。

`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)

HTML 注释在 JavaScript 中有效

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

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

???? 说明：

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

由于 Node.js 基于 V8 引擎，Node.js 运行时也支持类似 HTML 的注释。而且，它们是规范的一部分：

B.1.3 类似 HTML 的注释

`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)

`[]` 和 `null` 是对象

typeof []; // -> 'object'
typeof null; // -> 'object'

// 然而
null instanceof Object; // false

???? 说明：

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

12.5.5 typeof 操作符

根据规范，typeof 操作符返回一个字符串 Table 35: typeof Operator Results。对于没有 [[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]'

神奇的数字增长

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

???? 说明：

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

6.1.6 The Number Type
IEEE 754 on Wikipedia

`0.1 + 0.2` 精度计算

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

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

???? 说明：

”浮点计算坏了？” 问题的答案在 StackOverflow:

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

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

扩展数字的方法

您可以添加自己的方法来包装对象，如 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 属性的列表：

20.1 Number Objects

三个数字的比较

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

详细了解规范中的关系运算符：

12.10 Relational Operators

有趣的数学

通常 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 方法。详细了解规范中的求值过程：

12.8.3 The Addition Operator (+)
7.1.1 ToPrimitive(input [,PreferredType])
7.1.12 ToString(argument)

正则表达式的加法

你知道可以做这样的运算吗？

// Patch a toString method
RegExp.prototype.toString =
  function() {
    return this.source;
  } /
  7 /
  -/5/; // -> 2

???? 说明：

21.2.5.10 get RegExp.prototype.source

字符串不是 `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']

有关规范中的 String 构造函数的更多信息：

21.1.1 The String Constructor

用反引号调用函数

我们来声明一个返回所有参数的函数：

function f(...args) {
  return args;
}

毫无疑问，你知道你可以这样调用这个函数：

f(1, 2, 3); // -> [ 1, 2, 3 ]

但是你知道你可以使用反引号来调用任何函数吗？

f`true is ${true}, false is ${false}, array is ${[1, 2, 3]}`;
// -> [ [ 'true is ', ', false is ', ', array is ', '' ],
// ->   true,
// ->   false,
// ->   [ 1, 2, 3 ] ]

???? 说明：

那么，如果你熟悉 标签模板字面量 ，这根本就不是魔术。在上面的例子中，f 函数是模板字面量的标签。模板文字之前的标签允许您使用函数解析模板文字。标签函数的第一个参数包含字符串值的数组。其余的参数与表达式有关。例：

function template(strings, ...keys) {
  // 用字符串和键做一些事情
}

这是 React 社区很流行的库???? styled-components的背后的秘密。

规范的链接：

12.3.7 Tagged Templates

调用调用调用

发现于 @cramforce

console.log.call.call.call.call.call.apply(a => a, [1, 2]);

???? 说明：

注意，可能会打破你的头脑！尝试在您的头脑中重现此代码：我们使用apply方法应用call方法。阅读更多：

19.2.3.3 Function.prototype.call(thisArg, ...args)
**19.2.3.1 ** Function.prototype.apply(thisArg, argArray)

一个 `constructor` 属性

const c = "constructor";
c[c][c]('console.log("WTF?")')(); // > WTF?

???? 说明：

让我们逐步考虑一下这个例子：

// 声明一个新的常字符串 'constructor'
const c = "constructor";

// c 是一个字符串
c; // -> 'constructor'

// 获取字符串的构造函数
c[c]; // -> [Function: String]

// 获取构造函数的构造函数
c[c][c]; // -> [Function: Function]

// 调用函数构造函数并将新函数的主体作为参数传递
c[c][c]('console.log("WTF?")'); // -> [Function: anonymous]

// 然后调用这个匿名函数得到的结果是一个字符串 'WTF'
c[c][c]('console.log("WTF?")')(); // > WTF

一个 Object.prototype.constructor 返回一个引用对象的构造函数创建的实例对象。在字符串的情况下，它是 String ，在数字的情况下它是 Number 等等。

Object.prototype.constructor at MDN
19.1.3.1 Object.prototype.constructor

将对象做为另一个对象的 key

{ [{}]: {} } // -> { '[object Object]': {} }

???? 说明：

为什么这样工作？这里我们使用 已计算的属性名称 。当这些方括号之间传递一个对象时，它会将对象强制转换成一个字符串，所以我们得到一个属性键 [object Object] 以及值是 {} 。

我们可以把括号地狱搞成这样：

({ [{}]: { [{}]: {} } }[{}][{}]); // -> {}

// 结构:
// {
//   '[object Object]': {
//     '[object Object]': {}
//   }
// }

这里阅读更多关于对象字面量：

Object initializer at MDN

访问原型 `proto`

正如我们所知道的，原始数据（premitives）没有原型。但是，如果我们尝试为原始数据获取一个 __proto__ 的值，我们会得到这样的一个结果：

(1).__proto__.__proto__.__proto__; // -> null

???? 说明：

这是因为原始数据的没有原型，它将使用 ToObject 方法包装在包装器对象中。所以，一步一步：

(1)
  .__proto__(
    // -> [Number: 0]
    1
  )
  .__proto__.__proto__(
    // -> {}
    1
  ).__proto__.__proto__.__proto__; // -> null

以下是关于 __proto__的更多信息：

B.2.2.1 Object.prototype.proto
7.1.13 ToObject(argument)

`${{Object}}`

下面的表达式结果如何？

`${{ Object }}`;

答案是：

// -> '[object Object]'

???? 说明：

我们通过 简写属性表示 使用一个 Object 属性定义了一个对象：

{
  Object: Object;
}

然后我们将该对象传递给模板文字，因此 toString 方法调用该对象。这就是为什么我们得到字符串 '[object Object]'。

12.2.9 Template Literals
Object initializer at MDN

使用默认值解构

考虑这个例子：

let x,
  { x: y = 1 } = { x };
y;

上面的例子是面试中的一个很好的任务。y 有什么值？答案是：

// -> 1

???? 说明：

let x,
  { x: y = 1 } = { x };
y;
//  ↑       ↑           ↑    ↑
//  1       3           2    4

以上示例：

我们声明 x 没有赋值，所以它是 'undefined`。
然后我们将 x 的值打包到对象属性 x 中。
然后我们使用解构来提取 x 的值，并且要将这个值赋给 y。如果未定义该值，那么我们将使用 1 作为默认值。
返回 y 的值。

Object initializer at MDN

点和扩展运算符

数组的扩展可以组成有趣的例子。考虑这个：

[...[..."..."]].length; // -> 3

???? 说明：

为什么是 3？当我们使用扩展运算符时，@@iterator 方法会被调用，而返回的迭代器用于获取要迭代的值。字符串的默认迭代器按字符展开字符串。展开之后，我们把这些字符打包成一个数组。然后再展开这个数组并再打包回数组。

一个 '...' 字符串包含 . ，所以结果数组的长度将 3。

现在，一步一步的看：

[...'...']             // -> [ '.', '.', '.' ]
[...[...'...']]        // -> [ '.', '.', '.' ]
[...[...'...']].length // -> 3

显然，我们可以展开和包装数组的元素任意多次，只要你想：

[...'...']                 // -> [ '.', '.', '.' ]
[...[...'...']]            // -> [ '.', '.', '.' ]
[...[...[...'...']]]       // -> [ '.', '.', '.' ]
[...[...[...[...'...']]]]  // -> [ '.', '.', '.' ]
// 以此类推 …

嵌套标签

a: b: c: d: e: f: g: 1, 2, 3, 4, 5; // -> 5

???? 说明：

像以前的例子一样，请遵循以下链接：

12.16 逗号运算符(,)
13.13 标签语句
标签语句 at MDN

阴险的 `try..catch`

这个表达式将返回什么？2 还是 3？

(() => {
  try {
    return 2;
  } finally {
    return 3;
  }
})();

答案是 3。惊讶吗？

???? 说明：

13.15 try 语句

未完，请看下一篇。

最后

关注公众号：前端开发博客，后台回复以下关键字：

回复「1024」领取前端进阶资料
回复「电子书」领取海量面试和JS资料
回复「资料」领取前端群分享及培训机构的资料
回复「Vue」获取 Vue 精选文章
回复「面试」获取面试精选文章
回复「JS」获取 JavaScript 精选文
回复「CSS」获取 CSS 精选文章

“在看”吗？在看就点一下吧

前端开发博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

wtfjs：一个接近20k关注的有趣JS项目(上）

???????? 动机

✍???? 符号

???? 例子

[] 等于 ![]

???? 说明：

true 是 false

???? 说明：

baNaNa

???? 说明：

NaN 不是一个 NaN

???? 说明：

它是 fail

???? 说明：

[] 是 true, 但它不等于 true

???? 说明：

null 是 false, 但又不等于 false

???? 说明：

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

???? 说明：

最小值大于零

???? 说明：

函数不是函数

???? 说明：

数组相加

???? 说明：

数组中的逗号

???? 说明：

数组相等是一个怪物

???? 说明：

undefined 和 Number

???? 说明：

parseInt 是一个坏蛋

true 和 false 数学运算

???? 说明：

HTML 注释在 JavaScript 中有效

???? 说明：

NaN 不是一个数值

???? 说明：

[] 和 null 是对象

???? 说明：

神奇的数字增长

???? 说明：

0.1 + 0.2 精度计算

???? 说明：

扩展数字的方法

???? 说明：

三个数字的比较

???? 说明：

有趣的数学

???? 说明：

正则表达式的加法

???? 说明：

字符串不是 String 的实例

???? 说明：

用反引号调用函数

???? 说明：

调用 调用 调用

???? 说明：

一个 constructor 属性

???? 说明：

将对象做为另一个对象的 key

???? 说明：

访问原型 __proto__

???? 说明：

`${{Object}}`

???? 说明：

使用默认值解构

???? 说明：

点和扩展运算符

???? 说明：

标签

???? 说明：

嵌套标签

???? 说明：

阴险的 try..catch

???? 说明：

相关文章

最后

`[]` 等于 `![]`

`NaN` 不是一个 `NaN`

`[]` 是 `true`, 但它不等于 `true`

`null` 是 false, 但又不等于 `false`

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

`undefined` 和 `Number`

`parseInt` 是一个坏蛋

`true` 和 `false` 数学运算

`NaN` 不是一个数值

`[]` 和 `null` 是对象

`0.1 + 0.2` 精度计算

字符串不是 `String` 的实例

调用调用调用

一个 `constructor` 属性

访问原型 `proto`

阴险的 `try..catch`