May-周记（2）

1. 垂直居中七种方式

  <div class="parent">
    <div class="child">son</div>
  </div>

// 1. line-height + text-algin
.parent {
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.child {
}

// 2. text-align + vertail-align
.parent {
  text-align: center;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

// 3. table-cell + vertail-align
.parent {
  display: table-cell;
  vertical-align: middle;
}
.child {
}

// 4. position + margin
.parent {
  position: relative;
}
.child {
  width: 100px;
  height: 100px;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}

// 5.position + transform
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 6. flex
.parent {
  display: flex;
}
.child {
  align-items: center;
  justify-content: center;
}

//7. 100%高度的 after 加上 inline-block
    .parent{
      width: 200px;
      height: 200px;
      background-color: #f00;
      text-align: center;
      /* display:table */
    }
    .parent::after{
       content: '';
       display: inline-block;
       width: 0;
       height: 100%;
       vertical-align: middle;
    }
    .child{
      display:inline-block;
      width: 100px;
      height: 100px;
      vertical-align: middle;
      text-align: center;
      background-color: #f0f;
    }

2. (5).add(3).minus(2)输出6

Number.prototype.add = function (value) {
   let number = parseFloat(value);
   if (typeof number !== 'number' || Number.isNaN(number)) {
     throw new Error('请输入数字或者数字字符串～');
   };
   return this + number;
 };
 Number.prototype.minus = function (value) {
   let number = parseFloat(value);
   if (typeof number !== 'number' || Number.isNaN(number)) {
     throw new Error('请输入数字或者数字字符串～');
   }
   return this - number;
 };
 console.log((5).add(3).minus(2));

3. 作用域

var a = 1;
(function a () {
    a = 2;
    console.log(window.a);
})();
// 1
var a = 1;
(function x () {
    a = 2;
    console.log(a);
})();
// 2
var a=10
function aaa(a){
    console.log(a);//10
    var a=20;  //因为 a 是形参，优先级高于 var a; 所以 局部变量a的声明其实被忽略了。
}
aaa(a);

4.Sleep()休眠

//  方法一

 function sleep(time) {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve(time)
     }, time)
   })
 }

 sleep(5000).then((time) => {
   console.log(`你睡了${time / 1000}s，然后做你的事情`)
 })
 // 方法二

 async function sleep2(time) {
   await sleep(time)
   // then do you thing
   console.log(`你睡了${time / 1000}s，然后做你的事情`)
   // async 函数返回的是一个promise对象
 }
 // 方法三
 // 通过generator 还是返回一个promise，这个不知道具体的意义,这和返回一个普通的promise有区别么

 function* sleep3(time) {
   yield new Promise(resolve => {
     setTimeout(resolve, time)
   })
 }

 sleep3(5000).next().value.then(() => {
   console.log("睡了一会儿，然后做你做的事情")
 })
 // 方法四
 // 通过传统的setTimeout去做

 function sleep4(func, time) {
   setTimeout(func, time)
 }

5.很棒的一道js题

function test(person) {
  person.age = 26
  person = {
    name: 'yyy',
    age: 30
  }
  return person
}

var p1 = {
  name: 'yck',
  age: 25
}
var p2 = test(p1)
console.log(p1) // -> ?{ name: 'yck', age: 26 } 相当于全局变量被隐式
console.log(p2) // -> ?{ name: 'yyy', age: 30 }

6.parseInt()与严格== ===

parseInt('1',0)//如果parseInt()函数的第二个参数省略或者为0，默认以10进制转换
判断 返回
        两个值类型不同 false
        两个值都是null / undefined / true / false true
        两个值其中之一为NaN false
        两个值都为数值且值相等 true
        两个值都为字符串且值相等 true
        两个值都指向同一个引用类型 true

        1 === "1" // false
        true === true // true
        undefined === undefined // true
        null === null // true
        1 === 1 // true
        NaN === NaN // false
          +
          0 === -0 // true
        ({} === {}) // false
        [] === [] // false
        (function () {} === function () {}) // false
        var v1 = {};
        var v2 = v1; //两个值引用同一个对象
        v1 === v2 // true
        null == undefined 返回true
        一个是对象， 另一个是数字或者字符串， 把对象转成基本类型值再比较
        else false

        123 == 123; //true
        '123' == 123; //true，'123'会转成成数值123
        false == 0; //true，false 转成数值就是0
        'a' == 'A'; //false，转换后的编码不一样
        123 == {}; //false，执行toString()或valueOf()会改变
        123 == NaN; //false，只要有NaN，都是false
        {} == {}; //false，比较的是他们的地址，每个新创建对象的引用地址都不同

        null == undefined //true
        'NaN' == NaN //false
        123 == NaN //false
        NaN == NaN //false
        false == 0 //true
        true == 1 //true
        true == 2 //false
        undefined == 0 //false
        null == 0 //false
        '123' == 123 //true
          '123' === 123 //false

        && 判断
        用在条件表达式中， 规则是：

        num1 && num2
        true true true
        true false false
        false true false
        false false false
        用在语句中， 规则是：

        result = expression1 && expression2
        如果expression1的计算结果为false， 则result为expression1。 否则result为expression2

          (1 - 1) && (x += 1) // 0
        (2 > 1) && (5 + 5) // 10
        (2 + 1) && (5 + 5) // 10
        ||判断
        用在条件表达式中，规则是：

        num1 || num2
        true    true     true
        true    false    true
        false   true     true
        false   false    false
        用在语句中，规则是：

        如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个运算子求值
        如果第一个运算子的布尔值为false，则返回第二个运算子的值
        ||运算符一般在业务代码中做条件表达式判断和容错处理，我们在取数据时取不到的情况下，又不能影响后面的业务代码，就需要进行容错。||就是一个非常好的容错写法，相当于提供一个备用数据。

        var data = undefined || backup_data; //请求出错，数据为undefined时，就去备用数据backup_data