每日思考（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;
       100px;
      height: 90px;
    }
    .heart:before,
    .heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
       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'