前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库文章来源地址https://www.toymoban.com/news/detail-640738.html
数组去重
- 遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加
- 先封装一个函数，unique
function unique(arr){
var newArr =\[]
for(var i =0; i< arr.length; i++){
if (newArr.indexOf(arr\[i] === -1){
newArr.push(arr\[i])
}
}
return newArr
}
var demo = unique(\[])
console.log(demo)
foreach和map的区别
共同点
- 都是循环遍历数组中的每一项
- 每一次执行匿名函数都支持三个参数，数组中的当前项item，当前项的索引index，原始数组input
- 匿名函数中的this都是指window
- 只能遍历数组
- 能用forEach()做到循环的，map()同样也可以做到循环。
不同点
- forEach()方法不会返回执行结果，而是undefined。forEach() 被调用时，不会改变原数组，也就是调用它的数组（尽管 callback 函数在被调用时可能会改变原数组）。
- map()方法会分配内存空间存储新数组并返回，map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）。
es6新增symbol 数据类型
ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型，不能与其他类型的值进行运算，会报错，它可以作为对象属性名。只有字符串和 symbol 类型才能用作对象属性名。没有两个symbol 的值是相等的。
v-model原理
父组件给子组件标签添加v-model 就是给子组件绑定了value属性，然后子组件内用prop创建value属性可以拿到父组件传递下来的值，名字必须是value，子组件内部更改value的时候通过$emit派发一个input事件并携带最新的值，然后v-model会监听input事件，并把最新的值同步赋值到v-modle绑定的变量上面
vue响应式原理
vue2中使用了ES5里面的Object.defineProperty方法，给对应data中的数据的每个值添加了set和get方法，当值被修改时，就会触发对应的set方法，set方法里会通知对应的watcher，watcher接收后将触发render函数，重新渲染数据。
- get 值是一个函数，当属性被访问时，会触发 get 函数
- set 值同样是一个函数，当属性被赋值时，会触发 set 函数
计算属性和监听属性
当我们定义一个计算属性的时候，计算属性是一个函数，最后函数返回的结果就是计算属性得到的结果。 当我们去第一次使用计算属性的时候，会执行计算属性并进行计算，然后将计算的结果缓存起来。 后续当我们再去使用计算属性的时候，如果计算属性中使用到的数据没有发生变化，那么就会直接读取缓存的结果，不会重新计算。 常用于惰性求值
watch主要监听里面的属性，当属性改变时，就调用不同的方法，只会监听数据的值是否发生改变，而不会监听地址的变化
路由的钩子
全局路由钩子
-
beforeEach（全局前置钩子），意思是在每次每一个路由改变的时候都要执行一遍 -
afterEach（全局后置钩子） beforeEach是在页面加载之前的，而afterEach是在页面加载之后的，所以这些钩子是不会接受next函数，也不会改变导航本身
单个路由钩子
beforeEnter 可以直接在路由配置上直接定义beforeEnter，这些守卫与全局前置守卫的方法参数是一样的
组件路由钩子
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
- 清除组件中的定时器
- 当页面有未关闭的窗口，或未保存的内容时，阻止页面跳转
- 保存相关内容到Vuex和Session中
vue中的data 为什么是个函数？
- Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了；
- data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。
- 根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况
- 组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象
Token怎么存
npm i js-cookie //安装
在main.js引用
import cookie from 'js-cookie';\
Vue.prototype.$cookie = cookie;
var $cookie = this.$cookie;
//赋值
this.$cookie.set('token',$result.data.token)
//调用
headers:{
Authorization:this.$cookie.get('token')
}
//删除token
this.\$cookie.remove("token")
localStorage.setItem("key\_token",result.data.token); // localStorage方法赋值
localStorage.removeItem('token'); //删除localStorage指定键对应的值
localStorage.clear('token'); // 删除localStorage所有的的值
前端有几种缓存方式？
cookiec
当在客户端的浏览器上设置Cookie时，它可以持续数天，数月甚至数年。这样可以轻松保存用户首选项和访问信息 不需要任何服务器资源，并存储在用户的计算机上，因此不会给服务器带来额外的负担。 确实非常小，它的大小限制为4KB左右,不能储存大数据且不易读取
localStorage
5M大小 只能存储字符串格式的数据，所以最好在每次存储时把数据转换成json格式， 取出的时候再转换回来 生命周期是永久的， 除非主动删除数据，否则数据永远不会消失
sessionStorage
但当页面关闭后，sessionStorage 中的数据就会被清空。 indexdb、 50mb 允许储存大量数据，提供查找接口，支持异步操作，还能建立索引。indexDB缺点是：不支持DO操作；不能跨域。
数据请求方面
- 重输入url到页面展示经历那些过程
- 输入url地址
- 应用层进行DNS解析
- 应用层生成HTTP请求报文
- 传输层建立TCP连接
- 网络层使用IP协议来选择路线
- 数据链路层实现网络相邻节点间可靠的数据通信
- 物理层传输数据
- 服务器处理反向传输
- 服务器返回一个 HTTP 响应
- 浏览器渲染
router和route的区别
- router是VueRouter的一个对象，通过
Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，包含了所有的路由包含了许多关键的对象和属性。 - route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的
name,path,params,query等
路由传参和取参
- 通过 params 传递参数，如果我们想获取 id 的参数值，可以通过
this.$route.params.id。 - 路由属性配置传参 用
this.$route.params.id来获取到 id 的值。 - 通过 query 传参，如果我们想获取 id 的参数值，可以通过
this.\$route.query.id。
路由钩子beforeEach三个参数
1. to: Route: 即将要进入的目标路由对象（to是一个对象，是将要进入的路由对象，可以用to.path调用路由对象中的属性） 2. from: Route: 当前导航正要离开的路由 3. next: Function: 这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数。
vue等待视图完成更新后进行下一次操作后，这个函数叫什么
Vue.nextTick() 也是vue的深度更新
nextTick 是 Vue 提供的一个全局的API ，由于Vue的异步更新策略导致我们对数据的修改不会立马体现到都没变化上，此时如果想要立即获取更新后的dom的状态，就需要使用这个方法。文章来源：https://www.toymoban.com/news/detail-640738.html
- 原理是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。
- 如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。
- 而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。
- nextTick方法会在队列中加入一个回调函数，确保该函数在前面的dom操作完成后才调用。
前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
到了这里，关于【面试题】前端面试十五问的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
