头条日常实习生面经2018.11.28

第一次大公司面试的面经

此次面试说来也有点匆忙，本没想过自己会那么快就想去面试大公司，并且把自己第一次面大公司的各种不足展现得一览无余。当时11月20号左右身边一位朋友给了一位人超nice的师兄的内推，并且鼓励我去投简历。最终战胜了自己的胆怯，投了一份简历给内推的师兄。一两天后hr就打电话安排面试了。

没想到面试是要连续着面的，当时面花了一个多小时过了一面，再花一个小时面二面，最终也止于二面。接下来就是本文的主题了。我把当时面试官通过牛课网在线面试平台中写给我做的题记录了下来，其实从面试前就打算把面试学到的东西积累下来。接下来就进入本文的主题了，我也尽量把每一道题都写上我的解题思路，希望能得到大家更多更好的意见。

一面

一、请问运行这段代码会输出什么。

let obj = {
        name: 'bytedance',
        getName() {
            return this.name
        }
    }
    let fb = obj.getName;
    fb();

A：我当时好像是答 undefined 。但我知道这不会是输出 ”bytedance“ ，因为当 obj.getNam e赋给 fb 的时候它的 this 也改变了，具体可以看我之前总结了一篇 JavaScript 中的 this 的文章。然后我后来我在浏览器中运行了一下代码发现是输出 "" 。。。

二、设计一个简单的任务队列，要求分别在1,3,4秒后打印出”1“，”2“，”3“

new Quene()
        .task(1000, () => {
            console.log(1)
        })
        .task(2000, () => {
            console.log(2)
        })
        .task(1000, () => {
            console.log(3)
        })
        .start()

    function Quene() { ... }

A：讲真，看到这道题的时候我第一时间感到自己完了，虽然也只写了一点，没有全部做出来，然后就跳过这道题了。面试完就努力着把这道题写出来

function Quene() {

        this.task = (time, callback) => {

            setTimeout(callback, time);
            // console.log(this)
            return this;
        };
        this.start = () => {
            return this;
        };

    }

虽然这样即使最后面不用写 .start() 也能打印出来。。。希望能得到指点Q_Q

三、给定一个升序整数数组[0,1,2,4,5,7,13,15,16]，找出其中连续出现的数字区间如下：

["0->2",”4->5“,"7","13","15->16"]

A:

function Arr(arr) {
        var len = arr.length,
            j,
            newArr = [],
            str = '';
        for (var i = 0; i < len; i++) {
            j = i;
            if (arr[i] + 1 === arr[j + 1]) {
                while (arr[j] + 1 === arr[j + 1]) {
                    str = '->' + arr[j + 1];
                    j++;
                }
                str = arr[i] + str;
                newArr.push(str)
                i = j
            } else {
                newArr.push(arr[i].toString())
            }
        }
        return newArr;
    }

还算比较简单的算法题吧，还好当时做出来了，不然可能就止步于此。。也希望大家能谈点自己对这道题的解法

四、TCP协议建立连接的过程、进程间通信的方式有哪些

TCP 建立连接的过程即为三次握手，三次握手可以参考我之前发的文章，网上也有很多资料，这里就不细讲。

至于进程间的通信方式，当时没能打出来（这就涉及到我的知识盲区了【哭丧脸】），后来网上查了一下，有：

pipe
FIFO
MessageQueue
SharedMemory
Semaphore
Socket
sinal

这里有个题外话，如果面试官问浏览器窗口间的通信，那么有以下几种：

1.localStore

localStorage.setItem("name", name);

2.cookie + setInterval

在页面 A 设置一个使用 setInterval 定时器不断刷新，检查 cookie 的值是否发生变化，如果变化就进行刷新的操作。

由于 cookie 是在同域可读的，所以在页面 B 改变 cookie 的值，页面 A 是可以拿到的。

五、用纯CSS创建一个三角形的原理是什么？如何实现？

A：用CSS创建一个三角形的原理是分别设置上下左右的 border 属性，中间内容为0面积。实现：

#box {
      width: 0;
      height: 0;
      border-left: 50px transparent solid;
      border-right: 50px transparent solid;
      border-top: 50px transparent solid;
      border-bottom: 50px black solid;
}

六、0.1 + 0.2 > 0.3 返回什么？

A： true 。分别转成2进制。

七、类数组对象是什么？

刚开始还对这个类数组感到懵逼，后来面试官一提醒函数的参数马上领悟到就是伪数组。

A：只包含使用从零开始，且自然递增的整数做键名，并且定义了 length 表示元素个数的对象。

• function内部的arguments对象就是一个类数组对象
• DOM方法document.getElementsByTagName()...也是返回一个类数组对象

八、什么是同源策略，为什么会有这种策略

源包括三个部分：协议、域名、端口（HTTP协议的默认端口是 80 ）。如果其中有任何一个部分不同，则源不同。即为跨域。

限制一个源加载的文档或脚本与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。（来自 MDN 的解释）

九、什么CORS

A：受同源策略的限制，支持跨域；一种新的通信协议标准。可以理解成同时支持同源和跨域的 Ajax 。

MDN 解释：跨域资源共享( CORS ) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

十、什么是OPTIONS请求

A： OPTIONS 请求是 HTTP 请求的一种方法，返回服务器针对特定资源所支持的 HTTP 请求方法，也可以利用向 web 服务器发送 ‘*’ 的请求来测试服务器的功能性

然后一面就这样结束了，面试官也直接跟我说我通过了一面，我也问了一些问题后就结束面试了。我赶紧把平台上的面试记录记下来，过了几分钟，当我还沉浸在通过一面的愉悦和全身心已经放松了的情况下，发现手机有几个未接电话，然后又再打进了一个，接通电话后对方是头条hr小姐姐，问我说现在可以二面了，二面的面试官已经在平台上等着了。。。好吧，这太突然了，我马上赶赴战场。

<hr/>

二面

一、fetch

A： Fetch API 提供了一个获取资源的接口（包括跨域请求）。无论请求成功与否，它都返回一个 Promise 对象；

二、用Promise实现延迟3秒后输出 delay(3000).then(f,e)

A:

function delay(timer) {
        return new Promise(function(resolve, reject) {
            setTimeout(function() {
                resolve();
            }, timer)
        })
    }

三、XSS/CSRF

XSS ：跨站脚本（ Cross-site scripting ）

通过提交或其他方式例如发布评论，其中含有 HTML 或 JavaScript 的代码，如果服务器没有过滤掉这些脚本，这些脚本在一些情况下就可能会运行。

1. 避免 XSS 的方法之一就是过滤用户提供的内容，如 <,>,script ;
2. cookie 设置 HttpOnly 属性

CSRF ：跨站请求伪造（ Cross-site request forgery ）

是一种劫持受信任用户向服务器发送非预期请求的攻击方式，即在用户登陆某个平台化拿到用户的登陆凭证后发送伪造请求

1. 防范 CSRF 的方法之一就是通过验证码
2. Referer Check ，根据 HTTP 协议，在 HTTP 头中有一个字段叫 Referer ，它记录了该 HTTP 请求的来源地址。通过 Referer Check ，可以检查请求是否来自合法的”源”。
3. 添加 token 验证，可以在 HTTP 请求中以参数的形式加入一个随机产生的 token ，该 token 不存在与 cookie 中，并在服务器端建立一个拦截器来验证这个 token ，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。

四、图片懒加载原理 （lazy image）

var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲，如果在执行中，则直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        // 这里加载图片
        console.log("函数节流");
        canRun = true;
    }, 500);
};

五、上传图片

1. 表单上传

(1). 提供 form 表单， method 必须是 post 。

(2). form 表单的 enctype 必须是 multipart/form-data 。

1. ajax 上传

• ajax 和 FormData 可实现页面无刷新的文件上传效果

六、将一些ES6的新特性

可以参考之前写的文章，不过当时到了后面真是精疲力竭，连 let 和 const 都没有说出来。。。

七、jsbridge

问到这个概念的时候我不清楚，记得当前前一两天掘金刚发一篇相关的文章给我，然而当时没去看。。

JSBridge 简单来讲，主要是 给 JavaScript 提供调用 Native 功能的接口，让混合开发中的“前端部分”可以方便地使用地址位置、摄像头甚至支付等 Native 功能。是 Native 和非 Native 之间的桥梁，它的核心是构建 Native 和非 Native 间消息通信的通道，而且是双向通信的通道。

二面其中也包含一些 IQ 题，还有后面问我如果实习能实习多久我说3个月。之后第二天就收到把我简历”丢进“公司人才库的邮件了。

当然这只是其中一部分题目，一些面试官口头问的我当时面试完真是超级累也忘了记录下来。总之，感觉头条还是会比较重视算法和新技术。

希望这一两个月能够好好把握，春招再战！！