2018前端面试总结

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xiaoxiaoluckylucky/article/details/81099057

由于个人原因,在6.7月份换工作,相对于金三 银四来说,现在这个时间点不怎么好,夏天,找工作,是一种受虐,太热了。个人建议:换工作尽量在3.4月份。

全过程可以分为3个阶段:1.海投,收到面试通知后,网上查下公司,疯狂面试,了解行情。2.认识到自己的弱点,自己找时间充电。3.给自己定位,有目标性的向某些公司投递简历,有目标性的准备面试。以下是个人的面试经验,将所有的面试问题进行归类总结,希望对大家有所帮助。

目标地点:深圳。时间:半个月左右。职位:前端。

一.css

1.纯css画三角形?

https://blog.csdn.net/xiaoxiaoluckylucky/article/details/80940242

2.一个背景图的线性渐变?

.box {

width: 100px;

height: 100px;

background-image: linear-gradient(to right, red, blue);

}  

效果图:

3.一个块级元素的水平居中,你有哪几种方式可以实现?使用flex让元素水平居中有做过吗?、

  方法一:子绝父相

<style>

.father{

width:400px;

height:400px;

background:blue;

position:relative;

}

.son{

width:200px;

height:200px;

background:red;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

</style>

</head>

<body>

<div class="father">

<div class="son"></div>

</div>

</body>

效果图:

方法二:父元素弹性布局

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style type="text/css">

.father {

width: 400px;

height: 400px;

background: red;

display: flex;

justify-content: center;

/*x轴对齐方式*/

align-items: center;

/*y轴对滴方式*/

}

 

.son {

width: 200px;

height: 200px;

background: blue;

}

</style>

</head>

<body>

<div class="father">

<div class="son"></div>

</div>

</body>

</html>

效果图如下:

4.flex的属性有哪些?

常用的有:

 flex-direction: row | row-reverse | column | column-reverse;//方向
flex-wrap: nowrap | wrap | wrap-reverse;//如何换行
justify-content: flex-start | flex-end | center | space-between | space-around;//在主轴上的对其方式
align-items: flex-start | flex-end | center | baseline | stretch;//在交互轴上的对齐方式

5.圣杯布局和双飞翼布局?

https://blog.csdn.net/xiaoxiaoluckylucky/article/details/79713542

6.两个元素,一个元素有固定宽度,另外一个元素自适应?

思路:左边元素宽度固定,右边元素自适应。即.left宽度100px,设置左浮动,.right设置marging-left:100px。

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style type="text/css">

.left {

width: 100px;

height: 100px;

background: red;

float: left;

}

.right {

height: 100px;

margin-left: 100px;

background: blue;

}

</style>

</head>

<body>

<div class="left"></div>

<div class="right"></div>

</body>

</html>

效果图如下:

7.一个p标签,不换行,超出部分显示为省略号?

p{

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

8.手机适配 问题:一个图片比较大或者比较小,怎么适配手机怎么优化?

9.rem有用过吗?怎么使用的?

https://www.cnblogs.com/dannyxie/p/6640903.html

10.弹性布局、百分之布局、响应式布局的区别?

https://www.cnblogs.com/yanayana/p/7066948.html

11.绝对定位、相对定位、固定定位的区别?

position:absolute;脱离标准流,参考点是第一个非static定位的父元素。

postion:relative;没有脱离标准量,参考点是元素原本的位置。

position:fixed;脱离标准流,相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。

二:js

1.原生js怎么样?

还可以 ps:不可回答不好或者不怎么样,99%的公司注重原生js

2.轮播图的原理?无缝轮播的原理?

原理:1.布局:一个大ul里面有很多li,ul设置overflow:hidden 2.使用setTimeout定时器,改变ul的offsetLeft

无缝轮播原理:类似轮播图原理,只是在头尾各添加一张图片

3.手写ajax会吗?现场写一个?

$.ajax({

type: "GET",

url: "",

data: {name:'xx'},

dataType: "json",

success: function (data) {

}

});

4.后台返回状态码有哪些?

  • 200 OK – [GET]:服务器成功返回用户请求的数据,该操作是幂等的(Idempotent)。
  • 201 CREATED – [POST/PUT/PATCH]:用户新建或修改数据成功。
  • 202 Accepted – [*]:表示一个请求已经进入后台排队(异步任务)
  • 204 NO CONTENT – [DELETE]:用户删除数据成功。
  • 400 INVALID REQUEST – [POST/PUT/PATCH]:用户发出的请求有错误,服务器没有进行新建或修改数据的操作,该操作是幂等的。
  • 401 Unauthorized – [*]:表示用户没有权限(令牌、用户名、密码错误)。
  • 403 Forbidden – [*] 表示用户得到授权(与401错误相对),但是访问是被禁止的。
  • 404 NOT FOUND – [*]:用户发出的请求针对的是不存在的记录,服务器没有进行操作,该操作是幂等的。
  • 406 Not Acceptable – [GET]:用户请求的格式不可得(比如用户请求JSON格式,但是只有XML格式)。
  • 410 Gone -[GET]:用户请求的资源被永久删除,且不会再得到的。
  • 422 Unprocesable entity – [POST/PUT/PATCH] 当创建一个对象时,发生一个验证错误。
  • 500 INTERNAL SERVER ERROR – [*]:服务器发生错误,用户将无法判断发出的请求是否成功。

5.有多个请求第一个完成后才执行第二,第二个完成后才执行第三个,你有几种方法实现?

  方法一:设置ajax的async:false

   方法二:用es6的promise

6.浅拷贝和深拷贝的区别?es6中的...扩展运算符是浅拷贝还是深拷贝?一个对象,你有几种方法实现它的深拷贝?

浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。

深拷贝:会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

//深拷贝方法一

var $ = require('jquery');

var obj1 = {

a: 1,

b: { f: { g: 1 } },

c: [1, 2, 3]

};

var obj2 = $.extend(true, {}, obj1);

console.log(obj1.b.f === obj2.b.f);// false

//深拷贝方法二

使用Object.create()方法

//深拷贝方法三

手动复制属性

7.一个顶级对象里面嵌套子对象,子对象里面嵌套孙对象,怎么获取一个对象的深度?

obi1 = {

name: 'xx',

children: {

name: 'x2',

children: {

name: 'x3'

}

}

}

var num = 1;

function getDeepLength(o) {

for (var i in o) {

if (typeof o[i] == 'object') {

console.log(o[i]);

num++;

getDeepLength(o[i])

}

}

return num;

}

console.log(getDeepLength(obi1))//3

8.XSS攻击全称是什么?

跨站脚本攻击

9.什么是闭包 ,为什么要用闭包?你所做的项目中,哪些地方有用到闭包?

https://blog.csdn.net/xiaoxiaoluckylucky/article/details/80946733

10.如何防止表单重复提交?有几种方法?

方法一:定义一个flag=false,改变flag的值

方法二:设置button的禁用属性

方法三:利用session

11.layer和vue有冲突怎么处理?

此问题没有遇到过,直接说没有遇到即可

12.组件开发和模块开发的区别?你在开发的过程中是怎么划分组件?

组件按照功能划分,模块按照业务逻辑划分。业务(模块)shirt由多个独立的组件组成。

13.有写过封装方法吗?写过什么?

肯定有的,比如说ajax封装,拖拽功能的封装等。

14.ajax请求有用过哪几种?

比如get、post

15.写过ajax封装吗?ajax里面的error你是怎么封装判断的?

写过,需要熟悉ajax和后台返回的状态码,error封装如下

error: function (xhr, status, error) {

switch (xhr.status) {

case 400:

msg = '服务异常';

break;

case 401:

msg = '身份认证异常';

callback = function () {

window.location.reload();

}

break;

case 403:

msg = "权限受限";

break;

case 404:

msg = "资源不存在";

break;

case 500:

msg = "运行异常";

break;

default:

msg = "未知服务异常";

}

}

16.写过的最难的组件是什么?

拖拽、日期组件等

17.sessionStorage、localStorage、cookie的区别?

    1、cookie数据存放在客户的浏览器上,session数据放在服务器上。

    2、cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑到安全应当使用session。

   3、sessionStorage、cookie是会话级存储,浏览器关闭就会自动消失;localSotrage是永久存储,除非手动删除,否则不会消失。

    4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

    5、可以考虑将登陆信息等重要信息存放为session,其他信息如果需要保留,可以放在cookie中。

18.canvas画一个不规则的多边形,多边形的各边框样式和颜色都不一样,怎么设置样式怎么画线条啥的?

canvas教程http://www.runoob.com/html/html5-canvas.html

 19.echart画不连续的折线图?

金融公司比较注重echarts、canvas等,自行百度

20.跨域有哪几种方式?

方法1:cors

方法2:jsonp;只支持get不支持post。

使用jsonp的时候需要在ajax里面添加如下代码:

dataType: "jsonp", //指定服务器返回的数据类型

jsonp: "theFunction", //指定参数名称 可省略 默认是callback即函数名字

jsonpCallback: "showData", //指定回调函数名称

21.混合、webapp、 原生app的优点和和缺点?你之前做的是哪一种?

原生脚本/NativeScript:将原生API封装成JavaScript接口,这有点像前端的nodejs。NativeScript方式 与原生相比性能损失不大(据称只有10%左右),优点是开发语言统一使用JavaScript,缺点是 要针对不同的平台分别开发。
    原生+web/ Hybrid:使用原生技术开发,部分页面调用web。优点是比纯原生开发周期短, 页面更新方便,如支付宝,还有很多app的详情页面。缺点:需要原生和web配合。
    混合/Hybrid
:使用web技术开发App,使用Cordova/PhoneGap之类进行打包封装。优点是采用标准的web技术开发, 避免了不同平台原生开发体系的学习,学习成本低上手快效率高,一次开发 微信 wap app全部搞定;缺点是app 在android平台性能上有一些损失,但是相信硬件的发展会接近原生。

22.h5页面怎么调用原生native的方法?比如说摄像头麦克风啥的?

方法1:mWebview.addJavascriptInterface(new MyObject(TestWebViewActivity.this), "myObj");

方法2:Scheme:WebView拦截页面跳转

23.Echarts的数据,导出表格做过吗?

https://www.jb51.net/article/127309.htm

24.现在需求是要做一个官网,你需要多久?没有ui,你自己能做官网吗?

能做,这个要看需求,需求简单,没有ui,一周左右就可以搞定。一般公司说没有ui,这时候,我会反问面试官,难道你们公司没有ui设计师吗?(ps:没有ui的公司不去)

25.单线程和事件队列你知道吗?谈谈浏览器的机制?

单线程和事件队列:js是单线程加事件队列。单线程,即一次只能做一件事。事件队列,是指异步事件,如计数器、ajax、回调函数事件,会添加到任务队列里面,主线程空闲后轮询任务队列,并将任务队列中的任务(回调函数)取出来执行,来实现异步操作。

浏览器的机制:此问题的大白话是从输入url到我们看到页面这过程中,浏览器做了哪些?

有以下6大步:

  1. DNS解析

  2. TCP连接

  3. 发送HTTP请求

  4. 服务器处理请求并返回HTTP报文

  5. 浏览器解析渲染页面

  6. 连接结束

26.将url后面的参数变成obj?

此题目要求获取url的参数、字符串分割成数组、对象的赋值

var str = window.location.search;

str = url.substring(1);

var arr = url.split('&'); //[name=xx,age=2];

var obj = {};

for (var i = 0; i < arr.length; i++) {

var key = arr[i].split('=')[0];

var value = arr[i].split('=')[1];

obj[key] = value;

}

console.log(obj) //{name: "xx", age: "2"}

27.用正则替换一个字符串的前后空格?

var tempStr = str.replace(/(^\s*)|(\s*)$/g, "");

28.数组的去重有哪几种方式?

https://www.jb51.net/article/118657.htm

重点:用es6的方法,这是个面试的套路,同时检测你有没有用过es6

var set = new Set(array1);

var newArray = Array.from(set);

29.怎么判断一个数组里面是否包含一个值?

方法1:循环===或者循环indexof

var arr = ['a', 's', 'd', 'f'];

console.info(isInArray(arr, 'a'));//循环的方式

function isInArray(arr, value) {

for (var i = 0; i < arr.length; i++) {

if (value === arr[i]) {

return true;

}

}

return false;

}

方法2:jQuery的inArray方法

var array = ['a','ab','abc'];
$.inArray('abc',array);

30.给你一个数据,怎么判断这个数据的数据类型?

方法1:Object.prototype.toString.call(str)

方法2:jquery.type()

方法3:根据对象的constructor判断: constructor

31.同步和异步的区别?

32.怎么实现ajax的同步请求?有几种方式?

三.vue、angular、react

1.vue 发送请求是用什么?

axios

2.vuex是什么?在你开发的项目中是怎么使用vuex?

中心化状态管理方案

3.谈下vuex的核心,vuex有什么优点和缺点?mutation和action有什么区别?异步是写在mutaion里面还是action里面?

Vuex核心是getter/state/mutaion/action.

mutatiion是用来改变state

action是用来提交mutaion

异步是写在action

4.用过angular有哪些API?

controller/filter/http/scope等

5.vue中用过哪些比较难的?

vuex

6.vuex跟cookie的区别?

vuex是中心化状态管理方案,getter/state/mutaion/action是一套的,集中管理,实现数据共享和同步。

7.由列表页跳转到详情页,有传递一个参数到详情页,刷新详情页,页面会出现404吗?

https://router.vuejs.org/zh/guide/essentials/history-mode.html

8.vue的双向绑定数据原理?

利用es5的API,setter/getter实现

Vue实现这种数据双向绑定的效果,需要三大模块:

  1. Observer:能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
  2. Compile:对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
  3. Watcher:作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图

9.vue的原理?

同上题8

10.vue和angular的区别?各自有什么优点和缺点?

https://cn.vuejs.org/v2/guide/comparison.html

11.vue钩子函数并解释?created和mounted的区别,分别在什么时候用?

  beforeCreate/created/beforeMounted/mounted

created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。

12.v-for循环的li标签,点击当前li高亮,怎么实现?

 步骤1:在data里面定义一个i:0;

步骤2:在li绑定点击事件,点击事件中,将当前索引赋值给data里面的i

步骤3:在li中判断i==index的时候,改变此li的样式

13.你做过的项目中,vue和哪些ui框架一起使用过?

mint-ui、Element 、iview

14.vue路由懒加载加载不出来怎么办?

没有遇到此问题 。ps:没有baserurl就没有这个问题。

15.Vue的设计思想?

https://www.cnblogs.com/liutie1030/p/6008869.html

16.vue的子向父传递参数,我们一般是emit单个值,如果需要emit多个值,怎么实现?

https://blog.csdn.net/sllailcp/article/details/78595077

17.Vue里面的data为什么是个函数且return?

作用域的问题,避免全局污染

18.路由的传参和获取参数?

配置路由:

path: '/describe/:id',

或者

this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
        })

获取参数

this.$route.params.year
this.$route.query.id

19.路由是怎么配置的?有子路由怎么配置?路由的懒加载怎么实现?

https://www.cnblogs.com/padding1015/p/7884861.html

子路由是用children

路由懒加载resolve => require([URL], resolve),支持性好

20.谈谈你对vue的理解和看法?

https://blog.csdn.net/wmwmdtt/article/details/55095420

21.使用vue过程中你遇到了什么困难?

多级嵌套传参,解决思路自行百度

22.Vue里面watch的数据的范围?data外面的数据能watch吗?

watch的数据范围是data里面的数据

23.watch一个对象?watch一个对象的某个属性怎么实现?

watch一个对象:

watch: {  

 msg: {    

 handler(newValue, oldValue) {    

   console.log(newValue)     

    },     

  deep: true   

  }

}

监听对象内的某一具体属性,可以通过computed做中间层来实现

24.谈谈vuex的单向数据流?

https://www.jianshu.com/p/1ebc15645abe

四:es6

1.es6申明变量有哪几种方式,let和var的区别?

申明变量有let const 

区别有.

  • 通过var定义的变量,作用域是整个封闭函数,是全域的 。通过let定义的变量,作用域是在块级或是子块中。
  • 不论var声明的变量处于当前作用域的第几行,都会提升到作用域的头部,有变量提升。 
    -var 声明的变量会被提升到作用域的顶部并初始化为undefined,而let声明的变量在作用域的顶部未被初始化
  • let声明的时候需要赋值

2.你用过的es6有哪些 ?

变量声明let/const;promise;结构赋值;箭头函数;...扩展运算符等

3.es6的...扩展运算符是浅拷贝还是深拷贝,...是怎么使用的?

...是深拷贝,

demo:

var arr = [1,2,3,4,5] var [ ...arr2 ] = arr

此题可以跟面试官聊以下深拷贝和浅拷贝的区别

4.promise的优点?

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000

五.前端性能优化

1.减少页面加载时间的方法有哪些?

    方法有:1. 压缩CSS代码

                   2. 合并多个外部CSS、js文件

                   3.使用雪碧图

                   4.利用缓存

                   5.减少请求

                   6.优化样式表和脚本的顺序

2.前端性能测试做过吗?用什么工具?

https://blog.csdn.net/qq_17767355/article/details/51057239

六.难点问题(此类问题出现的频率比较高,需花时间去看去理解)

1.谈谈构造函数?

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997235247b53be560ab041a7b10360a567422a78000

2.websocket是什么?有用过吗?有什么优点和缺点?websocket和http有什么区别?

讲一下webscoket和http的区别,websocket的原理和使用的场合。

WebSocket 连接允许客户端和服务器之间进行全双工通信,以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接,就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。

3.继承的方式有哪几种?

  原型链继承、构造继承、实例继承、拷贝继承

4.上一个项目中遇到的问题?

此题没有固定答案

5.node.js有用过吗?express有用过吗?

肯定说有用过,至少要学自己学习过写过demo

相关知识点见 https://nodejs.org/en/   

6.mvvm和mvc的区别?

http://www.360doc.com/content/16/0413/11/32348297_550241237.shtml

7.webpack用了哪些?

https://www.jianshu.com/p/dce7546a5d20

8.weex有了解吗?是干什么用的?

答有了解,Weex 致力于使开发者能基于当代先进的 Web 开发技术,使用同一套代码来构建 Android、iOS 和 Web 应用。

http://weex.apache.org/cn/guide/

9.设计模式有哪些?

  • 简单工厂模式
  • 单例模式
  • 建造者模式(Builder)
  • 原型模式(prototype)—克隆
  • 中介者模式(Mediator)
  • 代理模式
  • 观察者模式(Observe)
  • 策略模式(strategy)
  • 状态模式
  • 享元模式(Flyweight)
  • 装饰器模式

10.原型的继承,什么时候会继承什么时候不会继承?原型和call/apply一起使用的笔试题?

要求高点的公司,都有此类题目的面试题,题目多变,但是核心思想不变,百度原型继承面试题,建议此知识点多看看多理解,出现的概念较高。

11.算法题目,两个无限大的数字的乘积?

此题当时没有答上来。

大概思路是:将无限大的数字分解为单个数字,然后再利用小学的乘法运算来计算,将大数字化为小数字,即将大问题化为小问题 ,解决了小问题,大问题就解决了。

12.斐波那契数列?递归函数?

https://blog.csdn.net/MallowFlower/article/details/78858553

13.数组的二次分类问题?ps:需要有扩展性有计算机思维。

https://blog.csdn.net/github_38771368/article/details/76576793

14.函数的调用,函数内部的this指向问题?

http://www.runoob.com/js/js-function-invocation.html

七.私人问题

1.个人定位和规划?

我简单谈了下自己的2年计划。阐述自己喜欢学习喜欢技术,并想在前端这一块做精,往高级前端工程师发展。

2.低于你这个薪资你考虑吗?

关于此问题,我会给面试官一个我最低能接受的薪资,低于这个薪资,我就不考虑。

3.谈一下你自己的优点?凭什么要这么高工资?

只有一次被问到此问题。是家金融公司,面试过程中,我表示很好。只是面试官想压我工资,刚开始用我不是计算机专业来压我工资,后来又问我这个。这个问题,我回答了2次后,都被面试官怼回来了,最后,我就说了几句我想说的话和感受。如果面试官确实想压工资,那么此问题,不管你怎么回答,面试官都不会满意。保存平常心态就好。

4.你最近有结婚的打算吗?

女性朋友会问到此问题。直接说没有。

ps:面试过程中会遇到各种问题各种面试官,重点是要自信。面试官问的问题,如果自己知道,就自信的阐述自己的观点和理解;如果是那种之前没有考虑过的有点难的问题,可以讲讲自己对这个问题的理解;如果确实不知道,就说不清楚,切不可乱说,因为面试官都是有点水平的,如果你的回答是错误的,面试官不会当面揭穿你,但是这种情况肯定是对求职者不利的。

面试官水平也有差别,遇到比较屌的面试官,也不必客气,面试官对求职者不耐烦,这些我们都是可以感受到的,这种面试这种公司,没有必要久待。水平比较高的素质比较高的面试官,求职者可多和面试官互动,互相讨论请教问题,对于自己来说,也是一种成长。

对于有的问题,可以反问面试官,比如说面试官问:需求是做一个官网,没有ui,你可以做吗?我的回答是这样的:做一个大众的普通的官网,没有ui,我是可以做的,但是肯定没有ui设计的那么好看,贵公司难道没有ui吗?

心态很重要,心态很重要,心态很重要。

 

展开阅读全文

没有更多推荐了,返回首页