大疆前端一面附答案分析

每天刷一篇面经，争取早日上岸！！！

大疆校招前端一面

ES6的新特性有哪些？
async的实现原理
css左固定右自适应
讲一下同源策略
csrf的防御方法
token放在什么位置？

开始查答案！

1.ES6的新特性：

1）const和let。都是块级作用域，const用来定义常量、必须初始化、不能重新赋值，let定义变量。使用要注意暂时性死区问题（因为两个都不会进行变量提升）。

2）模板字面量。在``内写表达式，${}表示占位符。

3）解构赋值。

4）对象字面量简写法。使用和分配的名称一样比如 name：name 就可以简写成 name

5）for of 循环。可以迭代任何可以迭代的，除了对象。

6）...展开运算符。

7）箭头函数

8）class

9）import、export导入导出

10）Set（集合）、Map（字典）。主要用于数组去重、数据存储。

11）Symbol。基本类型，产生唯一值。

2.async的实现原理

最开始的回调函数是callback，同步回调，需要等待，尤其进行需要顺序执行的就会产生大名鼎鼎的回调地狱。然后就有了promise进行异步执行，无需等待回调通过.then()直接进行在一个异步操作，但还是有缺点，无法精准的捕获错误。所以就加上了generator生成器，然后promise+generator就组成异步迭代生成器，也就是每次promise决议之后yied停一下，看一下有没有错误，没错误继续下一个，这样就可以实现错误的捕获了。但是这样实现起来是很麻烦的，就在这时候ES6推出了async..await 就是上面异步迭代生成器的语法糖，更好用了，但底层是一个意思。有了这样的一个思路，去查代码实现什么的就好理解了。

3.css左固定右自适应

方法一：浮动。让左边浮动脱离文档流并设置固定宽度，然后右边设置overflow为auto。

.left {
    float: left; 
    width: 200px;
    height: 200px;
    background-color: aqua;
}
.right {
    overflow: auto;
    height: 300px;
    background-color: bisque;
}

方法二：绝对定位。左边设置为绝对定位固定宽度（也是脱离了文档流），右边设置margin-left为左边宽度。

.left {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: aqua;
}
.right {
    margin-left: 200px;
    height: 300px;
    background-color: bisque;
}

4.讲一下同源策略

浏览器的安全功能。同源是指协议、域名、端口号要一致。如果不同源会产生跨域问题。

5.csrf的防御方法

1）验证 HTTP Referer 字段。该字段记录了请求的来源地址，每次都进行检查请求地址和网站域名是否相同，不同则判定为csrf攻击。缺点，有一些浏览器可以篡改Referer字段，有些浏览器也可以设置请求头不懈怠Referer字段。

2）在请求地址中添加token。添加一些从cookie中获取不到的信息，然后生成随机token，最后服务端截取验证，如果没有或者不对则判定为csrf攻击。

6.token放在什么位置？

前端token可以存放在webStorage中，sessionStorage关闭浏览器自动清除，localStorage长期有效。在每次发送请求的时候都在header中带上token。

今天发生了点事情，时间很紧迫！就只能先写这么多了！白白～

#大疆##面经##校招##前端工程师#