前端面试题

2018-03-20 本文已影响620人 Howie126313

金三银四，春天来了~又到了跳槽的高峰期。以下是最近面试常问的一些面试题。前端新人一枚，问题都比较基础。

首先推荐个 chrome 的插件吧，在去一个公司面试前不知道他的技术栈是什么，可以通过浏览他的网站通过这个插件看看这个公司都用了什么。也可以有一个方向去准备。如果有童鞋因为墙的问题的话~~
戳这里：https://github.com/Howie126313/vpn

Javascript：

Q1：用到的 ES6 新特性。
A：
1、箭头函数；（可以避免 this 指向问题）
2、模板字符串；
3、扩展运算符；
4、设置函数默认值；
5、class 声明类及相关继承的方法；
6、@functionName 类的修饰器；

Q2：计算 1-10000 出现过多少个 0 。
A：

!function () {
    let num = 0
    const rule = /0/g
    for (let i = 1; i <= 10000; i++) {
         if(i.toString().includes(0)){
            if (i.toString().match(rule)) {
                num += i.toString().match(rule).length
            }
         }
    }
    console.log(num)
}()

Q3：以下代码分别输出值是什么。
A：

!function () {
    for (var i = 0; i < 5; i++) {
        console.log(i)
    }
    console.log(i);
}()

!function () {
    for (let i = 0; i < 5; i++) {
        console.log(i)
    }
    console.log(i);
}()

Q4：typeof 和 instanceof 区别。
A：
typeof 的返回值为‘number’,‘string’,’boolean’,’function’,’undefined’,’object’。所以在判断数组时，返回值为 ‘object’；
instanceof 是判断变量是否为某个对象的实例，返回值布尔值。
e.g:

var o = {};
var a = [];

o instanceof Array // false
a instanceof Array // true
a instanceof Object // true

Q5：for 、for…in 相对于 for…of 的缺点。
A：

for 书写麻烦...(我也不知道 ^_ )
for…in: 遍历顺序不确定，for…in不光能遍历数组还能遍历对象，因此在遍历数组内值得同时，还会遍历数组自身的属性以及数组原型链上的可枚举属性；
for..of (ES6): 可以使用 break 来终止整个循环，或者 continute 来跳出当前循环，继续后面的循环；结合 key() 获取到循环的索引，并且是数字类型，不是字符串类型；

Q6：同时发送多个异步请求，请求之前没有关联。
A：使用 aync 、await 发送，声明三个请求，之后通过 promise.all() 一起发送，此时三个请求为并行。如果直接发送，三个请求会以串行的方式发送。
有关 aync 、 await 异步请求的详细教程：https://segmentfault.com/a/1190000011526612
e.g:

async function correctDemo() {
    let p1 = sleep(1000);
    let p2 = sleep(1000);
    let p3 = sleep(1000);
    await Promise.all([p1, p2, p3]);
}

Q7: 使用 Jquery 获取 select 当前的 value 值。
A: $("select option: selected").val();

Q8：JQuery 中 $符号的冲突问题。 A：使用 jQuery.noConflict([extreme]) 释放$ 给其他 js 库。释放后，可能会引起 jqExtend 工作不正常。
e.g:

var $jq = jQuery.noConflict(true);

Q9: 正则相关。
A:
元字符：
1、.:匹配除了\n所有字符；
2、\d:匹配所有的数字0-9；
3、\w:匹配数字、字母、下划线；
4、\s:匹配所有空白占位符；
5、\D:匹配所有的非数字；
6、\W:匹配所有的非数字、字母、下划线；
7、\S:匹配所有非空白占位符；
8、\u:匹配中文；
匹配所有的中文:[\u4e00-\u9fa5]
注意:\代表转译,一些带有特殊意义的字符,需要转译；(\n代表换行)

括号：
():标记一个子表达式的开始和结束位置；
[]:代表一个区间，定义字符的匹配范围；
\d===[0-9];
\w===[a-z0-9A-Z];
\D===[^0-9];
\w===[^a-z0-9A-Z];
^代表区间取反；

{}:表示匹配长度；
n{x}:x个n；
n{x,y}:最少x个n，最多y个n；
n{x,}:最少x个n，最多无限；

量词：
+：最少一个，最多无限个{1，}；
*：最少0个，最多无限个{0,
？：最少0个，最多1个{0，1}

Q10：跨域
A：浏览器的同源策略会导致跨域，只要是为了防止 CSRF 攻击。只要协议、域名和端口有任何一个不同就被当做是跨域操作。解决方法：jsonp、服务器代理、设置 webpack 中 proxytable 或者 iframe 等方式。

Q11：数据类型
A：基本数据类型：number string boolean undefined null;引用数据类型：object function array data

css3：

Q1：实现三栏布局，左右定宽中间自适应。（三种方式）
A：
1、flex:

<head>
    <style>
        .wrap {
            display: flex;
            background-color: yellowgreen;
        }
        .t1 {
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .t2 {
            flex: 1;
            height: 100px;
            background-color: blue;
        }
        .t3 {
            width: 200px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="t1">left</div>
        <div class="t2">center</div>
        <div class="t3">right</div>
    </div>
</body>

2、grid:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap {
            display: grid;
            grid-template-columns: 200px 1fr 200px;
        }
        .wrap>div {
            height: 200px;
        }
        .t1 {
            background-color: aqua;
        }
        .t2 {
            background-color: hotpink;
        }
        .t3 {
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="t1">left</div>
        <div class="t2">center</div>
        <div class="t3">right</div>
    </div>
</body>

3、 position:

<head>
    <style>
        .wrap {
            background-color: aqua;
            padding: 20px;
            position: relative;
        }
        .t1 {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        .t2 {
            height: 100px;
            background-color: brown;
            margin: 0 220px;
        }
        .t3 {
            position: absolute;
            right: 0;
            top: 0;
            width: 200px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="t1">left</div>
        <div class="t2">center</div>
        <div class="t3">right</div>
    </div>
</body>

4、float:

<head>
    <style>
        .wrap {
            background-color: aqua;
            overflow: hidden;
            padding: 20px;
        }
        .d1 {
            width: 200px;
            height: 100px;
            float: left;
            background-color: brown;
        }
        .d2 {
            width: 200px;
            height: 100px;
            float: right;
            background-color: blueviolet;
        }
        .d3 {
            height: 100px;
            background-color: blue;
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="d1">left</div>
        <div class="d2">right</div>
        <div class="d3">center</div>
    </div>
</body>

Q2：常用清楚浮动的方法，为什么 overflow 能够清楚浮动？BFC 是什么？哪些属性能够触发 BFC ？
A：
清楚浮动的方法：

使用伪元素；
在浮动元素下，写一个空的 div 设置 clear: both 属性；
父级设置浮动；
父级设置 overflow: hidden/auto ；

为什么 overflow 能够清除浮动：
因为 overflow 的属性值出发了 BFC 。

BFC 是什么：
BFC 全称是块级排版上下文，用于对块级元素排版。BFC 会生成一个区域，使这个块圾元素内部的排版完全独立隔绝。就好像声明了一个 function 就会生成一个独立的作用域一样。

那些属性能够触发 BFC ：
float 的值不为 none ；
overflow 的值不为 visible ；
display 的值为 inline-block、table-cell、table-caption
position 的值为 absolute 或 fixed。

Vue：

Q1: vue 双向数据绑定是如何实现的。
A：vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，利用 Object.defineProperty() 实现了数据的劫持。ES6 的 proxy 也可以实现相应的效果，但兼容性不如前者。
具体方法：https://www.cnblogs.com/canfoo/p/6891868.html

Q2：vue 计算属性的实现，computed 和 watch 区别。
A：计算属性也是通过 Object.defineProperty() 和发布者-订阅者模式实现的；
computed：经过处理返回的数据值,只要源数据没有发生改变,computed函数里面对相应的数据就不会反生改变,相当于缓存在本地;发生改变的时候,computed对应数据的函数也会发生改变;
watch：watch比较适合对状态的监控，比如监控页面一个变量的值改变，需要进行什么操作，而不只是简单的返回一个值。

Q3：vue 常用的生命周期，各周期都做了什么。
A：
beforeCreate:
组件实例被创建，对 data 进行双向绑定，初始化方法；
created :
组件实例创建完成，属性已绑定，dom 还未生成。将模板编译成函数；运行 render 方法返回一个 vnode 对象（虚拟dom）；
beforeMount:
此时 el 还未对数据进行渲染；
mounted:
el 被新建的 vm.$el替换，并挂载到实例上；
beforeUpdate:
数据更新时调用，新 dom 渲染之前。这里适合在更新前访问现有的 dom；
Updated:
数据更新导致虚拟 dom 重新渲染；
beforeDestory:
实例销毁之前，实例仍然完全可用；
destoryed：
vue 实例销毁后调用，实例指示的所有东西都会解绑定，事件监听也会被移除，子实例也会被销毁；

Q4：vue 组件间传值。
A：

通过 prop 和 $emit 方法在父子级组件间进行传值；
通过 eventBus 进行组件间传值；
使用 Vuex；
通过 $ref 获取组件实例，调用该组件方法时，使用参数传值；
使用作用域插槽；

Q5：原生 Javascript 实现简单的 vue 双向数据绑定。
A：实现方式，利用 Object.defineProperty 或 ES6 的 proxy 实现。前者兼容性更好。

Object.defineProperty：

<body>
    <input id="input" type="text">
    <p id="output"></p>
</body>
<script>
    var data = {}
    Object.defineProperty(data, 'words', {
        set: function(newval) {
            document.getElementById('input').value = newval
            document.getElementById('output').innerHTML = newval
        }
    });
    document.addEventListener('keyup', function(e) {
        data.words = e.target.value
    })
</script>

Q6: 关于服务端渲染
A：服务器端渲染（SSR），基于 react 的渲染框架 next.js 以及基于 vue 的 nuxt.js。SSR 对于首屏加载时间的优化很明显，同时还可以方便的进行 SEO （google 不需要）。

其他：

Q1：网页优化。
A：这就是个坑~说不完.....看这里https://segmentfault.com/a/1190000011554027

Q2：websocket 是什么。
A：类似一个即时通讯的效果，正常 ajax 需要我们发送请求，后台才会返回数据。websocket 是一次连接之后，如果不去断开，连接不会中断。当服务器数据发生变化时，后台会向前台发送数据。常用的 socket.io 是一个封装了 Websocket、基于 Node 的 JavaScript 框架，包含 client 的 JavaScript 和 server 的 Node。
详细介绍：https://zhuanlan.zhihu.com/p/23467317

Q3：Cookie、localStorage、sessionStorage 的区别
A：
cookie 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效,存放数据大小一般4K左右，而sessionStorage与localStorage大小在5兆左右，在客户端生成，localStorage除非被清除，否则会永久保存，sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除，cookie在与服务器端通信每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题,而sessionStorage与localStorage仅在客户端（即浏览器）中保存，不参与和服务器的通信。
参考：http://jerryzou.com/posts/cookie-and-web-storage/

Q4：打开网页浏览器都做了什么
A：使用 html 创建 dom，使用 css 创建 css 对象模型，基于这两者执行脚本（scripts）。合并 dom 和 css 对象模型形成渲染树，使用渲染书布局所有元素。然后渲染所有元素。

Q5：webpack url-loader 和 file-loader 区别
A：file-loader 解析项目中 url 引入，根据配置将图片拷贝到相应的路径；再根据配置，修改打包后文件的引用路径，使其指向正确的文件。url-loader 简单的说，他封装了 file-loader，但不依赖 file-loader。url-loader 的工作分两种：1）文件小于 limit 的值，将其转为 DataURL。相当于把图片翻译成字符串打包到文件中，但图片较大会影响性能；2）大于 limit url-loader 会调用 file-loader 进行处理。

前端面试题

Javascript：

css3：

Vue：

其他：

猜你喜欢

热点阅读