整理前端面试题的自己理解

一个懒惰的小码农

已于 2022-05-03 18:28:02 修改

阅读量134

点赞数

分类专栏：面试知识文章标签：前端

于 2022-03-02 22:15:11 首次发布

本文链接：https://blog.csdn.net/weixin_45736609/article/details/123224487

版权

面试知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS

数据类型

基本类型

number string undefined null boolean
symbol es6新增。独一无二的，函数前不能new，对象会被tostring 转成字符串，不能以其他类型值进行计算，值可以转成布尔，不能转成数组
bigint es10新增

引用类型

array object function date

判断

typeof 判断基本类型，null返回object，引用类型也返回object
instanceof 判断引用类型
Object.prototype.toString.call([]) 也可以用来判断类型

区别

基本类型存在于栈内存
引用类型存在于堆内存

赋值、深拷贝、浅拷贝

赋值：对于基本类型赋值就是在栈内存中开辟一个新的存储区域来存储新的变量。对于引用类型赋值，就是将该引用类型的地址，指向堆中的同一值。
浅拷贝：将原始对象中的值遍历一层，然后赋值给一个新的对象
深拷贝：深拷贝其实就是浅拷贝的进阶版，因为浅拷贝只循环遍历了一层数据，对于引用类型拷贝的是对象的地址，但是深拷贝会进行多层的遍历，将所有数据进行数据层面的拷贝
深拷贝方式。1、for 循环，2、json，3、递归

重绘和重排（回流）

不影响页面布局的是重绘，例如更换背景颜色，边框样式等。
影响页面布局，需要dom树进行重新计算的是重排。
重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）

js闭包

函数和函数内部能访问到的变量的总和，就是一个闭包。
可以在函数外部读取函数内部成员。让函数内成员始终存活在内存中

普通函数和箭头函数区别

写法：
普通：let fun = function ( ){ }
箭头：let fun = ( ) =>{ }
区别：
（1）箭头函数是匿名函数，不能作为构造函数，不能使用new。
（2）箭头函数不绑定arguments，取而代之用rest参数…解决
（3）this的作用域不同，箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值。
（4）箭头函数没有原型属性
（5）箭头函数不能当做Generator函数,不能使用yield关键字

Dom事件委托

一个响应时间委托给另一个元素。例如有一个列表，列表项有大量的点击事件，点击事件绑定到他的父层。
优点：减少内存消耗，动态绑定。

for in,for of,forEach

for in 可以用于数组和对象，遍历属性名，而不是属性值
for…of语法是ES6新引入的语法，for…of语法用于遍历可迭代（iterable）对象，js中的可迭代对象包括字符串String、数组Array、集合Set、字典Map、arguments 对象、DOM NodeList 对象等等，for…of语法用于遍历这些对象本身的元素。
forEach作用于数组对象，用于遍历数组对象的每一个元素，并对每一个元素执行回调(callback)函数。无法与上两种结束循环，可以通过制造异常结束

vue

vue 中data 为啥是函数不是对象

同一个组件可以被复用，引用多次。对象只有一个堆内存空间。会互相污染。函数可以实现闭包，有独立的作用域。

插槽有几种类型

匿名插槽 <slot></slot>
具名插槽 <slot name="名称"></slot>
作用域插槽 <slot name='ok' :myname='参数'><template v-slot=“名称”></template>

vue内置指令

https://segmentfault.com/a/1190000012911791

vue父组件监听子组件

$emit 子组件生命周期发射
$o p t i o n s ‘ c o n s t h o l l o = t h i s .$ refs[‘id’].$options`
@hook:event <Child @hook:mounted="doSomething"></Child>

递归组件

嵌套循环,定义一个list组件，自己调用自己

<div v-for="(item,index) in arr" :key="index">
     <div v-if="item.children">
       <List :list="item.children"></List>
     </div>
</div>

vue使用v-for遍历对象时，是按什么顺序遍历的？如何保证顺序？

1、会先判断是否有iterator接口，如果有循环执行next()方法
2、没有iterator的情况下，会调用Object.keys()方法，在不同浏览器中，JS引擎不能保证输出顺序一致
3、保证对象的输出顺序可以把对象放在数组中，作为数组的元素

值传递

props $emit
$ref $parent/$children
provide/inject 组件库常用
$attrs、$listeners 跨级组件
attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=“$attrs” 传入内部组件——在创建高级别的组件时非常有用。
listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器
兄弟组件传递用EventBus

A页面
methods(){
    busA1 () {
     this.$EventBus.$emit('enentbus1', 'bus1')
   },
   busA2 () {
     EventBus.$emit('enentbus2', 'bus2')
   }
}

B页面
mounted () {
   this.$EventBus.$on('enentbus1', val => {
     this.busB1(val)
   })

   EventBus.$on('enentbus2', val => {
     this.busB2(val)
   })
   this.init()
 },
 beforeDestroy () {
   this.$EventBus.$off('enentbus1', this.busB1())
   EventBus.$off('enentbus1', this.busB2())
 },

computed 和 watch

computed

如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，多对一或者一对一，一般用computed
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
支持缓存，只有依赖数据发生改变，才会重新进行计算
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

watch

watch监听是已经存在的属性，是data中的属性；如果data是对象形式，并且只需要监听该对象下的属性，也可以把监听对象写成字符串形式
当一个属性发生变化时，需要执行对应的操作；一对多
支持异步
4.不支持缓存，数据变，直接会触发相应的操作；
5.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
immediate，最初绑定值时也执行函数，需要用到
deep ，普通的watch方法无法监听到对象内部属性的改变，需要开启深度监听
handler watch中需要具体执行的方法

data(){
	num:1,
	price:10
},
computed(){
	totalPrice(){
		return this.num*this.price
	}
},
watch: {
   cityName: {
     handler(newName, oldName) {
     // ...
   },
   deep: true,
   immediate: true
   }
 }

nextTick

官方定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
自己理解：dom更新后对dom做操作，vue 的 dom更新为异步更新。

路由守卫

to 即将要进入的目标路由对象
form 当前导航正要离开的路由
next 执行下一步
三个个全局守卫 beforEach beforeResolve afterEach
一个独享守卫 beforeEnter
三个组件守卫 beforeRouteEnter beforeRouteUpdate beforeRouteLeave
beforeEnter 守卫只在进入路由时触发（生命周期中的beforcreate），不会在 params、query 或 hash 改变时触发。例如，从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在从一个不同的路由导航时，才会被触发。

vue-router组件

ruoter-link
router-view

mixin

在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立
这时，可以通过Vue的mixin功能将相同或者相似的代码提出来\
本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等