前端笔试的易错题

1. 内存泄漏是javascript 代码中必须尽量避免的，以下几段代码可能会引起内存泄漏的有()

提示：对于内存泄漏我们需要明白内存泄漏产生的条件：

(1) 意外的全局变量
(2) 闭包
(3) 遗漏的定时器或回调
(4) 未清理的DOM引用

(1)
function getName() {
name = 'javascript'
getName()
(2)
const elements = {
button: document.getElementByld('button')
function removeButton() {
document.body.removeChild(elements.button)
removeButton()
(3)
let timer = setlnterval(() => {
const node = document.querySelector('#node')
if(node) {
clearInterval(timer)
},1000)

答案是：（1）（3）
解析：第一段代码name没有使用var,let,const,name变成了意外的全局变量，
可能引起内存泄漏;第二段代码button元素被elements对象引用,removeChild
后并不能被GC回收,会造成内存泄漏;第三段代码及时清除定时器，
避免了内存泄漏

2. 以下使用typeof操作符的代码的输出结果为？

var x = typeof x
var res = typeof typeof x
console.log(res)

输出：string
解析：首先 var typeof x 结果为undefined;
但是我们要知道 typeof 输出的是字符串,所以实际上是:res = typeof'undefined'
所以输出：string

3. 下题的结果是?

    1 + - + + + - + 1 

   输出： 2
   解析：我们可以将代码看作 1+(-+++-+) 1;只需要判断括号正负，
   所以最终为 1+1 = 2

4. 执行以下代码，正确的输出结果是?

let obj1 = {a: 1,
foo: () => {
console.log(this.a)}
}
//log1
obj1.foo()
const obj2 = obj1.foo
//log2
obj2()

结果：
log1: undefined
log2: undefined
解析：箭头函数没有this，所以箭头函数里的上下文为obj的上下文window，
所以输出undefined

5. 关于将Promise.all和 Promise.race传入空数组的两段代码的输出结果是？

提示：

Promise.all:
1，有一个失败的请求，其他都失败； Promise.all()将多个Promise放在一个数组中，当整个数组的全部promise成功时才会返回成功，返回结果的顺序按照参数的顺序进行；当数组中的promise有一个出现失败时就只返回失败 (失败的结果是第一个失败的promise结果)。
2.当传入一个空数组的时候，Promise.all会执行then语句，而Promise.race都不会执行
3.正常是传入一个数组，如果传入number型的数值或者不传入值，all和race都会执行catch语句，如果传入任何字符串类型的值，两者都会执行then语句
Promise.race:
1，根据第一个请求来返回结果，若第一个成功，全局都成功，第一个失败，全局都失败；
2，返回结果的顺序，按请求时间顺序来，时间快的先返回，只返回第一个结果；

Promise.all([]).then((res)=> {
console.log('all')
})
Promise.race([]).then((res) => {
console.log('race')
})

输出：all
解析：promise.all会立即返回一个resolve状态，所以会立马输出，而promise.
race则一直处在pending状态，不会走到then函数所以不会输出

5. 以下代码执行输出的结果为？

<div id="box1">
	<div id="box2">
	   content
	</div>
</div>
<script>
const $ = document.querySelector.bind(document)
const box1 = $('#box1')
const box2 = $('#box2')
box1.addEventListener('click',() =>{console.log('box1 true')
}, true)
box1.addEventListener('click',() =>{console.log('box1 false')
}, false)
box2.addEventListener('click',() =>{console.log('box2 true')
}, true)
box2.addEventListener('click', () =>{console.log('box2 false')
},false)
<script>

输出： box1 true, box2 true, box2 false, box1 false
解析：addEventListener的第三个参数规定事件在什么阶段触发,true是在捕获
阶段触发, false(默认值)在冒泡阶段触发，由于事件触发是自dom从外向内
传播，考虑box1和box2是上下堆叠的，事件传递的顺序为box1 -> box2(捕获结束)-> box2-> box1(冒泡结束)。