一些常见的前端面试题

目录

1. ​​数组转树形结构
2. img标签 alt和title的区别
3. link和@import到底有什么区别？
4. 防抖节流
5. 你有在请求拦截器里面操作过什么
6. 数组去重方法
7. router和route的区别
8.  promise的3种状态​​​​​

---

一.数组转树形结构

// 用于处理把普通数组变成树形结构
// list中每一项有两个属性 id,pid
export function tranferListToTree (list, pid) {
  var list1 = []
  list.forEach(item => {
    if (item.pid === pid) {
      list1.push(item)
      item.children = tranferListToTree(list, item.id)
    }
  })
  return list1

二.img标签 alt和title的区别

alt属性和title属性的相同点和区别

相同之处：它们都会出现一个小浮层，显示图片相关的内容

title属性可以用在任何元素上，当用户把鼠标移动到元素上时，就会出现title的内容，起到对图片说明的作用，其实质就是对图片的一种备注或者注释

alt属性的实质是通过文字来代替图片的内容，当图片没有正常显示出来时 而title属性的实质是对图片的描述或者注释

如果图片同时设置了title属性和alt属性，鼠标悬停时仅显示图片的title属性

三.link和@import到底有什么区别？

3.1 link属于html标签 link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import是css提供的语法规则，只能加载CSS

3.2 兼容性问题 

由于@import是CSS2.1提出的所以老的浏览器不支持，而link标签无此问题，完全兼容

3.3加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载

3.4权重问题:@import的权重要高于link

3.5使用dom控制样式时的差别。当时用JS控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

四.防抖节流

防抖与节流的本质就是为了优化高频代码的方法

为了优化resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，减少资源浪费，提高前端的性能优化，我们就采用throttle（防抖）和debounce（节流）的方式来减少调用频率

节流: 几秒中 秒内只运行一次，若在几秒内重复触发，只有一次生效

防抖：需要过几秒后再执行事件，如果在这几秒钟中被重复触发，则会重新计时

五.在请求拦截器里面操作过什么

请求拦截器：发送请求的时候，携带一些信息，比如token的抬头

// 添加请求拦截器
request.interceptors.request.use(function (config) {
  const token = store.state.user.token
  if (token) {
    // 判断token有没有过期 ，用现在的时间减去token已经存在的时间 cookie存储有效时间为2小时
    const time = Date.now() - getTime()
    if (time > 2 * 60 * 60 * 1000) {
      store.dispatch('user/logout')
      router.push('/login')
    }
    config.headers['Authorization'] = 'Bearer ' + token
  }

  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

响应拦截器：接收到数据的时候，进行数据过滤、对状态码判断，进行对应的操作,例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  const { data, success, message } = response.data
  if (success) {
    return data
  } else {
    Message.error(message)
    return Promise.reject(new Error(message))
  }
}, function (error) {
  if (error.response && error.response.data && error.response.data.code === 10002) {
    store.dispatch('user/logout')
    router.push('跳转倒登陆界面')
  }
  // 对响应错误做点什么
  return Promise.reject(error)
})

六.数组去重方法 

6.1 双重for循环

6.2includes()去重法

6.3filter()循环过滤法

6.4sort()排序法

七.router和route的区别

route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

$router: 是路由的跳转方法，钩子函数等

八.promise的3种状态

Pending（进行中，初始状态，既不是成功，也不是失败状态。）

Resolved（已完成，又称 Fulfilled）

Rejected（已失败）