小米前端面筋

一面

面试官比较nice，问的比较基础，我不会的地方也会主动给我讲解，给人感觉很棒~

自我介绍

惯例自我介绍~

常见的http状态码

我就从100,20X,30x,40x,50x把常见的讲了一遍。

100：表示信息正在处理
100 continue：到目前为止都很正常，客户端持续发送请求。
20x:成功类状态码
200 OK：请求成功。
30x：重定向状态码
301 Moved Permanently：永久重定向，表示资源已经永久移到了新位置。
302 Found：临时重定向。
304 Not Modified：如果请求报文首部包含一些条件，例如：if-match，if-modified-since，if-none-match，if-UNmodified-since，如果不满足条件，则服务器会返回304状态码。自从上次请求过，请求的网页未修改。
307 Temporary Redirect：临时重定向，与302含义类似，但是307不会强制浏览器把重定向的post请求改为get请求。
40x：客户端错误，表示客户端请求出错或无法完成请求
400 Bad Request：请求报文存在语法错误。
401 Unauthorized：表示请求需要有认证信息。
403 Forbidden：请求被拒绝。
404 Not Found：服务端无法根据请求找到资源。
50x：服务器错误
500 Internal Server Error：服务器内部错误，无法完成请求。
503 service unavailable：服务器暂时处于超负载状态或停机维护状态，无法处理请求。

状态码200和304的产生场景

自然就过渡到了缓存问题，答了浏览器强缓存和协商缓存的机制。

get请求和post请求的区别

get请求一般用于想服务器请求数据，请求参数会携带在URL中，因为浏览器URL长度的限制，请求携带的参数大小也有限制，因为在URL中相对不安全。
post请求一般用于修改数据或提交表单，请求报文大小无限制，刷新页面会提出重新提交表单，相对要安全。

百度输入查询信息是什么get还是post

应该是get请求吧，百度的请求时可以缓存在URL中的。

浏览器的同源策略

浏览器同源指域名、协议和端口名均相同。

常见的跨域方式

答了jsonp,cors,nginx,domain

jsonp：最经典的跨域方案。利用<script>标签不受同源策略限制的特性进行跨域操作，实现简单，兼容性好。包含两部分：回调函数和数据。
回调函数是当相应到来时要放在当前页面被调用的函数。
数据就是传入回调函数中的json数据，就是回调函数的参数。
cors：是目前最主流的跨域方案。跨站资源共享（CORS）是一种机制，他使用自定义的http头来告诉浏览器，让运行在同一个origin（domain）上的web应用被准许访问来自不同服务器上的指定的资源。
Nginx:最方便的跨域方案。nginx是一款强大的web服务器，其特点就是轻量级、启动快、高并发。我们用node开发的服务通常都需要经过nginx的反向代理。
其他跨域方案：
postMessage:允许来自不用域的脚本采用异步方式进行有限的通信，跨域实现跨文本域、多窗口、跨域消息传送。
WebSocket：是一种双向通信协议，在建立连接之后，websocket的server和client都能主动像对方发送和接收数据，连接建立好了之后，client与server之间的双向通信就与http无关了。
document.domain：该方式只能用于二级域名相同的情况下。

jsonp跨域有什么缺点

我答了是能发送get请求。面试官还给我讲了jsonp在处理错误时的不足，不能准确的判断错误，学到了。

前端可能发生的安全问题

XSS(跨站脚本攻击)和CSRF(跨站伪造请求)。

XSS(跨站脚本攻击)是指攻击者在 Web 页面中插入恶意脚本包括 HTML 和 JavaScript，当用户浏览页面时，促使脚本执行，从而达到攻击目的。攻击目的是为了获取存储在客户端的cookie信息，一旦获取，就会假冒身份与网站交互。
主要防范手段就是不要相信用户的任何输入，过滤其中的特殊字符或对HTML输出进行转义或设置cookie为httponly。

CSRF(跨站伪造请求)是攻击者盗用你的身份，以你的名义发送恶意请求。例如以你名义发送邮件，购买商品等。主要是登陆了信任网站，在本地生成了cookie，在不登出A的情况下，访问了危险网站B，由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去执行。
可以通过在后台进行token校验或输入验证码进行防范。
XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户浏览器的信任。

解释一下闭包？

我回答闭包就是可以访问一个函数内部变量的函数，它的构成一般是函数嵌套。面试官似乎不是很满意，接着给我出了道题~~

判断下列代码的输出？

var name = 'global';
var obj = {
    name:'obj',
    method:function() {
        this.name = 'local';
        return function() {
            return this.name;
        }
    }
}

console.log(obj.method().call(this));

由于这里传入的this指向的是window全局，因此输出应该是 global，我当时脑子有点迷糊，还打错了。

var name = 'global';
var obj = {
    name:'obj',
    method:function() {
        this.name = 'local';
        return function() {
            return this.name;
        }
    }
}

console.log(obj.method().call(obj));

接下来面试官又修改了最后传入的参数，这时this指向的是obj。

var name = 'global';
var obj = {
    name:'obj',
    method:() => {
        this.name = 'local';
        return () => {
            return this.name;
        }
    }
}

console.log(obj.method().call(obj));

若把函数更改为箭头函数，因为箭头函数没有this，这时this指向的还是window。

用过promise吗？

我回答了解，但是没用过，然后就把promise的三种状态讲了一下。面试官又给了我一道代码题！！

判断下列代码的输出

Promise.resolve(1)
    .then(x=>x+1)
    .then(x=>{throw new Error('error')})
    .catch(() => 3)
    .then(x => x+1)
    .then(x => console.log(x))
    .catch(console.error)

看到这道题的时候我特别懵，最后猜了个3，下去执行了一下代码，才发现结果是4.
当promise执行过程中抛出错误后，不管前面是什么结果，就只注重错误态的结果了，盲猜这里捕获带错误后执行了catch()，返回了3，接着then(x=>x+1)，最后结果是4？

面试官觉得代码题还没够吧，又出了一道数组展平的代码题

将嵌套的数组转化为扁平的数组。例如：输入[1,2,3,[4,’55’,[6]],[6,8]],输出[1,2,3,4,’55’,6,8]

当时想用数组的reduce方法来做这个题的，但是当时没有想起来代码，下面是我写的比较暴力的方法


const flat = function(arr) {
    let ret = [];
    arr.forEach(item => {
        if (typeof item == 'object') {
            ret = ret.concat(flat(item));
        }else {
            ret.push(item);
        }
    })
    return ret;
}

使用reduce的方法，两三行代码搞定：

const flat = function(arr) {
    return  arr.reduce((pre, cur) => {
        return pre.concta(typeof cur == 'object' ? flat(cur) : cur);
    }, []);
}

接着问了项目，问了最出彩的项目及项目中遇到的难点等等

我回答我有一个项目用jQuery实现了单页面模式，和实现了一套完整的权限控制等等。

我简历中项目介绍上写了自己写过分页组件，又问了数据库中控制数据分页的字段是啥

MySQL中应该就是limit字段吧，mongo中大概是from(x)->limit(y)这样。

你有什么问题要问我的吗？

我想到面试官全程都没有问到框架的问题，就问了技术栈，才知道面的面试官是做react的，我是做vue的。。。
面完牛客网的面试状态已经变成二面了，希望能进二面吧，如果我没有再更新的话那就凉了。

~9.24更新~

通知我明天二面，拒了…

9.11一面，都过两个星期了被捞起来，真是搞笑！