21年前端面试宝典

不积跬步无以至千里,不积小流无以成江海


一、es6的新特性

let / const / 箭头函数 / 函数默认值 / 对象和数组解构 / 模板字符串 / 展开运算符

二、promise的使用,怎么用es5实现promise

三、if有作用域吗

只有函数有作用域,if语句原本没有作用域。 但是如果里面出现 let 或者 const 就会设计块作用域

四、原型链和作用域链的区别

原型链:
当访问一个对象的某个属性时,如果该对象为找到,则会访问该对象的__proto__属性,也就是构造函数的prototype,直到找到或者找到最顶端为止,没有则返回undefined。这个过程就是原型链。

作用域链:
变量取值 会到这个变量所在函数作用域中查找,如果该作用域未找到,则向全局查找。这个过程就是作用域链。

区别:
原型链 针对 对象而言, 最顶端是Object
作用域链 针对 变量而言, 最顶端是 window

五、js判断类型

1. typeof :检测不出null和数组 ,结果都是Object,所以typeof常用于检查基本类型。
例:console.log(typeof true) // boolean
2. instanceof:不能检测出number,Boolean,string,undefined, null, symbol类型,所以instanceof常用于检测复杂类型
例:console.log([1,2] instanceof Array) // true
3. constructor:null,undefined没有constructor方法,因此constructor不能判断 null 和 undefined,但是constructor的指向可以被改变,所以不安全。
例: console.log([1, 2].constructor === Array) // ture
5. Object.prototype.toString.call 全类型都可以判断。

六、普通函数和箭头函数的区别

1、普通函数
可以通过bind、call、apply改变this指向
可以使用new
2、箭头函数
本身没有this指向,
它的this在定义的时候继承自外层第一个普通函数的this
被继承的普通函数的this指向改变,箭头函数的this指向会跟着改变
箭头函数外层没有普通函数时,this指向window
不能通过bind、call、apply改变this指向
使用new调用箭头函数会报错,因为箭头函数没有constructor

七、如何用原生js给一个按钮绑定两个onclick事件

var btn = document.getElementById(‘btn’)
btn.addEventListener(‘click’, fn1)
btn.addEventListener(‘click’, fn2)

function fn1 () {
console.log(‘我是方法1’)
}

function fn2 () {
console.log(‘我是方法2’)
}

八、document.write和innerHTML的区别

document.write 将内容写入页面,清空替换掉原来的内容,会导致重绘

document.innerHTML 将内容写入某个Dom节点,不会重绘

九、解释下重绘和回流

html 加载时发生了什么
在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等。
浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体
DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree,但区别很大,因为render tree能识别样式,render tree中每个NODE都有自己的style,而且render tree不包含隐藏的节点(比如display:none的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到 render tree中。我自己简单的理解就是DOM Tree和我们写的CSS结合在一起之后,渲染出了render tree。

什么是回流
当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建render tree。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。

什么是重绘
当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。

区别:
他们的区别很大:
回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如:添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变——边距、填充、边框、宽度和高度,内容改变

扩展:
浏览器的帮忙
所以我们能得知回流比重绘的代价要更高,回流的花销跟render tree有多少节点需要重新构建有关系
因为这些机制的存在,所以浏览器会帮助我们优化这些操作,浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

自己的优化
但是靠浏览器不如靠自己,我们可以改变一些写法减少回流和重绘
比如改变样式的时候,不去改变他们每个的样式,而是直接改变className 就要用到cssText 但是要注意有一个问题,会把原有的cssText清掉,比如原来的style中有’display:none;’,那么执行完上面的JS后,display就被删掉了。
为了解决这个问题,可以采用cssText累加的方法,但是IE不支持累加,前面添一个分号可以解决。
还有添加节点的时候比如要添加一个div里面有三个子元素p,如果添加div再在里面添加三次p,这样就触发很多次回流和重绘,我们可以用cloneNode(true or false) 来避免,一次把要添加的都克隆好再appened就好了,还有其他很多的方法就不一一说了

十、栈和堆的区别

1、堆
动态分配内存,内存大小不一,也不会自动释放

2、栈
自动分配相对固定大小的内存空间,并由系统自动释放

3、基本类型都是存储在栈中,每种类型的数据占用的空间的大小是确定的,并由系统自动分配和释放。内存可以及时回收。

4、引用类型的数据都是存储在堆中。准确说是栈中会存储这些数据的地址指针,并指向堆中的具体数据。

十一、undefined 和 null 区别

1、null
什么都没有,表示一个空对象引用(主动释放一个变量引用的兑现那个,表示一个变量不再指向任何引用地址)
2、undefined
没有设置值的变量,会自动赋值undefined
3、区别
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true

十二、JS哪些操作会造成内存泄露

内存泄漏是指一块被分配的内存既不能使用,也不能回收,直到浏览器进程结束。
1、意外的全局变量
2、闭包
3、没有清理的dom元素
dom元素赋值给变量,又通过removeChild移除dom元素。但是dom元素的引用还在内存中
4、被遗忘的定时器或者回调

参考:https://www.jianshu.com/p/763ba9562864

十三、谈谈垃圾回收机制方式及内存管理

JavaScript 在定义变量时就完成了内存分配。当不在使用变量了就会被回收,因为其开销比较大,垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。
(1)垃圾回收
标记清除法
当变量进入环境时,将这个变量标记为’进入环境’。当标记离开环境时,标记为‘离开环境’。离开环境的变量会被回收
引用技计数法
跟踪记录每个值被引用的次数,如果没有被引用,就会回收
(2)内存管理
内存分配=》内存使用=》内存回收

十四、什么是闭包,如何使用它,为什么要使用它?

(1)闭包就是能够读取其它函数内部变量的函数
(2)使用方法:在一个函数内部创建另一个函数
(3)最大用处有两个:读取其他函数的变量值,让这些变量始终保存在内存中
(4)缺点:会引起内存泄漏(引用无法被销毁,一直存在)

十五、请解释JSONP的工作原理,以及它为什么不是真正的AJAX

JSONP 是一种非正式传输协议,允许用户传递一个callback给服务端,然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。当GET请求从后台页面返回时,可以返回一段JavaScript代码,这段代码会自动执行,可以用来负责调用后台页面中的一个callback函数。
它们的实质不同
ajax的核心是通过xmlHttpRequest获取非本页内容
jsonp的核心是动态添加script标签调用服务器提供的js脚本
jsonp只支持get请求,ajax支持get和post请求

十六、请解释一下JavaScript的同源策略

同源指协议,域名,端口相同,
同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和文档的属性。

十七、new操作符到底到了什么

(1)var obj = new Fun() 做了三件事

var obj = {} // 创建一个空对象
obj.proto = Fun.prototype //空对象的__proto__指向构造函数的原型对象
Fun.call(obj) // 构造函数this指向替换成obj

(2)实现一个new
function _new(fn, …arg) {
const obj = Object.create(fn.prototype);
const ret = fn.apply(obj, arg);
// 根据规范,返回 null 和 undefined 不处理,依然返回obj,不能使用
// typeof result === ‘object’ ? result : obj
return ret instanceof Object ? ret : obj;
}

十八、js延迟加载的方式有哪些?

(1)defer属性

立即下载,但是会等到整个页面都解析完成之后再执行
(2)async属性

不让页面等待脚本下载和执行(异步下载),但是无法控制加载的顺序
(3)动态创建script标签
(4)使用定时器延迟
(5)让js最后加载

十九、promise、async有什么区别

1、什么是Async/Await
async/await是写异步代码的新方式,使用的方式看起来像同步
async/await是基于Promise实现的,它不能用于普通的回调函数。

2、什么是promise
为了解决异步嵌套而产生,让代码更易于理解

区别,async/await让代码更像同步,进一步优化了代码

二十、== 和 =的区别,什么情况下用相等

”==” 是判断转换后的值是否相等,

”===” 是判断值及类型是否完全相等

不需要判断类型时可以使用==

如果做过小程序就问下,=在小程序中有遇到过什么坑吗

二十一、介绍暂时性死区

在代码块内,使用let、const命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”。

二十二、介绍各种异步方案

(1)回调函数
(2)promise
(3)async/await

注:写一下 async / await 封装个调用接口的方法(简要版即可)

二十三、解释下微任务和宏任务

二十四、JS为什么要区分微任务和宏任务

(1)js是单线程的,但是分同步异步
(2)微任务和宏任务皆为异步任务,它们都属于一个队列
(3)宏任务一般是:script,setTimeout,setInterval、setImmediate
(4)微任务:原生Promise
(5)遇到微任务,先执行微任务,执行完后如果没有微任务,就执行下一个宏任务,如果有微任务,就按顺序一个一个执行微任务

二十五、Promise和setTimeout执行先后的区别

Promise是微任务,setTimeout是宏任务,先执行微任务,如有还有微任务执行完微任务再执行下一个宏任务

vue1、介绍虚拟DOM

(1)让我们不用直接操作DOM元素,只操作数据便可以重新渲染页面
(2)虚拟dom
虚拟dom是为了解决浏览器性能问题而被设计出来的
当操作数据时,将改变的dom元素缓存起来,都计算完后再通过比较映射到真实的dom树上
(3)diff算法比较新旧虚拟dom
如果节点类型相同,则比较数据,修改数据
如果节点不同,直接干掉节点及所有子节点,插入新的节点
如果给每个节点都设置了唯一的key,就可以准确的找到需要改变的内容,否则就会出现修改一个地方导致其他地方都改变的情况。比如A-B-C-D, 我要插入新节点A-B-M-C-D,实际上改变的了C和D。但是设置了key,就可以准确的找到B C并插入

vue2、vue中如何编写可复用的组件

(1)以组件功能命名
(2)只负责ui的展示和交互动画,不要在组件里与服务器打交道(获取异步数据等)
(3)可复用组件不会因组件使用的位置、场景而变化。尽量减少对外部条件的依赖。

vue3、vue如何优化首屏加载速度?

(1)按需加载组件,不一次性加载所有组件
(2)减少打包js,如果打包后的js文件过大,会阻塞加载。如下:

	A、在index.html文件中:
	```
	<script src="/static/common/js/vue.min.js"></script>
	```
	B、在vue.config.js文件中配置:
	config.externals({
	      vue: 'Vue',
	 })
	 配置两个步骤,不打包vue

(3)关闭sourcemap,开启压缩代码
vue.config.js文件中配置:productionSourceMap: false,
(4)加个好看的loading效果

vue4、Vue组件通讯有哪些方式?

1、props 和 $emit。父组件向子组件传递数据是通过props传递的,子组件传递给父组件是通过$emit触发事件来做到的。

2、$parent 和 $children 获取单签组件的父组件和当前组件的子组件。

3、$attrs 和 $listeners A -> B -> C。Vue2.4开始提供了$attrs和$listeners来解决这个问题。

4、父组件中通过 provide 来提供变量,然后在子组件中通过 inject 来注入变量。(官方不推荐在实际业务中适用,但是写组件库时很常用。)

5、$refs 获取组件实例。

6、envetBus 兄弟组件数据传递,这种情况下可以使用事件总线的方式。

7、vuex 状态管理。

vue5、computed 和 watch 的区别和运用的场景

computed 是计算属性,依赖其它属性计算值,并且 computed 的值有缓存,职友集当计算值变化才会返回内容,他可以设置getter和setter。

watch 监听到值的变化就会执行回调,在回调中可以进行一系列的操作。

计算属性一般用在模板渲染中,某个值是依赖其它响应对象甚至是计算属性而来;而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。

vue6、v-for为什么要加key

如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 是为Vue中Vnode的唯一标识,通过这个key,我们的diff操作可以更准确、更快速。
更准确: 因为带key就不是就地复用了,在sameNode函数 a.key === b.key 对比中可以避免就地复用的情况。所以更加准确。
更快速: 利用key的唯一性生成map对象来获取对应节点,比遍历方式块。

vue7、vue 中使用了哪些设计模式?

1、工厂模式 - 传入参数即可创建实例
虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode。

2、单例模式 - 整个程序有且仅有一个实例
vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉。

3、发布-订阅模式。(vue 事件机制)

4、观察者模式。(响应式数据原理)

5、装饰器模式(@装饰器的用法)

6、策略模式,策略模式指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案 - 比如选项的合并策略。

vue8、写过自定义指令吗?原理是什么?

指令本质上是装饰器,是 vue 对 HTML 元素的扩展,给 HTML 元素添加自定义功能。vue 编译 DOM 时,会找到指令对象,执行指令的相关方法。

自定义指令有五个生命周期(也叫钩子函数),分别是 bind、inserted、update、componentUpdated、unbind

1、bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
2、inserted:被绑定元素插入父节点时调用。
3、update:被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较前后的绑定值。
4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5、unbind:只调用一次,指令与元素解绑时调用。

原理:
1、在生成 ast 语法树时,遇到指令会给当前元素添加 directives 属性
2、通过 genDirectives 生成指令代码
3、在 patch 前将指令的钩子提取到 cbs 中,在 patch 过程中调用对应的钩子。
4、当执行指令对应钩子函数时,调用对应指令定义方法。

uniapp中遇到过什么坑?

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值