每日思考（2020/03/17）

题目概览

html直接输入多个空格为什么只能显示一个空格?
用CSS绘制一个红色的爱心
对数据类型转换的理解是什么

题目解答

html直接输入多个空格为什么只能显示一个空格?

该行为由 CSS white-space 控制，其默认值 normal 的表现即为多个空格压缩成一个

设置为pre-wrap，pre等属性值,可以显示多个空格

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 `<pre>`标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 `<br>` 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

用CSS绘制一个红色的爱心

.heart {
      position: relative;
      width: 100px;
      height: 90px;
    }
    .heart:before,
    .heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    .heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }

对数据类型转换的理解是什么

数据等于判断时的类型转换

它们只转换到类型相同即可的

[-1] > 0;    // false，实为 -1 > 0
[-1] > '';   // true，实为 '-1' > ''

// 这也就是下例结果的原因
0 == '0';   // true
0 == [];    // true
'0' == [];  // false

而 Boolean 类型的值会被转成数字类型
```
'0' == true;  // false，实为 0 == 1
```

而字母字符串比大小于的判断又有点不一样

'1' > '-1';   // true，实则为 1 > -1，反例 '1' > '1.1' 为 false
'a' > 'A';    // true，实则为 97 > 65，反例 'a' > 'b' 为 false
'a' > -1;     // false，这里不知是不是转成了 NaN > -1
'a' > '';     // true，这个也不知是不是 97 > undefined

NaN 基本无法判断，也不等于自身

NaN > -1;      // false
NaN  === NaN;  // false

在 -0 方面有个特例，但如果会判分母不为零的话就没这个顾虑了
```
0 === -0;           // true
(1/-0) === (1/0);   // false
```

而 null 和 undefined 非常独特，初步认为是，等于判断时其不做类型转换，大小于判断时不知

null > 0;     // false
null == 0;    // false
null >= 0;    // true

undefined == undefined;  // true
undefined <= undefined;  // false

if 等判断只做 Boolean() 转换

包括 if ?: && ||。

Number 与 parse 函数

Number 比 parseInt 能转化更多，比如 "" Infinity [] true 都会被 parseInt 返回 NaN，而 Number 有值。

Number('');     // 0
parseInt('');   // NaN

Number([1, 2]);    // NaN
parseInt([1, 2]);  // 1

Number(null);          // 0
Number(undefined);     // NaN
parseInt(null);        // NaN
parseInt(undefined);   // NaN

此外，两者对数字化的处理也有区别

Number('1.') == parseInt('1.') == parseInt('1,') == 1
Number('1x') == NaN

计算时的类型转换

+' 014'   // 14
+'0x12'   // 18

1 + '14'    // '114'
1 + '0x12'  // '10x12'
1 + +'14'   // 15
'14' + 1    // '141'

1 + [1, 1];     // '11,1'
1 + {};         // '1[object Object]'

1 + null;       // 1
1  +undefined;  // NaN

++'14'    // ReferenceError

Infinity+Infinity;      // Infinity
-Infinity+(-Infinity);  // -Infinity
Infinity+(-Infinity);   // NaN

+0+(+0);     // 0
(-0)+(-0);   // -0
(+0)+(-0);   // 0

toString 的注意项

String(null);        // 'null'
(null).toString();        // Uncaught TypeError
(undefined).toString();   // Uncaught TypeError

(30).toString(16);    // "1e"
('30').toString(16);  // "30"

[1,[2,"abc","",0,null,undefined,false,NaN],3].toString();
// "1,2,abc,,0,,,false,NaN,3"

(null).toString();   // Uncaught TypeError
[null].toString();   // ''

JSON.stringify 的注意项

JSON.stringify(Infinity);   // 'null'
JSON.stringify(NaN);        // 'null'
JSON.stringify(undefined);        // undefined （注：非字符串）
JSON.stringify([undefined]);      // '[null]'
JSON.stringify({a: undefined});   // '{}'
JSON.stringify({a: null});        // '{"a":null}'
JSON.stringify(() => {});         // 'undefined'