知识精华—前端面试题大全2（含答案）

目录

 

一、JS方面

二、Vue方面

三、GIT方面

四、HTTP方面

五、安全方面

六、性能优化

---

一、JS方面

1、this指向
2、闭包功能，出现的原因，缺点

有关闭包很好的例子解释博客：https://blog.csdn.net/zhumizhumi/article/details/86306192
3、ES6的东西
4、LET、Const、Var

let:      块级作用域、不能变量提升、可以修改

const: 块级作用域、不能变量提升、定义常量不可修改且必须初始化

var:     函数作用域、可以变量提升、可以修改
5、防抖和节流【重绘和重排】

https://zhuanlan.zhihu.com/p/103527326

防抖：是输入框属入一个内容，不是每输入一个就去服务器进行搜索，而是输入完之后进行搜索，用settimeout在几秒之内没有变化的就是开始搜索，这就是放抖的一个例子

节流：监测浏览器窗口的onsize时间，每次改变都会触发，节流就是隔一段时间进行触发一次，就是节流
6、求组  Array   
7、for和foreach的区别   filter过滤   reduce   any   some的方法

（1）reduce

计算数组元素相加后的总和

 JS
var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}


VUE
computed: {
   quantityNum() { // 商品总数
     return this.selectTableData.reduce((count, item) => {
       return count + item.amount
     }, 0)
   }
 }

（2）some

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测

注意： some() 不会改变原始数组

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}

8、排序的方法   冒泡排序  sort也可以进行排序   为什么要排序
9、作用域

浏览器给js的生存环境叫作用域
10、原型链

函数内部的变量被使用时，首先会在自己的私有作用域下查找是否有这个变量，有就直接使用，没有就向他的上一级查找，父级有就使用父级的，父级没有就以此继续向上查找直到查找带window有就使用没有就是is not defined。这种查找机制我们叫原型链。
11、性能优化

12、数据达到上万的时候，从中查找一个数据，怎么处理

 

二、Vue方面

1、vue中的双向绑定讲解原理 + 自己如何实现双向绑定

https://blog.csdn.net/weixin_36852235/article/details/81434619
https://www.cnblogs.com/beevesnoodles/p/9844854.html

（1）双向绑定的原理

目前前端框架基本上都是采用 MVVM 模式实现双向绑定，Vue 自然也不例外。但是各个框架实现双向绑定的方法略有所不同，目前大概有三种实现方式。

• 发布订阅模式
• Angular 的脏查机制
• 数据劫持

 Vue 是通过数据劫持结合发布订阅模式来实现双向绑定的

• 当data 有变化的时候它通过Object.defineProperty(）方法中的set方法进行监控，并调用在此之前已经定义好data 和view的关系了的回调函数，来通知view进行数据的改变
• 而view 发生改变则是通过底层的input 事件来进行data的响应更改

   vue是通过Object.defineProperty()来实现数据劫持的。它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，Observer（Objec.defineProperty中的set）监听data的变化，当data有变化的时候通知观察者列表Dep（里面有与data变化对应的update函数）,watcher负责向观察者列表里添加（订阅）对应的更新函数，Dep里的更新函数执行完了之后将最新的值更新到view上

（2）如何实现双向绑定

https://segmentfault.com/a/1190000011225943

2、v-if和v-show的区别

https://blog.csdn.net/weixin_42614080/article/details/97950234

v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐

v-if适合运营条件不大可能改变；v-show适合频繁切换
3、VUE生命周期函数

4、VUX的五大组成部分
5、路由守卫
6、VUE中的Data为什么一定要是个函数
7、组件之间的通信方式

 

 

三、GIT方面

1、常用的git命令

 

四、HTTP方面

1、输入url后会发生什么

DNS域名解析-建立TCP连接-发送HTTP请求-服务器处理请求-返回响应结果
2、浏览器缓存
3、状态码含义
4、请求头和响应头
5、状态码
6、301和302的具体的区别
7、http和https的详情介绍以及区别

     1、https协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。

        2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl/tls加密传输协议。

        3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

        4、http的连接很简单，是无状态的；HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

五、安全方面

1、CSRF
2、XSS

六、性能优化

1、预加载
2、懒加载
3、合并请求
4、请求结果缓存
5、路由懒加载组件
6、压缩图片
7、压缩代码
​