2024-04-16 前端面试题

1.闭包

什么是闭包，严格来说要满足四个条件
1.有函数嵌套
2.内部函数引用外部作用域的变量参数
3.返回值是函数
4.创建一个对象函数，让其长期驻留

闭包的应用：可以实现数据的私有

let count = 0;
function add(){
    count++
    console.log(count)
}
add()
//但是整个count是全局变量，很容易被修改

function fn(){
    let count = 0;
    function fb(){
         count++
         console.log(count)
    }
    return fb
}
let result = fn()  //完成这一句才算是闭包
result() //1
result() //2

    //实现了数据私有，无法直接修改count

2.事件循环

1.js是单线程，防止代码阻塞，我们把代码（任务）：同步和异步
2.同步代码给js引擎执行，异步代码交给宿主环境
3.同步代码放入执行栈中，异步代码等待时机成熟送入任务队列排队
4.执行栈执行完毕，回去任务队列看是否有异步任务，有就送到执行栈执行，反复循环查看执行，这个过程是事件循环。

3. 宏任务和微任务

js把异步任务分为宏任务和微任务

1.同步代码（js执行栈/回调栈）
2.微任务的异步代码（js引擎）
process.nextTick
Promise.then catch() Promise本身同步，then/catch的回调函数是异步中的微任务
Async/Await
Object.observe等等
3.宏任务的异步代码（宿主环境）
script(代码块)
setTimeout / setInterval 定时器
setImmediate 定时器

3.原型和原型链

原型：每个函数都有prototype属性称之为原型
因为这个属性的值是个对象，也称为原型对象
作用：
1.存放一些属性和方法
2.在javasscipt中实现继承

const arr = new Array(1,2,3)
arr.reverse()
console.log(arr.__protp__ === Array.prototype) //true
Array.prototype 原型  中有reverse 方法
构造函数Array
实例arr

原型链：对象都有__proto__属性，这个属性指向它的原型对象，原型对象也是对象，也有__proto__属性，指向原型对象的原型对象，这样一层一层形成的链式结构称为原型链，最顶层找不到则返回null

4.如何判断两个对象相等

2.Object.keys()

function areObjectsEqual(obj1, obj2) {
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
 
  if (keys1.length !== keys2.length) {
    return false;
  }
 
  for (let key of keys1) {
    if (obj1[key] !== obj2[key]) {
      return false;
    }
  }
 
  return true;
}
 
const obj1 = { name: 'Alice', age: 25 };
const obj2 = { name: 'Alice', age: 25 };
const obj3 = { age: 25, name: 'Alice' };
 
console.log(areObjectsEqual(obj1, obj2)); // true
console.log(areObjectsEqual(obj1, obj3)); // false

3.ES6 Object.entries(obj).toString()

const obj = { name: 'xiaoming', age: 'seven',sex: 'man', grade: 'four' };
const obj2 = { name: 'xiaoming', age: 'seven',sex: 'man', grade: 'four' };
console.log(Object.entries(obj).toString() == Object.entries(obj2).toString())

5.nextTick的原理

nextTick 是 Vue 提供的一个异步方法，用于在 DOM 更新之后执行回调函数。它的原理是利用 JavaScript 的事件循环机制来实现异步执行

6.vue的优缺点

优点：

简单：官方文档很清晰，比 Angular 简单易学。
快速：异步批处理方式更新 DOM。
组合：用解耦的、可复用的组件组合你的应用程序。
紧凑：~18kb min+gzip，且无依赖。
强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
缺点：
不支持IE8。
Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
vue是单页面页面，对于搜索引擎不友好，影响seo.因此不适合做公司官网。比如两个vue路由（页面），它的路径是这样的：index.html#aaa 和 index.html#bbb，但对于搜索引擎来说，都是同一个页面，就是index.html。这样搜索引擎就无法收录你的页面。

7.生命周期

1.又名：生命周期回调函数、生命周期函数、生命周期钩子
2.是什么：vue在关键时刻帮我们调用的一些特殊名称的函数
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
4.生命周期函数中的this指向是vm或组件实例对象

beforeCreate 此时：无法通过vm访问到data中的数据、methods中的方法
created 此时：可以通过vm访问到data中的数据、methods中配置的方法
beforeMount 此时：1.页面呈现的是未经Vue编译的DOM结构 2.所有对DOM的操作，最终都不奏效
mounted 此时：1.页面中呈现的是经过Vue编译的DOM 2.对DOM的操作均有效（尽可能避免）。至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作
beforeUpdate 此时：数据是新的，但页面是旧的，即：页面尚未和数据保持同步
updated 此时：数据是新的，页面也是新的，即：页面和数据保持同步
beforeDestroy 此时：vm中所有的：data、methods、指令等待，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
destroyed

activated 路由组件被激活时触发
deactivated 路由组件失活时触发
nextTick

vue3中 beforeUnmount和unmounted代替beforeDestroy 和destroyed

常用的生命周期钩子:
1.mounted/发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

8.vue组件之间通信

在Vue中，组件间通信主要有以下几种方式：

1.父子组件通信：props / $emit 2.子父组件通信：$ emit / v-on
3.兄弟组件通信：EventBus / Vuex
4.跨多层组件通信：EventBus / Vuex / provide / inject
5.Vuex：状态管理，适合大型应用
vuex:vuex相关 - 简书 (jianshu.com)
6.EventBus：创建一个事件中心，用 $emit触发事件，用$ on监听事件
7.provide / inject：父组件提供数据，子组件注入数据，无需props和事件