该篇文章为一句话的答案,想看更详细的面试题请看这篇>《前端面试题》
原型链:
实例与原型的链条,原型是prototype,链是__proto__,每个函数有一个原型对象,函数在创建时有一个默认属性 prototype,这个属性指向函数的原型对象。
继承:
ES6 使用extends关键字对Class类继承,其余还有:构造函数、原型链、构造+原型链、原型式、寄生式、原型+寄生。
事件队列:
分为微任务、宏任务,微任务一般比宏任务先执行,并且微任务队列只有一个。
宏任务:setTimeout、setInterval......
微任务:Promise、nextTick.......
事件循环
JS分为同步和异步任务。同步任务在主线程上执行,一旦执行栈中的所有同步任务执行完毕,系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行。
防抖和节流
为了阻止操作高频触发,从而浪费性能。防抖执行最后一次,节流执行第一次。
防抖:搜索联想、窗口调整;节流:鼠标连点、滚动加载。
闭包
闭包就是函数内嵌套函数,使函数外可以读取到函数内部的变量,未释放前变量会一直占用内存。用途:模块化、防抖、节流、封装函数延迟执行。
Promise
Promise
对象代表一个异步操作,异步操作的结果决定状态,当状态从pending
变为fulfilled或
从pending
变为rejected
,状态就不会再改变,称为 resolved。
async/await
async :申明方法是异步的;await:等待异步方法执行完成;返回值是 Promise 对象。
process.nextTick() 和setImmediate()
被设置的回调函数都是在下一次 Tick 时被调用,process.nextTick()优先级>setImmediate()
箭头函数和普通函数的区别
箭头函数更简洁,没有自己的this,this指向定义时所在作用域的this,且不会改变。
不可以当作构造函数,不可以使用new命令,不可以使用arguments,不可以使用yield命令。
变量提升
在js中,变量和函数的声明会被提升到最顶部执行,函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找。
his指向
this总是指向函数的直接调用者,如果有new关键字,this指向new出来的对象;在事件中,this指向触发这个事件的对象。
数组去重的方法?
ES6的Set、Array.filter() + indexOf() 、 Array.includes()
Promise 面试题 以下代码的执行结果是?
const promise = new Promise((resolve, reject) => {
console.log(1)
resolve()
console.log(2)
})
promise.then(() => {
console.log(3)
})
console.log(4)
答案:选中????1,2,4,3
解释:以上考察的是关于promise的原理,promise的构造函数是同步执行的,当new Promise的一瞬间,1,2 就立刻被执行,而 .then方法是异步执行的,当执行完1和2之后,会执行输出4,最后执行输出3
数组扁平化使用场景
快速获取/过滤嵌套数组中的某个值
数组求和
const arrSum = (arr) => {
const temp = arr.reduce((pre, now) => {
return pre+now
},0)
return temp
}
求数组的最大值/最小值?
Math.max();
Math.min();
解构赋值
let a = 1; let b = 2; 如果在不声明第三个变量的前提下,使a=2, b=1?
答案:选中????[a, b] = [b, a]
为什么要使用组件?
方便维护、方便复用、提高开发效率
在组件的设计中,需要考虑什么?
可扩展性强、功能单一、便于复用,适用程度高
前端性能优化:
大致分为两部分:1、资源优化,通过打包配置优化资源,合理使用异步加载模块。2、代码优化,减少代码冗余,使用性能更好的API,减少重绘回流。
虚拟dom为什么会快?
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法计算出差异,只更新差异点,从而提高性能。
loader 和 plugin的区别?说几个Webpack常用 loader 和 plugin:
loader处理语法、plugin帮助资源文件打包优化
babel-loader、vue-loader、 file-loader、url-loader、eslint-loader、cache-loader、css-loader......
uglify-webpack-plugin(压缩js)、optimize-css-assets-webpack-plugin(压缩css)、html-webpack-plugin、webpack-bundle-analyzer(打包文件体积可视化)......