面试题 + Promise

面试题

CSS 实现水平垂直居中
- 未脱离文档流弹性盒子

display:flex;
algin-items:center
justify-content: center;

　　display: table-cell;

div{
     260px;
    height: 230px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
img{
    vertical-align: middle;
}

脱离文档流 margin auto

div{
       300px;
      height: 300px;
      position: relative;
      border: 1px solid #465468;
 }
 img{
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
 }

　　脱离文档流负margin

.container{
       500px;
      height: 400px;
      border: 2px solid #379;
      position: relative;
 }
 .inner{
       480px;
      height: 380px;
      background-color: #746;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -190px; /*height的一半*/
      margin-left: -240px; /*width的一半*/
 }

flex的属性
父项属性

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

子项属性
- order 排序
- flex 复合属性属性定义子项目分配剩余空间，用flex来表示占多少份数。
- align-self
```
设置自己在侧轴上的排列方式
```
CSS transition的实现效果和有哪些属性
- 　　是复合属性。检索或设置对象变换时的过渡效果。
- transition-property规定设置过渡效果的 CSS 属性的名称。transition-duration规定完成过渡效果需要多少秒或毫秒。transition-timing-function规定速度效果的速度曲线。transition-delay定义过渡效果何时开始。
CSS 实现沿Y轴旋转360度
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction

animation:rotate .8s infinite;

@keyframes rotate{
    from{ -webkit-transform:rotateY(360deg);}
    to{ -webkit-transform:rotateY(0deg);}     
}

好，那来点JS 基本数据类型有哪些用什么判断

number string Nan symbol boolean undefined null
typeof 对于基本类型，除了 null 都可以显示正确的类型

Object.prototype.toString.call(xx)

数组怎么判断
```
Object.prototype.toString.call([1,2])
```
引用类型和基本类型的区别

1、引用类型可以动态的给添加属性，
2、但是基本类型的值是不可变也不可以复制的 

变量的不同内存分配
原始值：存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。这是因为这些原始类型占据的空间是固定的，所以可将他们存储在较小的内存区域 – 栈中。这样存储便于迅速查寻变量的值。
引用值：存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存地址。这是因为：引用值的大小会改变，所以不能把它放在栈中，否则会降低变量查寻的速度。相反，放在变量的栈空间中的值是该对象存储在堆中的地址。地址的大小是固定的，所以把它存储在栈中对变量性能无任何负面影响。

两种类型在复制值的什么有什么区别？
基本类型复制值的时候，会重新在变量对象上创建一个新值，然后把值赋值到新变量分配的空间上来（理解为栈中的空间）；

引用类型复制时，也会在储存在变量对象中的值复制一份放到为新变量分配的空间上来，但是不同的是新复制的值是一个指针，指向原值所在堆内存中的地址；

什么是栈？什么是堆？
手写翻转字符串

方案一

var str = "abcdef"; 
console.log( str.split("").reverse().join("") )；');

方案二

let list = []
let zxd = "yyds"
for(let i =zxd.length -1 ; i>=0; i--){
   list.push(zxd[i])      
}
list.join("")

手写 Sum（1，2，3）的累加（argument）
es5

function sum(){
return Array.from(arguments).reduce((a,b)=>{
return a+b
},0)
}

es6

function sum(...arg){
return arg.reduce((a,b)=>{
return a+b
},0)
}

箭头函数和普通函数的区别（上题忘记了argument，面试官特意问这个问题提醒我，奈何基础太差救不起来了...泪目）

1：写法不一样

2：普通函数存在变量提升的现象

3：箭头函数不能作为构造函数使用

4：两者this的指向不同

5：箭头函数的arguments指向它的父级函数所在作用域的arguments

6：箭头函数没有new.target

数组去重的方法
```
Array.from(new Set(arr))
```
图片懒加载

document.documentElement.clientHeight//获取屏幕可视区域的高度

element.offsetTop//获取元素相对于文档顶部的高度

document.documentElement.scrollTop//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片懒加载</title>
    <style>
        img {
            display: block;
             100%;
            height: 300px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <img data-src="./images/1.jpg" alt="">
    <img data-src="./images/2.jpg" alt="">
    <img data-src="./images/3.jpg" alt="">
    <img data-src="./images/4.jpg" alt="">
    <img data-src="./images/5.jpg" alt="">
    <img data-src="./images/6.jpg" alt="">
    <img data-src="./images/7.jpg" alt="">
    <img data-src="./images/8.jpg" alt="">
    <img data-src="./images/9.jpg" alt="">
    <img data-src="./images/10.jpg" alt="">
    <img data-src="./images/1.jpg" alt="">
    <img data-src="./images/2.jpg" alt="">
</body>
<script>
        var imgs = document.querySelectorAll('img');

        //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }

        function lazyLoad(imgs) {
            var H = document.documentElement.clientHeight;//获取可视区域高度
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }

        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
            lazyLoad(imgs);
        }
</script>
</html>

View Code

https://zhuanlan.zhihu.com/p/55311726

跨域产生的原因，同源策略是什么
域名/端口/协议相同的策略。。
说说你了解的解决办法（只说了JSONP和CORS）
Cookie、sessionStorage、localStorage的区别
get 和 post 的区别（只说了传参方式和功能不同，面试官问还有吗其他的不知道了...）
问了一下项目，react
对ES6的了解（Promise果真逃不了....)
let var const的区别
知道Promise嘛？聊聊对Promise的理解？（说了一下Promise对象代表一个异步操作，有三种状态，状态转变为单向...)
那它是为了解决什么问题的？（emmm当异步返回值又需要等待另一个异步就会嵌套回调，Promise可以解决这个回调地狱问题）
那它是如何解决回调地狱的？（Promise对象内部是同步的，内部得到内部值后进行调用.then的异步操作，可以一直.then .then ...)
好，你说可以一直.then .then ...那它是如何实现一直.then 的？（emmm... 这个.then链式调用就是...额这个...）
Promise有哪些方法 all和race区别是什么
具体说一下 .catch() 和 reject （...我人麻了...）