2024前端面试题汇总（最新）-持续更新中_前端面试题2024

let obj = [{'a' : 1}, {'b': 2}]
let deepObj = _.cloneDeep(obj)
console.log(obj)

4.2 $nextTick的作用

首先我们要先明白一个道理：Vue的响应式并不是数据发生变化后，DOM立即跟着发生变化的，而是按一定的策略进行DOM更新的。

作用：$nextTick 是在下次 DOM 更新循环结束之后执⾏延迟回调，在修改数据之后使⽤ $nextTick，则可以在回调中获取更新后的 DOM，在下次 DOM 更新循环结束之后执行延迟回调

说白了就是：当数据更新了，在DOM更新后，自动执行该函数

什么时候用？

1. Vue⽣命周期的created()钩⼦函数进⾏的DOM操作⼀定要放在Vue.nextTick()的回调函数中，原因是在created()钩⼦函数执⾏的时候,DOM 其实并未进⾏任何渲染，⽽此时进⾏DOM操作⽆异于徒劳，所以此处⼀定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。
2. 当项⽬中改变data函数的数据，想基于新的dom做点什么，对新DOM⼀系列的js操作都需要放进Vue.nextTick()的回调函数中

想了解更详细的🉑️参考：https://www.jianshu.com/p/8efa5cba7d07

4.3 Vue生命周期

可点击参考文档详细了解

4. ES6面试题

4.1 var let const 区别

var： 存在变量提升；存在变量覆盖，已经被定义且赋值的变量，如果再次被赋值，则以后一次值为准；没有块级作用域；

const： 定义的是常量，声明之后必须赋值；定义的值不能去修改，否则报错；有块级作用域；不存在变量提升和变量覆盖；对于数组和对象的元素修改，不算做对常量的修改，不会报错。

let： 有块级作用域；不存在变量提升和变量覆盖；let不允许在相同的作用域中重复声明，注意是相同作用域，不同作用域重复声明不会报错

4.2 解构赋值

let a = 1; let b = 2; 如果在不声明第三个变量的前提下，使a=2, b=1？

答案：[a, b] = [b, a]

4.3 如何利用es6快速的去重？

let arr = [23, 12, 13, 33, 22, 12, 21]

let item = [...new Set(arr)]

4.4 Promise 面试题 以下代码的执行结果是？

const promise = new Promise((resolve, reject) => {
   console.log(1)
   resolve()
   console.log(2)
})
promise.then(() => {
   console.log(3)
})
console.log(4)

答案：1,2,4,3

解释：以上考察的是关于promise的原理，promise的构造函数是同步执行的，当new Promise的一瞬间，1,2 就立刻被执行，而 .then方法是异步执行的，当执行完1和2之后，会执行输出4，最后执行输出3

4.5 跨域的解决方法

跨域：只要协议、域名和端口号有一个不相同就会产生跨域问题。同源策略是一个安全策略。同源，指的是协议，域名，端口相同。浏览器处于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。

解决办法：

4.5.1. webpack 里的proxy

devServer: {
    proxy: {  //配置跨域
      '/api': {
        target: 'http://121.121.67.254:8185/',  //这里后台的地址模拟的;应该填写你们真实的后台接口
        changOrigin: true,  //用于控制请求头中的post值，默认开启
        pathRewrite: {
          /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
            实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
           */
          '^/api': '' 
        }
      },
    }
  }

4.5.2. jsonp （需要后端支持 ）

方案1 *：通配符，全部允许，存在安全隐患(不推荐)。

一旦启用本方法，表示任何域名皆可直接跨域请求：
  1     server {
  2         ...
  3         location / {
  4             # 允许 所有头部 所有域 所有方法
  5             add_header 'Access-Control-Allow-Origin' '*';
  6             add_header 'Access-Control-Allow-Headers' '*';
  7             add_header 'Access-Control-Allow-Methods' '*';
  8             # OPTIONS 直接返回204
  9             if ($request_method = 'OPTIONS') {
 10                 return 204;