前端知识

69 阅读7分钟

type和interface的区别: 共同点:都可以描述一个对象或者函数,都可以继承.interface通过extends关键字来继承,type通过&符号来实现类型重组 不同点:type可以声明类型别名,联合类型,元组。interface可以多次声明同一个接口,interface可以合并声明, interface通过&实现类型合并.通过|实现类型交集

const和readonly的区别: const可以防止变量修改 readonly防止变量属性修改

keyof和typeof关键字的作用: keyof索引类型查询符,获取索引类型的属性名,构成联合类型 typeof获取一个变量或对象类型

虚拟DOM原理: 虚拟DOM就是将真实DOM抽象成一颗对象树,状态变更的时将记录新树和久树的差异,然后通过diff算法比较新旧之间的差异,最后更新到真实DOM中。diff算法一般是递归

虚拟DOM优点: 因为本质是javascript对象,所以支持跨平台。 不需要手动操作DOM,提高了开发效率 缺点: 无法进行极致优化,

setState: setState在合并事件和钩子函数中时异步,在setTimeout和原生事件是同步的

组件通信: 父传子,通过props传递,也可以通过中间context 子传父,通过回调方式

useState是异步方式,可以使用回调函数进行同步 useReducer使用场景: 多个状态有相互依赖,比如请求接口,loading和data

Typescript模块加载机制: 例如:导入一个import {a} from 'moduleA',首先会通过绝对或者相对路径查找,没有找到则会去查找d.ts模块声明,没有找到则会抛错

component组件中使用hooks组件通信方式: 1、可以通过ref 2、使用context来操作 3、使用自带的children,调用子组件的时候,子组件包含一个函数。

useMemo使用场景: 缓存数据,只有在依赖发生变化的时候才会去更新里面的值,返回值就是缓存的值 useCallback使用场景: 缓存函数,只有在依赖发生变化的时候才会执行,配合memo使用,memo是一个高阶组件,包括自组件 memo:类似PureComponent作用,防止组件重复渲染

事件循环: 当脚本执行一段js,会将同步代码按照执行顺序加入执行栈中,然后从头开始执行,遇到方法,就会向栈中添加这个方法的执行环境,当执行完成后,js会退出,并且销毁当前执行环境,回到上一个方法执行环境,,直到栈中代码执行完成 在js中分微任务和宏任务,宏任务包括script整体代码,settimeout,setInterval等,微任务包括async/await,promise等,执行宏任务,然后执行宏任务中产生微任务,若微任务中产生了新的微任务,则继续执行微任务,执行完成之后再执行宏任务。

null 和 undefined的区别 null代表的是控对象,undefined是未定义,两者在if中都是false

堆和栈的区别: 栈是一种连续存储的数据结构,具有先进后出 堆是一个非连续的树形存储结构,具有队列性质,先进先出

js中类型判断: typeof只能对基本数据类型判断 instanceof只能对引用数据类型就行判断 object.prototype.toString.call()可以判断任何数据类型

typeof null 结果为object

事件委托: 事件委托就是利用冒泡一直向上传递,然后在父节点进行监听

作用域和作用域连: 作用域就是变量定义的区域,

防抖和截流: 防抖:就是在触发事件后在n秒内只执行函数一次 截流:连续触发事件,但是在n秒内只执行函数一次

深拷贝和浅拷贝: 浅拷贝: 只是拷贝第一层数据 深拷贝: 将对象逐层属性进行拷贝

this指向: 在全局下this指向的是windows,在对象调用里面,谁调用就指向谁,箭头函数没有this,箭头函数this指向上一层的this

闭包: 有权访问另一个函数作用域的变量,一般就是函数包裹着函数,当外部调用内部函数时,即使外部函数已经执行结束,但是内部函数引用的变量依然存在内存中

call、apply、bind的区别: 相同: 都是用于改变this指向 call后面跟的是一个参数列表直接调用 apply后面跟的是一个数据,也是直接调用 bind返回的是一个函数,不会立即执行

变量提升: 表象就是在变量或者函数声明前访问不会报错.会造成变量模糊,

map和forEach的区别: map返回一个新的数组 forEach不会有返回值

for...in和for...of的区别: for...in遍历的是数组索引 for...of遍历的是数组值

模块化的方式: commonJS: 使用module,export来支撑 AMD: CMD: ES6:

vue源码: vue.js是采用数据劫持结合发布订阅,通过object.defineProperty来劫持各个属性,在数据变化的时候发布消息给订阅者。其中主要的有: Observe:监听数据变化,发布消息给订阅者 Watcher:订阅者,接受observe发布的消息,并且将数据传递给解析器 Complie:解析器,更新视图

vue中computed和watch的区别: computed是vue的计算属性,具有缓存性,当他的依赖改变的时候才会从新计算 watch没有缓存,当data中的数据变化的时候就会计算

为什么vue中data必须是函数: data为引用数据类型时,当一个组件修改,其他用该组件的data就会被修改,使用返回对象,每次返回的都是一个新的对象。

vue中v-if和v-show有什么区别: v-if在切换时会对标签销毁和创建,v-show相当于opacity为0,不会对dom结构进行改变

vuex数据流向: component通过dispatch触发action,action commit到mutations,最终mutations更改state,最后更新视图

原型和原型链: 每个对象都有一个prototype属性,指向一个对象,这个对象就是原型 原型链:实例中找不到对象的属性的时候,就会向原型对象上面找,直到null的时候才停止

instanceof原理: 是根据对象proptotype上面的对象来进行判断

hash路由和history路由: hash模式:通过监听浏览器hash值当变化来切换响应的网页,使用window.location.hash属性和onhashchange事件可以实现浏览器路由hash值的变化。 history模式: 利用h5的history api来实现URL地址改变,网页内容改变,通过window.history来实现,history缺点强制刷新浏览器,会拿当前地址去服务器请求,如果服务器没有,则会报错

babel编译原理: babel是javascript的编译器,babel内部原理是将js代码转换成AST,对AST应用各种插槽进行处理,最终输出编译后的js代码.

redux工作流程: 三大原则:单一原则、state只读,只能通过action来改变、使用纯函数,通过reducer来修改state 工作流程:component通过dispatch触发action,然后通过reducer来修改state,最后更新视图

script中defer和async的区别: 都是异步加载script代码,defer页面渲染完成之后才执行代码,async是下载完成之后就执行

refs是什么: refs是提供给我们安全访问DOM元素或者组件的句柄

setState调用之后发生了什么? 调用setState函数之后,React会将传入的对象参数与组件当前的状态合并,然后触发调和过程,更新视图