面试题系列 —— 2 零碎的属性相关知识

面试题系列 —— 2

1. null 和 undefined

概述

null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别。

var a = undefined;
// 或者
var a = null;

上面代码中，变量a分别被赋值为undefined和null，这两种写法的效果几乎等价。

在if语句中，它们都会被自动转为false，相等运算符（==）甚至直接报告两者相等。

if (!undefined) {
  console.log('undefined is false');
}
// undefined is false

if (!null) {
  console.log('null is false');
}
// null is false

undefined == null
// true

从上面代码可见，两者的行为是何等相似！

Number(null) // 0
5 + null // 5

区别是这样的：null是一个表示“空”的对象，转为数值时为0；undefined是一个表示"此处无定义"的原始值，转为数值时为NaN。

Number(undefined) // NaN
5 + undefined // NaN

用法和含义

对于null和undefined，大致可以像下面这样理解。

null表示空值，即该处的值现在为空。调用函数时，某个参数未设置任何值，这时就可以传入null，表示该参数为空。比如，某个函数接受引擎抛出的错误作为参数，如果运行过程中未出错，那么这个参数就会传入null，表示未发生错误。

---

2. == 和 === 和 object.is()

简单来说： == 代表相同， ===代表严格相同, 为啥这么说呢，

大白话理解

1. == ：（1）两个值类型相同，若相等，则为true

（2）如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：

1）如果一个是null，一个是undefined，那么相等

2）如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较

2. === ：（1）如果类型不同，就一定不相等(=== 不会像之前那样进行类型转换再比较)

（2）如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN， 只能使用isNaN( ) 来判断）

（3）如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。

（4）如果两个值都是true，或是false，那么相等

（5）如果两个值都引用同一个对象或是函数，那么相等，否则不相等

（6）如果两个值都是null，或是undefined，那么相等（这里null 与 undefined 不全等）

console.log(null == undefined) //true

console.log(" " == 0)          //true

console.log( "0" == 0)         //true

console.log(" " != "0")        //true

console.log( 123 == "123")     //true

console.log( + 0 == -0)        //true

console.log( + 0 === -0)       //true

console.log(NaN == NaN)        //false

console.log( NaN === NaN)     //false

3. object.is（） ：

   ​ 再说Object.is()，其行为与===基本一致，不过有两处不同：

   1. +0不等于**-0**。
   2. NaN等于自身。

   +0 === -0 //true
   NaN === NaN // false
   
   Object.is(+0, -0) // false
   Object.is(NaN, NaN) // true
   

---

3.Flex布局

• flex-direction 项目的排列方向

  .box {
    flex-direction: row | row-reverse | column | column-reverse;
  }
  
  row（默认值）：主轴为水平方向，起点在左端。
  row-reverse：主轴为水平方向，起点在右端。
  column：主轴为垂直方向，起点在上沿。
  column-reverse：主轴为垂直方向，起点在下沿。
  

• flex-wrap 换行的设置

  .box{
    flex-wrap: nowrap | wrap | wrap-reverse;
  }
  
  （1）nowrap（默认）：不换行。
  （2）wrap：换行，第一行在上方。
  （3）wrap-reverse：换行，第一行在下方。
  

• flex-flow

• justify-content 项目在主轴上的对齐方式

  .box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
  }
  
  flex-start（默认值）：左对齐
  flex-end：右对齐
  center： 居中
  space-between：两端对齐，项目之间的间隔都相等。
  space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  

• align-items 项目在交叉轴上如何对齐

  .box {
    align-items: flex-start | flex-end | center | baseline | stretch;
  }
  
  flex-start：交叉轴的起点对齐。
  flex-end：交叉轴的终点对齐。
  center：交叉轴的中点对齐。
  baseline: 项目的第一行文字的基线对齐。
  stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  

• align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  .box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  }
  
  flex-start：与交叉轴的起点对齐。
  flex-end：与交叉轴的终点对齐。
  center：与交叉轴的中点对齐。
  space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  stretch（默认值）：轴线占满整个交叉轴。