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

「爱情、让人受尽委屈。」 2023-01-17 07:50 109阅读 0赞

### 文章目录 ###

*  题1（Class私有变量, SyntaxError)
 *  题2（typeof, return ; )
 *  题3（Object.freeze）
 *  题4（引用类型）
 *  题6 （异步，微任务，宏任务）
 *  题8（String.prototype.padStart）
 *  题10（Array.prototype.push）

# 题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返回的是弹出的元素

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/2cd992fb27d04e5c9dd707f4541e8a6d.png