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

分手后的思念是犯贱 2023-01-17 06:24 182阅读 0赞

### 文章目录 ###

*  前言
 *  题1（全等/new/基础包装类型)
 *  题2（扩展符，函数参数默认值)
 *  题3（后置递增++）
 *  题4（const)
 *  题5（变量提升，严格模式，ReferenceError, TypeError)
 *  题7（类的静态函数）
 *  题8 （数组原型的相关方法)
 *  题10 (for...in)

# 前言 #

今天是每日10题大厂面试题专栏的第一章，所以有一些地方需要和同学们啰嗦一下，以后每天一更，周末不更，题目都是题主前一天晚上亲自做过并且总结过的题目，因为为了避免浪费大家的时间，一些题主觉得比较容易的题目就不会记录进来，所以不一定正好10题，每一道题的小标题命名将会用括号表明这题的考察点，时间有限的同学可以根据自己的优劣势进行针对性地看  
        看这些题目前，最好是把答案遮住，先不看题主的解释，尝试自己写一写，可能对自己的帮助提高会更大

# 题1（全等/new/基础包装类型) #

下面输出的结果是：

let a = 3;
    let b = new Number(3);
    let c = 3;
    console.log(a == b);
    console.log(a === b);
    console.log(b === c);

答案： true false false  
这道题主要考察可以分成三个部分：

*  全等：值和类型匹配，才是全等（即===）
 *  new：new Number(3)是 使用了new相当于引用了，返回的是一个对象，如果是3 === Number(3)将返回true,这里将进一步说明new在js中的作用：
    
     *  创建一个新对象
     *  将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
     *  执行构造函数中的代码（为这个新对象添加属性）
     *  返回新对象
 *  基础包装类型：3虽然是基础类型，不是对象，却可以调用Number原型下的方法，这中间又发生了什么呢？对于js中的基础类型，他们都有对应的一个包装类类型，当对基础类型调用方法或者调用对应属性的时候，会调用基础包装类型对这个基础类型进行包装，比如’123’.length发生的过程内部实现如下：

var str = '123';
    var len = str.length;
    console.log(len); // 3
    
    var str = '123';
    var _str = new String(str);
    var len = _str.length;
    _str = null;
    console.log(len); // 3

# 题2（扩展符，函数参数默认值) #

输出什么？

const person = { 
    	name: 'Lydia',
    	age: 21
    }
    
    const changeAge = (x = { ...person}) => x.age++
    const changeAgeAndName = (x = { ...person}) => { 
    	x.age += 1;
    	x.name = 'Sarah';
    }
    changeAge(person)
    changeAgeAndName()
    
    console.log(person)

答案：\{name: “Lydia”, age: 22\}  
这道题主要考察以下两点：

*  扩展符，使用扩展符复制的对象是一个新的对象，但是并不代表扩展符对对象的操作是深拷贝，扩展符复制对象\{…obj\}其实是浅拷贝，拷贝层数只拷贝第一层，并不会进一步递归
 *  函数参数默认值，因为changeAge传了参数，所以可以对person进行修改，而changeAgeAndName没有传参数，第一点我们说到扩展符是复制一个新的对象，是浅拷贝但不是原对象，所以对x默认值的修改并不会影响到changeAgeAndName

# 题3（后置递增++） #

输出是什么？

let num = 10;
    const increaseNumber = () => num++;
    const increasePassedNumber = number => number++;
    const num1 = increaseNumber();
    const num2 = increasePassedNumber(num1);
    
    console.log(num1);
    console.log(num2);

答案： 10， 10  
这道题主要考察：

*  后置递增++，执行increaseNumber的时候，对num的+1操作会在返回数据之后执行，也就是num1会为10，然后将num1传入increasePassedNumber()中，同理，num2也是10

# 题4（const) #

下面哪一项会报错？

const emojis = ['1', '2', '3', '4'];
    
    emojis.push('5'); // 1
    emojis.splice(0, 2); // 2
    emojis = [...emojis, '5']; // 3
    emojis.length = 0; // 4

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

*  const，使用了const关键字并不意味着我们都不能再改变这个变量了，如果是基础数据类型，是的，但是对于引用类型，是可以重定义变量中的值的，但是变量本身不可修改，也就是引用的地址不能改变，你不能直接把另一个引用类型赋值给用const修饰的变量

# 题5（变量提升，严格模式，ReferenceError, TypeError) #

下面代码输出是什么？

function getAge() { 
    	'use strict';
    	age = 21;
    	console.log(age);
    }
    getAge();

这道题主要考察：

*  变量提升，严格模式，es5下，如果没用var 声明变量，会自动把变量的申明提前到头部，声明为全局变量，如果是在严格模式下，禁止这种操作，并且会报出ReferenceError的错误
 *  ReferenceError： ReferenceError（引用错误） 对象代表当一个不存在的变量被引用时发生的错误
 *  TypeError: TypeError（类型错误） 对象用来表示值的类型非预期类型时发生的错误。

# 题7（类的静态函数） #

下面代码的输出是什么？

class Chameleon { 
    	static colorChange(newColor) { 
    		this.newColor = newColor;
    	}
    	constructor({ newColor = 'green'} = { }) { 
    		this.newColor = newColor;
    	}
    }
    
    const freddie = new Chameleon({ newColor: 'purple'})
    freddie.colorChange('orange')

答案：TypeError  
这道题主要是考察：

*  类的静态函数。colorChange方法是静态的，静态方法仅在创建它们的构造函数中存在，并且不能传递给任何子级。所以调用colorChange的时候会不存在colorChange方法，抛出TypeError

# 题8 （数组原型的相关方法) #

下面哪些方法修改了原数组：

const emojis = ['1', '2', '3']
    emojis.map(x => x + '1')
    emojis.filter(x => x !== '2')
    emojis.find(x => x !== '2')
    emojis.reduce((acc, cur) => acc + '3')
    emojis.slice(1, 2, '1')
    emojis.splice(1, 2, '1')

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

*  数组的相关原型方法，数组原型中其实能更改原数组的并不是很多，大部分都是返回一个新数组，能改变原数组的主要是以下几种：push, pop, shift, unshift, reverse, sort, splice，剩下的都不可以修改原数组哦，同时还要注意一点，题主原来也错误认为的部分，**对数组进行foreach遍历的过程中，如果修改这个数组是并不会成功的**

a = [1, 2, 3];
    a.forEach(x => x = 1);
    a // [1, 2, 3]

# 题10 (for…in) #

下面输出是什么？

const person = { 
    	name: 'Lydia',
    	age: 21
    };
    
    for (const item in person) { 
    	console.log(item);
    }

答案： “name", “age”  
这道题主要考察：

*  for…in，这里题主之前不清楚，惭愧，for…in直接遍历出来的是属性的key，而不是包含key和value的对象

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