2020年面试题等你来刷-高级前端请绕过

1.行块元素的区别？

1.行内元素与块级函数可以相互转换，通bai过修改display属性值来切du换块级元素和行内元素，行zhi内元素display：inline，块级元素display：block。

2.行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

4.块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

2.Css有哪些选择器

（陈年旧题）
类别选择器、标签选择器、ID选择器、后代选择器、子选择器、伪类选择器、通用选择器、群组选择器

3.V-if与v-show的区别

区别：
v-if只有当指令的表达式返回值为true的时候才会被渲染，为false的时候，元素是不存在于文档中的；而v-show则不管指令表达式的返回值是什么，都会被渲染，并且只是基于css的样式切换，元素始终存在于文档中。

什么时候用v-if？什么时候用v-show？
综合上述，可以看出，v-if在切换过程中会有更多性能上的花销；而v-show则在页面初次加载时就渲染完成，后期不会占用更多的性能花销。所以，如果需要频繁地切换，则使用v-show指令比较好。反之则使用v-if 比较好。

4.vue中有多少种传值方式

1. props和$emit(常用)
2. $attrs和$listeners
3. 中央事件总线（非父子组件间通信）
4. v-model
5. provide和inject（只能单向）
6. $parent和$children
7. vuex
   具体：https://www.cnblogs.com/barryzhang/p/10566515.html

5.登录、注册防御功能流程

6.祖孙后代传值，如何进行往上传值

$attrs和$listeners

7.provide和inject

provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

8.登录token的携带，是请求头还是请求体？对于放在请求的数据会出现什么攻击？如何解决？

token验证机制过程：

1. 登录时,客户端通过用户名与密码请求登录
2. 服务端收到请求去验证用户名与密码
3. 验证通过,服务端会签发一个Token,再把这个Token以响应发给客户端.
4. 客户端收到Token,存储到本地,如Cookie,SessionStorage,LocalStorage.我们是存在cookie
5. 客户端每次像服务器请求API接口时候,都要带上Token.
6. 客户端每次跳转路由的时候也要验证Token登录态
7. 服务端收到请求,验证Token,如果通过就返回数据,否则提示报错信息.

9.v-model是默认修改prop的什么属性和方法

自定义组件v-model：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同

10.web安全问题

xss: 跨站脚本攻击，代码注入。

在 HTML 中内嵌的文本中，恶意内容以 script 标签形成注入。
在内联的 JavaScript 中，拼接的数据突破了原本的限制（字符串，变量，方法名等）。
在标签属性中，恶意内容包含引号，从而突破属性值的限制，注入其他属性或者标签。
在标签的 href、src 等属性中，包含 javascript: 等可执行代码。
在 onload、onerror、onclick 等事件中，注入不受控制代码。
在 style 属性和标签中，包含类似 background-image:url(“javascript:…”); 的代码（新版本浏览器已经可以防范）。
在 style 属性和标签中，包含类似 expression(…) 的 CSS 表达式代码（新版本浏览器已经可以防范）。
总之，如果开发者没有将用户输入的文本进行合适的过滤，就贸然插入到 HTML 中，这很容易造成注入漏洞。攻击者可以利用漏洞，构造出恶意的代码指令，进而利用恶意代码危害数据安全。
https://tech.meituan.com/2018/09/27/fe-security.html

CSRF（Cross-site request forgery），中文名称：跨站请求伪造

CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。你这可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账…造成的问题包括：个人隐私泄露以及财产安全。
https://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html

11.token是放在请求头中

在使用JSON Web Token作为单点登录的验证媒介时，为保证安全性，建议将JWT的信息存放在HTTP的请求头中，并使用https对请求链接进行加密传输
１.由于项目是前后端分离的，不可避免的就产生了跨域问题，导致Authorization始终无法添加到请求头中去，
原因：理论请看这篇文章：（点这里），简单来说就是，当在进行跨域请求的时候，如图自定义请求头，如添加Authorization字段，那么HTTP请求会发出一个预检请求，即OPTIONS请求，访问服务器是否允许该请求，如果浏览器没有进行跨域设置，则就会出现如上图所示的错误。
解决办法：浏览器设置跨域处理，这里介绍最简单的方式
后台：
1.引用跨域处理的jar包
2.在Web.xml中添加如下配置：
前端：
1.Ajax添加Token到Header中的方法
2.Anjular添加Token到Header中的方法

12.去重

Var a=new set (b)
Var c=Array.from(a)

var c = […Set(b)]

13.数组深度去重 去除数组中key值相同的对象

const arr = [
{“weight”:10,“id”:1},
{“weight”:20,“id”:2},
{“weight”:30,“id”:2},
{“weight”:40,“id”:4},
{“weight”:50,“id”:5}
]

let obj = {}
arr.map(item => {
obj[item.id] = item
})
let result = Object.values(obj)
console.log(result);

14.rem与em？

(考这个题我也不知道面试官是怎么想的，使用频率不高，给我有种炒闲饭的味道，不过还是看下吧)
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。

750的设计稿，量的是200，如何设置rem？

15.类数组如何转换为数组

第一次听说类数组？后面百度了一下才发现你原来还有一个名字
什么是类数组：
https://www.cnblogs.com/zhen-prz/p/10145254.html

16.如何判断什么是数组

1. instanceof
   2.Array.isArray
   3.原型链：constructor
   4.array特征
   function isArray(obj){
   return obj && //排除 null ， undefined
   typeof obj ===‘object’ && //排除number，string，boolean
   obj.propertyIsEnumerable(length); //排除object

}

17.ios与安卓的兼容适配问题；

18.什么是防抖什么是节流？（记得背代码，人家不要你懂原理，90%被问）

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

防抖/节流： 使用场景：网络不好，小白用户给服务器造成的压力 防抖控制次数，节流控制频率

防抖： 定义：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟
视频教程：https://www.bilibili.com/video/BV184411q7sa

// 防抖

function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}
// 处理函数
function handle() {    
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

节流： 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
视频教程：https://www.bilibili.com/video/BV1a4411q7Jx/?spm_id_from=333.788.videocard.0

var throttle = function(func, delay) {            
　　var prev = Date.now();            
　　return function() {                
　　　　var context = this;                
　　　　var args = arguments;                
　　　　var now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　func.apply(context, args);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}        
function handle() {            
　　console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

19.Vue实现树组件？

https://blog.csdn.net/qq_34439125/article/details/99205526

20.如何理解浏览器内核？

浏览器内核可以分为两部分:

1. 渲染引擎
   第一步: 解析代码, 将html代码解析为DOM, 将CSS代码解析为CSSOM;
   第二步: 对象合成, 将DOM和CSSOM合成为一棵渲染树;
   第三步: 布局, 计算出渲染树的位置;
   第四步: 绘制, 将渲染树绘制到屏幕上;
2. JS引擎
   第一步: 读取代码, 进行词法分析, 将代码分解为词元;
   第二步: 对词元进行语法分析, 并将代码整理成语法树;
   第三步: 使用翻译器, 将代码转换为字节码;
   第四步: 使用字节码解释器, 将字节码转换为机器码并执行;

21.如何让第二个radio元素进行选中？

$(’:radio[name=“sex”]:checked’).val()

22.jqery中的.each()是什么函数？怎么使用？

jqery中的.each()也是$.each()函数
$.each(collection, callback(indexInArray, valueOfElement) )

23.extend()是什么函数？怎么使用？

.jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象

24.document.ready与window.onload的区别？

document.ready方法在DOM树加载完成后就会执行，而window.onload是在页面资源（比如图片和媒体资源，它们的加载速度远慢于DOM的加载速度）加载完成之后才执行。
也就是说$(document).ready要比window.onload先执行。

25.jquery与js的转换

1、js对象转换成jquery对象。 $(js对象);
2、jquery对象转换成js对象。 (1)jquery对象[索引值] (2)jquery对象.get(索引值)

26.原型，原型链：

原型：prototype是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。
prototype是一个指针，指针指向一个对象，而这个对象可以共享对象的所有共有属性和方法；
原型链：原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。实例包含原型对象，原型对象又指向另一个实例，从而实现实例与原型的链条。这个链条就是原型链。

27.如何获取当前时间

Date t = new Date();
SimpleDateFormat df = new SimpleDateFormat(“yyyy-MM-dd HH:mm:ss”);
function getTime(){
var date = new Date(); //创建时间对象
var year = date.getFullYear(); //获取年
var month = date.getMonth()+1;//获取月
var day = date.getDate(); //获取当日
var time = year+"-"+month+"-"+day; //组合时间
alert(“当前日期：”+time);
}

28.什么是宏任务什么是微任务？

js中用来存书带执行回调函数的队列包含2个不同特定的列队

宏列队：用来保存待执行的宏任务（回调），比如：定时器回调/DOM事件回调/ajax回调

微列队：用来保存待执行的微任务（回调），比如：promise的回调/mutationObserver的回调

js执行时会区别这2个队列

js引擎首先必须先执行所有的初始化同步任务代码
每次准备取出第一个宏任务执行前，都要将所有的微任务一个一个取出来执行

图片: https://uploader.shimo.im/f/L0u7cUBzAmg4OfeG.png

29.移动端开发安卓和ios兼容性的那些坑以及解决方案？

（平时记得整理，面试的时候帮我吊打面试官）
具体的：

30.盒模型

box-sizing: content-box;/border-box;
content-box就是用元素的width和height觉得元素的高宽，这就意味着元素的padding和border等不能算在width和height中

31.去重

Var a=new set (b)
Var c=Array.from(a)

32.Const,let,var的区别

33.Minix（混入)

34cookie、localstorage、sessionstroage

如果面试的时候不顺心的话，就想想这个故事吧，有个人去一家公司面试，错了几个，后来没录上；后面那个面试官找工作的时候去面试刚好碰到的是之前他面试的那个人；那个人问了同样的问题，没想到现在的面试的只答上来了几个。

风水轮流转，好好努力加油成为主导者，你可以的。对于现在的前端面试其实跟应试考试没啥样啦，看重的还是技术回答的怎么样。

碰到一些自认为自己设计的面试题可以反映出对应人怎么样，也别太介意。有句话送给你“你想到了开头，你永远想不到结局是什么”。

之前就碰到一个后台面试前端应聘者，你现在用的vue是哪个版本，当时那个应聘者回答了2.0版本，然后那个后台觉得他不诚实就没有招了。作为进入社会的人觉得他的分析挺对的，看用哪个版本就知道用了多久vue。后面没想到人家直接把自己刚培训完前端的女票介绍进来了，这时我就想呵呵了。

最后想说的就是，找工作尽量挑好项目+好领导；这两点是为你后来的路铺路的；不然后面真的会跟其他同届人差距有点大，可能会被一群小崽崽面试的时候虐。