前端基础常问的面试题
1.自我介绍
长大了我想去当太空人,爷爷奶奶可高兴了,给我爱吃的大嘴巴子
2.js的作用域和作用域链
- 规定变量和函数的可使用范围称作作用域
- 每个函数都有一个作用域链,查找变量或者函数时,需要从局部作用域到全局作用域依次查找,这些作用域的集合称作作用域链。
3.解释闭包,闭包的用法
函数执行,形成私有的执行上下文,使内部私有变量不受外界干扰,起到保护和保存的作用。
作用:
- 保护
- 避免命名冲突
- 保存
- 解决循环绑定引发的索引问题
- 变量不会销毁
- 可以使用函数内部的变量,使变量不会被垃圾回收机制回收
应用:
- 设计模式中的单例模式
- for循环中的保留i的操作
- 防抖和节流
- 函数柯里化
缺点
- 会出现内存泄漏的问题
4.解释防抖、节流
- 防抖
- n秒后在执行该事件,若在n秒内被重复触发,则重新计时
- 节流
- n秒内只运行一次,若在n秒内重复触发,只有一次生效
// ---------------------------------------------------------防抖函数
function debounce (func, delay) {
let timeout
return function () {
let args = arguments
let _this = this
if (timeout) clearTimeout(timeout)
timeout = setTimeout(() => {
func.apply(_this,args)
}, delay)
}
}
// ---------------------------------------------------------节流 ,时间戳版
function throttle (func, delay) {
let previous = 0
return function () {
let now = Date.now()
let args = arguments
let _this = this
if (now - previous > delay) {
func.apply(_this, args)
previous = now
}
}
}
5.解释Vue里的虚拟DOM
虚拟DOM在vue中主要提供与真实节点对应的虚拟节点vnode,然后需要将vnode和oldVnode进行比对,然后更新视图,对比两个虚拟节点的算法是patch算法
6.Vue的生命周期
beforeCreate
- 创建之前,此时还没有data和Method
created
- 创建完成,此时data和Method可以使用了
-在created之后beforeMount之前如果没有el选项的话那么此时生命周期结束,停止编译,如果有则继续
- 创建完成,此时data和Method可以使用了
beforeMount
- 在渲染之前
mounted
- 页面已经渲染完成,并且vm实例中已经添加完$el了,已经替换掉那些DOM元素了(双括号中的变量),这个时候可以操作DOM了(但是是获取不了元素的高度等属性的,如果想要获取,需要使用nextTick())
beforeUpdate
- data改变后,对应的组件重新渲染之前
updated
- data改变后,对应的组件重新渲染完成
beforeDestory
- 在实例销毁之前,此时实例仍然可以使用
destoryed
- 实例销毁后
7.Vue组件之间的通信方式
- 父传子
- 子组件设置props + 父组件设置
v-bind:
/:
- 子组件设置props + 父组件设置
- 子传父
- 子组件的$emit + 父组件设置
v-on
/@
- 子组件的$emit + 父组件设置
- 任意组件通信,新建一个空的全局Vue对象,利用
emit
发 送 ,$on
接收- 传说中的$bus,任意组件
Vue.prototype.Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});
- 父组件通过v-bind:/:传值,子组件通过this.$attrs获取
- 父传子
- 当子组件没有设置props的时候可以使用
- this.$attrs获取到的是一个对象(所有父组件传过来的集合)
祖先组件使用provide提供数据,子孙组件通过inject注入数据
- parent/children
- refs—$ref
- Vuex
- 里面的属性有:
- state
- 存储数据的
- 获取数据最好推荐使用getters
- 硬要使用的话可以用MapState, 先引用,放在compute中…mapState([‘方法名’,‘方法名’])
- getters
- 获取数据的
- this.$store.getters.xxx
- 也可使用mapGetters 先引用,放在compute中,…mapGetters([‘方法名’,‘方法名’])
- mutations
- 同步操作数据的
- this.$store.commit(“方法名”,数据)
- 也可使用mapMutations ,使用方法和以上一样
- actions
- 异步操作数据的
- this.$store.dispatch(“方法名”,数据)
- 也可使用mapActions ,使用方法和以上一样
- modules
- 板块,里面可以放多个vuex
- state
- 里面的属性有:
8.Vuex(楼上)
9.解释Vue的数据绑定原理
数据劫持: vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()
来劫持各个属性的setter
,getter
,在数据变动时发布消息给订阅者,触发相应的监听回调
10.编写一个数组去重的方法
var arr = [1, 2, 1, 1, 1, 2, 3, 3, 3, 2]
// 最low1
let newArr2 = []
for (let i = 0; i < arr.length; i++) {
if (!newArr2.includes(arr[i])) {
newArr2.push(arr[i])
}
}
console.log(newArr2);
// 最low2
let arr2 = [1, 2, 1, 1, 1, 2, 3, 3, 3, 2]
for (let i = 0; i < arr2.length; i++) {
var item = arr2[i]
for (let j = i + 1; j < arr2.length; j++) {
var compare = arr2[j];
if (compare === item) {
arr2.splice(j, 1)
j--
}
}
}
console.log(arr2);
// 基于对象去重
let arr3 = [1, 2, 1, 1, 1, 2, 3, 3, 3, 2]
let obj = {}
for (let i = 0; i < arr3.length; i++) {
let item = arr3[i]
if (obj[item]) {
arr3[i] = arr3[arr3.length - 1]
arr3.length--
i--
continue;
}
obj[item] = item
}
console.log(arr3);
console.log(obj);
// 利用Set
let newArr1 = new Set(arr)
console.log([...newArr1]);
let arr4 = [1, 2, 1, 1, 1, 2, 3, 3, 3, 2]
//利用reduce
newArr4 = arr4.reduce((prev, curr) => prev.includes(curr)? prev : [...prev,curr],[])
console.log(newArr4);
11.localStorage、SessionStorage、cookie、session三者的区别
- localStorage
- 生命周期:关闭浏览器后数据依然保留,除非手动清除,否则一直在
- 作用域:相同浏览器的不同标签在同源情况下可以共享localStorage
- sessionStorage
- 生命周期:关闭浏览器或者标签后即失效
- 作用域:只在当前标签可用,当前标签的iframe中且同源可以共享
- cookie
- 一开始cookie 不是用来存储的,而是为了弥补 http 的状态的不足,http 是无状态协议。每当向服务器发起请求、请求结束,下次发送请求的时候服务端就不知道是谁了,所以 cookie 是用来弥补这个不足的
- cookie 有很多缺陷,比如:
- 容量缺陷。cookie 的存储空间只有4KB
- 性能缺陷。有时候 cookie 我们用不到,但是不管用的到用不到,http 在发送请求的时候一定会带着 cookie,这就造成了性能的浪费
- 安全缺陷。cookie 在 http 下很容易被非法用户获取。尤其是设置了 http-only 为 false 的情况下,这个时候 js 可以读取到 cookie,很容易受到 xss攻击。
- cookie 是保存在客户端的,一般由 server 设置值及过期时间
- cookie 没有提供删除的 API,如果想要删除的 的话可以把 max-age 设为0或者把 expire 设置为当前时间(立刻过期)即可
- cookie 的属性有
- http-only
- 不能被客户端更改访问,防止 XSS 攻击
- max-age
- 生效后存活的时间
- Secure
- 是否只允许在 https 下传输
- expire
- 过期时间
- http-only
- session
- session 是保存在服务端的
- session 的运行依赖 sessionId,sessionId 又保存在 cookie 中,所以禁用了 cookie之后 session 也是用不了的,如果硬要用也可以,可以把 sessionId 存储在 url 中
- session一般是用来跟踪用户状态的
- session 比较安全,因为存储在服务器中,不过为了减少服务端的压力,很多信息还是推荐存在 cookie 中的
12.有项目的话,问项目的问题比较多(出现的问题,你负责的是什么)
吧啦吧啦吧啦
13.自己的规划
长大了我想去当太空人,爷爷奶奶可高兴了,给我爱吃的大嘴巴子
后续想到继续更新…
个人博客 : https://zhuangweixin.github.io/Blog