2018头条春招前端实习生面试题目总结

下午去了头条总部面试前端岗位，挂在二面...本身基础仍是有些差，在这里总结一下两轮面试的题目：

一轮面试

typeof实现的原理是什么？

https://ecma262.docschina.org/#sec-typeof-operator https://stackoverflow.com/questions/45462182/transform-a-javascript-object-to-function-manually https://stackoverflow.com/questions/29353177/what-is-base-value-of-reference-in-ecmascriptecma-262-5-1

js继承是如何实现的？原理是什么？

解释了一下js的原型链，但感受表达的不够清楚。发现内心明白是一回事，说明白又是另外一回事啊

给一个function A一个function B，A中有属性手写实现B继承A。并作到尽量优化的继承实现

当时准备写一下寄生组合式的继承方式，不过手写过程当中貌似写错很多内容，手写代码能力仍是要提升。 寄生组合式继承实现：

function inheritPrototype(SuperType, SubType) {
    var prototype = Object.create(SuperType.prototype);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

function SuperType(props) {
    this.props = props;
}

function SubType(props) {
    SuperType.call(this, props);
}

inheritPrototype(SuperType, SubType);
复制代码

具体到A和B即A为SuperType，B为SubType。
另附Object.create()的实现，在传入一个参数时Object.create()和下面的object()行为相同。(Object.create()可选传入第二个参数，其中能够定义新对象的额外属性，如Object.create(SuperType, {name: {value: 'Test'}})

function object(obj) {
    function F() {};
    F.prototype = obj;
    return new F();
}
复制代码

一个简单的算法题：求一个数组中第K大的数字

手写原生ajax请求

1. 写完后面试官在if (xhr.readyState == 4 && xhr.status == 200)的地方又提了不少状态码的问题，好比此处的status换成201可不能够
2. 由于我直接写了var xhr = new XMLHttpRequest()，没有提供IE的兼容，面试官又问了IE兼容的问题。

比较完备的答案：

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        // 兼容IE5和IE6
        return new ActiveXObject('Microsoft.XMLHttp');
    }
}

var xhr = createXHR();
xhr.onReadyStateChange = function() {
    if (xhr.readyState == 4) {
    // 状态码为200至300之间或304都表示这一请求已经成功
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            console.log(xhr.responseText)
        } else {
            ...
        }
    }
}
// GET
xhr.open('GET', url);
xhr.send();

// POST
xhr.open('POST', url);
xhr.send(data);
复制代码

以后是面试官画了一个草图，要求用html和css进行实现，内容涉及到左侧固定右侧自适应、垂直居中等内容。草图大概是这样：

平时写代码的时候如何进行错误处理?

对react和虚拟DOM有了解吗?

二轮面试

对html语义化有什么了解吗？有那些语义化的新标签？

当时就答了一些语义化的标签。总结一下：
语义化标签即标签自己的内容就能表示这个元素的意义给浏览者或者开发者。好比<div>和<span>就是没有语义的元素。而<form>表示一个表单或者<table>表示表格就是语义化的标签。
H5中提供了不少新的语义元素，好比：

• <header> <nav> <aside> <footer>几个标签用来表示页面的头部、导航和侧边栏等不一样部分。
• <article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它多是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其余独立的内容项目。
• <section>包含了一组内容及其标题。
• <figure>规定独立的流内容如图像图表照片代码等，<figcaption>定义<figure>的标题。

看过哪些Bootstrap源码，Bootstrap有什么特性？

这里就说了一下Bootstrap栅格化系统的大概实现，说了一下Bootstrap的响应式。而后面试官又顺带问了Bootstrap如何实现的响应式，我说使用了css的@media。而后他又问我还有没有什么其余的特性当时没想起来

对flex了解有多少？flex有哪些基本的属性？

就答了一下基本的justify-content和align-items flex-direction等等

如何实现两列等高布局？

在问的过程当中还问了height: 100%相关的问题

如何清除浮动？

这里就打了使用clear: both，面试官说还有什么别的方法吗，说只有clear: both还不够，没有答上来。

原理：清除浮动主要的原理就是在浮动元素的父元素上建立块格式化上下文（Block Formatting Context，BFC），一个BFC中全部的元素都会包含在其中包括浮动元素。不少方式均可以建立一个BFC，最经常使用的有如下几个：

1. display为flex inline-block inline-flex table-cell的元素
2. overflow为visible以外的元素
3. position为absolute或fixed的元素
4. float为none以外的元素

因此只要在float元素的父元素上应用以上属性便可在父元素上建立BFC以清除浮动。 另外，使用clear:both也能够清除浮动，最好的方法是在父元素上使用伪类:after添加这个用于清除浮动的元素，如：

.parent-box:after{
    clear: both;
    content: '';
    display: block;
}
复制代码

这里的内容来自这篇文章的总结，写的很是好推荐你们读一读

样式权重的优先级？

!important > 行内样式 > id > class > tag 样式的权重能够叠加
内容转自:https://juejin.im/post/5a998991f265da237f1dbdf9

css中单位em和rem有什么区别？

• rem是相对于根的em，rem即root的em，相对于html根元素
• em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。事实上，根据W3标准，em单位是相对于使用em单位的元素的字体大小。父元素的字体大小能够影响em值是由于继承。
• 总结：rem单位翻译为像素值是由html元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。em单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。

这部份内容转自: https://www.w3cplus.com/css/when-to-use-em-vs-rem.html © w3cplus.com

如何将文字超出元素的部分变成省略号（...）

若是实现单行文本溢出变成省略号，须要几个css属性结合使用：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
复制代码

多行则在webkit内核浏览器中能够获得比较满意的效果，下面指定了显示2行，多余2行的部分显示为省略号：

overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
复制代码

手写一个倒计时页面

1. 这里由于我用了var date = new Date()，因此面试官就又问了这个date的时间是什么时间？是当前时区的事件仍是电脑的时间仍是什么别的？这个没答上。答案是若是没有输入任何参数，则Date的构造器会依据系统设置的当前时间来建立一个Date对象。
2. 由于我自己用的setInterval()去实现倒计时，里面写的是1000毫秒执行一次，因此面试官就又问了一下js任务队列的内容，问我是否是浏览器能保证1000毫秒执行一次。我说因为任务队列的关系主线程不必定能保证1000毫秒执行一次，他又问我有什么优化方式吗？我说可使用requestAnimationFrame进行循环调用，这样浏览器自身会进行优化，面试官又问我浏览器是怎么优化的(真是一问到底)，这里就答不上来了。

如何判断一个变量是否是数组？

js中instanceof是如何实现的？

使用过ES6哪些新特性，js的基本数据类型是哪些？ES6中有新的数据类型吗？

我就答了箭头函数、Map、Set等，面试官问了箭头函数的特色。ES6中多了Symbol这个新的原始数据类型，之前没怎么使用过，没有答上来。而后在提到Promise的时候问了Promise的问题：

Promise是如何实现的？能不能本身写一个函数实现Promise？

之前没有写过，就大概本身写了一个函数，结果面试官提出了我写的代码的各类问题，总之就是写的基本是错的。。

http和https的区别？https的特色？

最常问的：从输入url到网页呈现的过程

这里问到了发送http请求和DNS查询的顺序前后问题。

DOM树和渲染树的加载前后？html、css、js的加载顺序是什么？(大概是这么问的)

这里除了加载顺序还深刻的问了好比DOM树是彻底加载完毕在进行css的渲染吗？仍是一边进行DOM树的构建一边进行css的渲染？若是html中有一段js代码进行很长时间的循环会不会影响页面的呈现？ 这里基本上被问倒了，由于没仔细钻研过加载顺序的问题。总共的问题想起来的就这些，面完以后感受本身的基础仍是不够好，再就是面试时有些紧张，平时会的不少东西表达不出来。 但愿对准备找前端岗位的你们有所帮助。