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的优缺点

优点:

  1. 简单:官方文档很清晰,比 Angular 简单易学。
  2. 快速:异步批处理方式更新 DOM。
  3. 组合:用解耦的、可复用的组件组合你的应用程序。
  4. 紧凑:~18kb min+gzip,且无依赖。
  5. 强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。
  6. 对模块友好:可以通过 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和事件

9.less 在vue项目中如何全局引入

vue3.0配置less并使用全局变量_less全局变量如何引用-CSDN博客

10.微前端

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,527评论 5 470
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,314评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,535评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,006评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,961评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,220评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,664评论 3 392
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,351评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,481评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,397评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,443评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,123评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,713评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,801评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,010评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,494评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,075评论 2 341

推荐阅读更多精彩内容