分享一次前端小白的面试题

笔试部分

1. 依次请写出弹出值，并解释为什么

+function() {
    alert(a)
    a()
    var a = function() {
        console.log(1)
    }
    function a() {
        console.log(2)
    }
    alert(a)
    a()
    var c = d = a
}();
alert(d)
alert(c)
复制代码

结果
function() {console.log(2)}
2
function() {console.log(1)}
1
function() {console.log(1)}
报错

原因：
前四个答案： 变量提示所导致
第五个答案： 因为变量在函数中没有用 var 来声明，所以是一个全局变量
第六个答案： 函数作用域，在函数内部定义的变量外面访问不到
复制代码

2. 这段代码有什么问题，应该怎么改进？

for (var i = 0; i< 10; i++) {
    document.body.innerHTML += '<li></li>'
}
复制代码

结果
复制代码

所在的问题：频繁的改变 Dom 造成性能问题

解决方法：定义一个变量，存储需要插入的 Dom ，只执行一次插入操作

let html = ''

for (var i = 0; i< 10; i++) {
    html += '<li></li>'
}

document.body.innerHTML = html
复制代码

3. 请写出该程序的输出结果

var obj1 = {name: 'obj1', fn: function() {
    console.log(this.name)
}}
var obj2 = {name: 'obj2'}
var obj3 = {name: 'obj3'}
obj1.fn()
var newFn = obj1.fn
newFn()
newFn.call(obj2)
obj3.fn = newFn
obj3.fn()
复制代码

结果
复制代码

    obj1
    undefined
    obj2
    obj3
复制代码

对上述答案不理解的可以参考这篇文章

4. 什么是 CDN? 请说明静态资源文件放入 CND 的好处？

简短来说：cnd 就是一个存放静态资源的服务器。

好处：1: 节省网络时间，加快相应速度 2: 降低自身服务器的压力

详细解释见这里

5. 常见的前端性能优化手段有哪些？

1. css, js, 图片的压缩
2. 可以使用雪碧图，来较少网络请求
3. css 选择器不要超过 3 层
4. 减少对 dom 的操作
5. 可以对提交按钮做防抖操作
6. 对图片可以进行懒加载
7. 静态资源使用 cdn 加速

6. 要实现一个两侧固定宽度，中间自适应的布局怎么实现？

1，左侧做浮动，右侧有浮动，中间绝对定位 left 设置成左侧盒子的宽度，right 设置成右侧盒子的宽度

2. 三个盒子都用绝对定位实现

3. 使用弹性盒子布局，将父盒子设置成弹性盒子，并将属性设置成横向排列，不支持换行，左右宽度固定，中间盒子设置成flex: 1;

面对这种题不要只回答一种方法，尽量多写

7. 对 React，Vue了解吗？简述一下它们的优缺点

面试部分

1. 项目中有没有使用过 CDN ，CND 为什么能够提高性能，是怎么上传至 CDN 的。

2. 谈谈对原型链的理解，手写列子实现能用几种方式实现？

   可以参考 JavaScript高级程序设计 第三版

3. 有没有了解过 es6 是怎么实现原型链的，通过 babel 转换成 es5 又是怎么样的？

   ECMAScript 入门

4. 数组的 forEach, map, filter, reduce, some, every 分别代表什么意思

• forEach 循环数组的每一项
• map 映射返回一个新的数组
• filter 过滤，返回条件为真的，放到一个新的数组中
• reduce 可以做累加的功能，返回的数据类型根据你的初始值来确定
• some 只要数组中有一项符合条件就返回 true
• every 数组中的每一项都符合条件就返回 true

5. 怎么理解 es6 中的 Set, Map 数据结构

   ECMAScript 入门

6. 谈谈对 Promise 的理解，并回答下列题目及原因

let p = new Promise((resolve, reject) => {
    resolve(1)
})

p.then(res => res + 1)

p.then(res => console.log(res))

// 回答输出 1

面试官接着问：如果想要结果是 2 该怎么实现？

// 链式调用 （因为.then 里面返回的数据会自动包裹一个 Promise 对象）
复制代码

6. 浏览器输入一个地址回车之后直到页面显示出来以后，这过过程中发生了什么，请简述一下
7. 对自己的有没有一个职业规划，平时自己是怎么去一步一步实现的。

谢谢大家的阅读，有错误之处，敬请指教。

转载于:https://juejin.im/post/5c9ccebcf265da610b3a1fe2