window.isNaN 和 Number.isNaN 对比 

 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>

 

posted @ 2024-01-26 10:36  万物有序  阅读(94)  评论(0)    收藏  举报