这些前端大厂面试题你会做吗？每日10题大厂面试题（二）

题1（Class私有变量, SyntaxError)

下面的输出是什么

Class Counter {
	#number = 10;
	increment() {
		this.#number++;
	}
	getNum() {
		return this.#number;
	}
}
const counter = new Counter();
counter.increment();
console.log(counter.#number);

答案：SyntaxError
这道题考察的是：

• 私有变量，在ES2020中，我们可以通过#给class添加私有变量。在class外部我们无法获取这个值，所以这道题的输出会是SyntaxError
• SyntaxError，SyntaxError 对象代表尝试解析语法上不合法的代码的错误。

题2（typeof, return ; )

下面输出的是什么

[1, 2, 3].map(num => {
	if (typeof num === 'number') return ;
	return num * 2;
}

答案：[undefined, undefined, undefined]
这道题主要考察两个点：

• typeof, typeof 操作符返回一个字符串，表示未经计算的操作数的类型。与之类似，用来判断变量类型的还有instanceof, instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
• 当函数没有返回任何值的时候，即默认返回undefined，而不是null

题3（Object.freeze）

下面输出的是

const box = { x: 10, y: 20 }
Object.freeze(box);

const shape = box;
shape.x = 100;
console.log(shape);

答案：{x: 10, y: 20}
这道题主要考察：

• Object.freeze。Object.freeze使得无法添加、删除或修改对象的属性（除非属性的值是另一个对象），我们可以使用Object.isFrozen检查一个对象是否被冻结

题4（引用类型）

下面输出的是

let person = {name: 'Lydia'};
const members = [person];
person = null;
console.log(members);

答案：[{name: “Lydia”}]
这道题主要考察：

• 引用类型。我们应该清楚针对引用类型的每次赋值，都是将引用类型的数据地址赋给对应的变化，所以当引用类型发生改变的时候，被赋值的对象也会改变。但是这道题person = null是将引用类型的地址指向了null，而members仍然指向person原来的地址，所以答案不是[null]

题6 （异步，微任务，宏任务）

下面输出的是：

const myPromise = Promise.resolve(Promise.resolve("Promise!"))

function funcOne() {
    myPromise.then(res => res).then(res => console.log(res));
    setTimeout(() => console.log('Timeout!'));
    console.log('Last line!');
}

async function funcTwo() {
    const res = await myPromise;
    console.log(await res);
    setTimeout(() => console.log('Timeout!'));
    console.log('Last Line!');
}

funcOne()
funcTwo()

答案：Last line!Promise!Promise!Last line!Timeout!Timeout!
这道题考查的点比较多，先给大家讲一下相关的理论知识：

• 异步：js是一门单线程的语言，可以执行同步和异步任务，异步任务又分为宏任务和微任务，先执行同步任务，再执行异步任务
• 宏任务：宏任务是指消息队列中的等待被主线程执行的事件，宏任务执行时都会重新创建栈，然后调用宏任务中的函数，栈也会随着变化，但宏任务执行结束时，栈也会随之销毁。在这道题中宏任务即setTimeout
• 微任务：可以把微任务看成是一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前
• 程序中总的一个执行顺序大致是 同步->微任务->宏任务

然后我们来讲一下这道题，首先是funcOne，Last line不是异步函数，率先被输出，Promise被放进微任务队列，Timeout被放进宏任务队列，他们都需要等待执行，因为后面的同步操作还没完，然后我们看funcTwo, funcTwo使用了async，是一个异步函数，其中Last line虽然是同步操作，但是它必须等funcTwo中的Promise执行完，所以把funcTwo中的Promise放入微任务队列，因为微任务队列中已经有funcOne中的Promise，得先输出它，所以我们输出两个Promise，紧接着就可以执行funcTwo中的Last line了，当然在执行之前我们把funcTwo中的Timeout!扔进了宏任务队列，Last line执行完了以后我们执行宏任务队列中的内容，也就是两个Timeout！

题8（String.prototype.padStart）

下面输出的是

const name = 'Lydia Hallie'
console.log(name.padStart(13))
console.log(name.padStart(2))

答案：“ Lydia Hallie", “Lydia Hallie”
这道题主要考察：

• String.prototype.padStart， 这个函数可以在字符串开头填充字符串，这道题没传第二个参数，所以是传空格，所以第一个答案是name前面加一个空格。如果传递给padStart方法的参数小于字符串长度，则不会填充

题10（Array.prototype.push）

下面输出的是：

function addToList(item, list) {
	return list.push(item);
}
const result = addToList('apple', ['banana']);
console.log(result);

答案：2
这道题主要考察：

• Array.prototype.push： 返回值是新数组的length，pop返回的是弹出的元素

       小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！