前端面试题-javascript

定时器时间到了是不是立刻执行？

答：不一定，js是单线程语言，异步任务的回调必须在主线程同步代码执行完以后才能执行。当主线程执行缓慢甚至阻塞的话，异步任务就无法执行，所以定时器不一定会在设定的时间到了就立刻执行。

项目中应用了哪些ES6语法？

答：箭头函数、let、const、map、set、扩展运算符、Symbol、Promise、async/await等

箭头函数的this指向？

答：箭头函数自身没有this指针，如果箭头函数定义时有外层普通函数包裹，那么箭头函数会继承外层普通函数的this指针。

如何改变函数的this？

答：call、applay、bind

闭包的概念?

答：内层函数引用了外层函数的变量、并且内层函数可以在全局访问，这样就形成了闭包。闭包变量在外层函数执行以后不会gc，会长期驻扎在内存，延长了变量的生命周期，扩大了变量的作用域范围。

什么场景会使用闭包？

答：当需要一个全局变量但又不想污染全局变量时，比如防抖节流函数，可以使用外层函数定义定时器id变量，内层函数引用这个变量，返回这个函数，把内层函数当做异步回调。

原型和原型链？

答：原型是普通对象具有的一个原型，一般对象的公共方法会挂载在对象原型上以节省内存消耗。原型链是用__proto__连接起来的一条原型链，用于实现js对象成员访问机制：从自身到原型再到原型的原型最后知道Object的原型对象，最后都找不到则返回undefined。

快排算法的实现过程？

答：先选择第一个元素作为基准，将数组中小于基准的元素移动到基准左边，大于等于的移动到右边。递归对左边和右边的数组再执行上述逻辑即可。

介绍防抖和节流？

答：防抖在于限定连续的多次操作只在最后一次发生作用，譬如搜索建议列表的ajax请求，只在用户输入完最后一个关键字时发起ajax请求。节流在于限定单位时间内只能触发一次操作，譬如轮播图左右切换按钮，限制1s只能切换一次。

ts和js的区别？

答：
js弱类型，ts强类型
js灵活，ts严谨
js在运行时才能发现类型错误，ts在编码时就能发现类型错误

断言是什么？

答：断言一个条件表达式为真，否则抛出指定的error

基本数据类型和引用数据类型的区别？

答：前者栈内存，直接存储数据，后者栈内存存储地址，指向堆内存的数据，数据实际保存在堆内存。

Promise的方法有哪些？

答：实例方法：then；静态方法：resolve、reejct、all、race、allSettled、catch

事件代理怎么知道是哪一个元素？

答：给子元素添加属性表明身份，使用e.target.attrname判断子元素

Promise是什么？

答：es6提出的异步编程解决方案，通过then的链式调用可以避免回调形式产生的回调地狱。

catch和then的区别是什么？

答：then()接收成功和失败的回调，是Promise实例的回调入口函数；catch是兜底捕获错误的函数，Promsie实例出错可以一直向下传递，最后可以被catch捕获到。catch只接收一个失败的回调。

3个Promsie实例怎么按照一定的顺序输出？

答：Promsie.all([p1,p2,p3]).then(res => console.log(res))

如何实现懒加载？

监听元素是否出现在屏幕可视区域，出现后停止监听，加载数据。

es5怎么实现局部作用域？

答：立即执行函数表达式

var、let、const的区别？

答：var声明的变量会进行预解析，发生声明提升，只有全局作用域和函数作用域。let和const不会进行预解析，必须先声明再使用，否则报错。let和const有块级作用域，有暂时性死区。此外，const声明的变量必须赋初值，且不能再改值。

map和weakmap

答：map可以接收任意类型作为key，weakmap只能接收对象作为key，weakmap顾名思义对键对象是弱引用，只要其他对这个键对象的引用释放，这个键对象就会gc，weakmap的这个键值对就会被自动移除，避免内存泄漏。应用场景在于对象的键可能会在将来消失，使用weakmap有助于防止内存泄漏。

异步操作有哪些？

答：定时器回调函数、事件监听回调、发布订阅、promise异步回调、async/await

未声明和未定义

答：未声明一般指的是没有使用var声明的变量就去赋值，认为这个变量是未声明
未定义一般指的是声明了一个变量还没有赋初值，就去引用会返回undefined，认为是未定义

dom树加载完会触发什么事件？

答：dom加载完毕会触发DomContentLoaded事件，css，js，img等加载完会触发load事件

dom怎么插入一个节点？

答：父元素.appendChild(插入的节点)

dom怎么删除一个节点？

答：父元素.removeChild(删除节点)或者删除节点.remove()

绑定事件的方法是什么？有什么参数？

答：dom.addEventListener(事件名，事件处理函数，是否捕获模式)

new干了什么？

答：创建一个空对象，令其__proto__指向构造函数的原型对象，this指向这个对象，然后执行构造函数中的代码，返回这个对象。

如何判断数据类型？

typeof可以判断number、string、null、undefined、object、和function不能判断数组
Array.isArray()可以判断数组
a instanceof A 可以判断构造函数A在不在a的原型链上
Object.prototype.toString.call()可以判断全部数据类型

数组哪些方法会改变原数组？

答：push、pop、shift、unshift、splice、sort、reverse

如何在用户离开时弹窗提示？

答：如果是直接关闭浏览器页面，可以对window监听beforeunload事件如下代码段

window.addEventListener('beforeunload', (e) => {
	e.returnValue = ''
})

如果是点击后退按钮离开的话，可以在首次进入页面时，利用pushState()往历史记录里push一条相同的记录，当点击后退时不会直接后退到上一页面，并且会触发popstate事件，在事件处理程序中进行弹窗提示即可

script标签中的defer和async的区别？

答：这两个属性都会让js的加载变成异步，不会阻塞dom的解析，不同的是，async会在加载完js后立刻执行，而defer会在加载完js后等待全部dom渲染完成后再执行