25 道神奇的 javascript 示例

前言

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

背景

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

用例

1. true + false

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

💡 说明：

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

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) 是数值类型, 然后
			a. 如果 x 是 NaN, return false.
			b. 如果 y 是 NaN, return false.
			c. … … …

遵循 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

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];
		// ->
	    [1, 2, 3].join() + [4, 5, 6].join();	// joining
		// ->
		"1,2,3" + "4,5,6";	// concatenation
		// ->
		("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. null、undefined 和 Number

如果我们传递
null
或不把任何参数传递到

Number

构造函数中，我们将得到

0

。
undefined
是一个赋值形参，没有实际的参数，所以您可能期望

Number

将
undefined
作为参数的值。然而，当我们通过
undefined
，我们将得到
NaN
。

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

💡 说明：

根据规范：

如果没有参数传递给这个函数，让 n 为 +0 ；
否则，让 n 调用 ToNumber(value)；
如果值为 null ，那么 ToNumber(undefined) 应该返回 0 ；
如果值为 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

💡 说明：

JS 在处理数值的时候，如果数值小数位数超过 6 位，就会转换为科学计数法，整数的多于 21 位也会转为科学计数法。

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; // -> 4

嗯… 🤔

💡 说明：

我们可以用

Number

构造函数强制转化成数值。很明显，

true

将被强制转换为

1

：

		Number(true); // -> 1

一元加运算符尝试将其值转换成数字。它可以转换整数和浮点的字符串表示，以及非字符串值

true

，

false

和

null

。如果它不能解析特定的值，它将转化为

NaN

。这意味着我们可以更容易地强制将

true

换成

1

：

		+ true; // -> 1

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

如果参数是

true

, 返回 1 。如果参数是

false

返回 +0。

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

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
运算符的工作原理：

浅谈 instanceof 和 typeof 的实现原理

19. [] 和 null 是对象

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

💡 说明：

typeof

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

根据规范，

typeof

操作符返回一个字符串。对于没有

[[Call]]

实现的

null

、普通对象、标准特异对象和非标准特异对象，它返回字符串

“object”

；

typeof

在判断一个

object

的数据的时候只能告诉我们这个数据是

object

, 而不能细致的具体到是哪一种

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.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

对象。但是，不建议扩展不属于规范的行为定义。

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']

注：转载自

掘金(前端小菜鸡之菜鸡互啄)

的文章：

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

前言

背景

用例

1. true + false

2. true 是 false

3. baNaNa

4. NaN 不是一个 NaN

5. 它是 fail

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

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

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

9. 最小值大于零

10. 函数不是函数

11. 数组相加

12. 数组中的逗号

13. 数组相等是一个怪物

14. null、undefined 和 Number

15. parseInt 是一个坏蛋

16. true 和 false 数学运算

17. HTML 注释在 JavaScript 中有效

18. NaN 不是一个数值

19. [] 和 null 是对象

20. 神奇的数字增长

21. 0.1 + 0.2 精度计算

22. 扩展数字的方法

23. 三个数字的比较

24. 有趣的数学

25. 字符串不是 String 的实例

你可能也喜欢

21.
`0.1 + 0.2`
精度计算