1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 <style>
8 table {
9 margin: 200px auto;
10 border-collapse: collapse;
11 }
12
13 td {
14 border: 1px solid black;
15 padding: 5px 10px;
16 }
17 </style>
18 </head>
19 <body>
20 <div id="app">
21 <table>
22 <thead>
23 <tr>
24 <th>值类型</th>
25 <th>window.isNaN</th>
26 <th>Number.isNaN</th>
27 <th>对比结果</th>
28 </tr>
29 </thead>
30 <tbody></tbody>
31 </table>
32 </div>
33 <script src=""></script>
34 <script>
35 const values = new Map([
36 ['数字', 1],
37 ['undefined', undefined],
38 ['null', null],
39 ['空字符串', ''],
40 ['数字类型字符串', '1'],
41 ['非数字类型字符串', 'a'],
42 ['空数组', []],
43 ['仅包含一个数字的数组', [1]],
44 ['包含多个数字的数组', [1, 2]],
45 ['包含非数字的数组', ['a', 'b']],
46 ['朴素的空对象', {}],
47 ['朴素的非空对象', { a: 1 }],
48 ['true', true],
49 ['false', false],
50 ['NaN', 1 / 'a'],
51 ]);
52 const TBODY = document.querySelector('TBODY');
53 const firstFragment = document.createDocumentFragment();
54 const endFragment = document.createDocumentFragment();
55 const isNaNs = [Number.isNaN, window.isNaN];
56 values.forEach((value, key) => {
57 const TR = document.createElement('tr');
58 if(key === 'NaN') {
59 TR.style.backgroundColor = '#32bfb1';
60 }
61 const startTD = document.createElement('td');
62 startTD.innerText = key;
63 TR.appendChild(startTD);
64 let i = isNaNs.length;
65 let isNaN = [];
66 while (i--) {
67 const TD = document.createElement('td');
68 isNaN.push((TD.innerText = isNaNs[i](value)));
69 TR.appendChild(TD);
70 }
71 const endTD = document.createElement('td');
72 endTD.innerText = isNaN[0] === isNaN[1] ? '√' : '×';
73 TR.appendChild(endTD);
74 if (isNaN[0] === isNaN[1]) {
75 endFragment.appendChild(TR);
76 } else {
77 firstFragment.appendChild(TR);
78 }
79 });
80 TBODY.appendChild(firstFragment);
81 TBODY.appendChild(endFragment);
82 tail('推断：window.isNaN 判断的标准是，是否可以转换为数字，不能转换的就是 true，能转换的就是 false');
83 tail('推断：Number.isNaN 修复了上面的问题，只有 NaN会返回 true，其余情况一律返回 false');
84 function tail(text) {
85 const TR = document.createElement('tr');
86 const TD = document.createElement('td');
87 TD.setAttribute('colspan', '4');
88 TD.innerText = text;
89 TR.appendChild(TD);
90 TBODY.appendChild(TR);
91 }
92 </script>
93 </body>
94 </html>
