Web前端最新JS面试题汇总（二），2024年最新Web前端开发进大厂面试必备技能

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

CDN边缘节点缓存机制，一般都遵守http标准协议，通过http响应头中的Cache-Control和max-age的字段来设置CDN边缘节点的数据缓存时间。

3、浏览器缓存

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。

浏览器缓存主要有两类：缓存协商：Last-modified ，Etag 和彻底缓存：cache-control，Expires。浏览器都有对应清除缓存的方法。

4、服务器缓存

服务器缓存有助于优化性能和节省宽带，它将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。

15. 列举 3 种强制类型转换和 2 种隐式类型转换

参考答案：

强制: parseInt(), parseFloat(), Number(), Boolean(), String()

隐式: +, -

解析：

// 1.parseInt() 把值转换成整数

parseInt(“1234blue”); // 1234

parseInt(“0xA”); // 10

parseInt(“22.5”); // 22

parseInt(“blue”); // NaN

// parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的，示例如下：

parseInt(“AF”, 16); // 175

parseInt(“10”, 2); // 2

parseInt(“10”, 8); // 8

parseInt(“10”, 10); // 10

// 如果十进制数包含前导0，那么最好采用基数10，这样才不会意外地得到八进制的值。例如：

parseInt(“010”); // 8

parseInt(“010”, 8); // 8

parseInt(“010”, 10); // 10

// 2.parseFloat() 把值转换成浮点数,没有基模式

parseFloat(“1234blue”); // 1234.0

parseFloat(“0xA”); // NaN

parseFloat(“22.5”); // 22.5

parseFloat(“22.34.5”); // 22.34

parseFloat(“0908”); // 908

parseFloat(“blue”); // NaN

// 3.Number() 把给定的值转换成数字（可以是整数或浮点数）,Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似，只是它转换的是整个值，而不是部分值。示例如下：

Number(false) // 0

Number(true) // 1

Number(undefined) // NaN

Number(null) // 0

Number(“5.5”) // 5.5

Number(“56”) // 56

Number(“5.6.7”) // NaN

Number(new Object()) // NaN

Number(100) // 100

// 4.Boolean() 把给定的值转换成Boolean型

Boolean(“”); // false

Boolean(“hi”); // true

Boolean(100); // true

Boolean(null); // false

Boolean(0); // false

Boolean(new Object()); // true

// 5.String() 把给定的值转换成字符串

String(123) // “123”

// 6. + -

console.log(0 + ‘1’) // “01”

console.log(2 - ‘1’) // 1

16. 你对闭包的理解？优缺点？

参考答案：

概念：

闭包就是能够读取其他函数内部变量的函数。

三大特性：

• 函数嵌套函数。

• 函数内部可以引用外部的参数和变量。

• 参数和变量不会被垃圾回收机制回收。

优点：

• 希望一个变量长期存储在内存中。

• 避免全局变量的污染。

• 私有成员的存在。

缺点：

• 常驻内存，增加内存使用量。

• 使用不当会很容易造成内存泄露。

示例：

function outer() {

var name = “jack”;

function inner() {

console.log(name);

}

return inner;

}

outer()(); // jack

function sayHi(name) {

return () => {

console.log(Hi! ${name});

};

}

const test = sayHi(“xiaoming”);

test(); // Hi! xiaoming

虽然 sayHi 函数已经执行完毕，但是其活动对象也不会被销毁，因为 test 函数仍然引用着 sayHi 函数中的变量 name，这就是闭包。

但也因为闭包引用着另一个函数的变量，导致另一个函数已经不使用了也无法销毁，所以闭包使用过多，会占用较多的内存，这也是一个副作用。

解析：

由于在 ECMA2015 中，只有函数才能分割作用域，函数内部可以访问当前作用域的变量，但是外部无法访问函数内部的变量，所以闭包可以理解成“定义在一个函数内部的函数，外部可以通过内部返回的函数访问内部函数的变量“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

17. 如何判断 NaN

参考答案：

isNaN()方法

解析：

isNaN(NaN) // true

18. new 一个对象的过程中发生了什么

参考答案：

function Person(name) {

this.name = name;

}

var person = new Person(“qilei”);

new一个对象的四个过程：

// 1. 创建空对象；

var obj = {};

// 2. 设置原型链: 设置新对象的 constructor 属性为构造函数的名称，设置新对象的__proto__属性指向构造函数的 prototype 对象；

obj.constructor = Person;

obj.proto = Person.prototype;

// 3. 改变this指向：使用新对象调用函数，函数中的 this 指向新实例对象obj：

var result = Person.call(obj); //{}.构造函数();

// 4. 返回值：如果无返回值或者返回一个非对象值，则将新对象返回；如果返回值是一个新对象的话那么直接返回该对象。

if (typeof(result) == “object”) {

person = result;

} else {

person = obj;

}

19. for in 和 for of的区别

参考答案：

1、for in

• 1. 一般用于遍历对象的可枚举属性。以及对象从构造函数原型中继承的属性。对于每个不同的属性，语句都会被执行。
• 2. 不建议使用 for in 遍历数组，因为输出的顺序是不固定的。
• 3. 如果迭代的对象的变量值是 null 或者 undefined, for in 不执行循环体，建议在使用 for in 循环之前，先检查该对象的值是不是 null 或者 undefined。

2、for of

• 1. for…of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

解析：

var s = {

a: 1,

b: 2,

c: 3

};

var s1 = Object.create(s);

for (var prop in s1) {

console.log(prop); //a b c

console.log(s1[prop]); //1 2 3

}

for (let prop of s1) {

console.log(prop); //报错如下 Uncaught TypeError: s1 is not iterable

}

for (let prop of Object.keys(s1)) {

console.log(prop); // a b c

console.log(s1[prop]); //1 2 3

}

20. 如何判断 JS 变量的一个类型（至少三种方式）

参考答案：

typeof、instanceof、 constructor、 prototype

解析：

1、typeof

typeof 返回一个表示数据类型的字符串，返回结果包括：number、boolean、string、object、undefined、function等6种数据类型。如果是判断一个基本的类型用typeof就是可以的。

typeof ‘’; // string 有效

typeof 1; // number 有效

typeof true; //boolean 有效

typeof undefined; //undefined 有效

typeof null; //object 无效

typeof []; //object 无效

typeof new Function(); // function 有效

typeof new Date(); //object 无效

typeof new RegExp(); //object 无效

2、instanceof

instanceof 是用来判断 A 是否为 B 的实例对，表达式为：A instanceof B，如果A是B的实例，则返回true, 否则返回false。 在这里需要特别注意的是：instanceof检测的是原型，

[] instanceof Array; //true

{}

instanceof Object; //true

new Date() instanceof Date; //true

3、constractor

每一个对象实例都可以通过 constrcutor 对象来访问它的构造函数 。JS 中内置了一些构造函数：Object、Array、Function、Date、RegExp、String等。我们可以通过数据的 constrcutor 是否与其构造函数相等来判断数据的类型。

var arr = [];

var obj = {};

var date = new Date();

var num = 110;

var str = ‘Hello’;

var getName = function() {};

var sym = Symbol();

var set = new Set();

var map = new Map();

arr.constructor === Array; // true

obj.constructor === Object; // true

date.constructor === Date; // true

str.constructor === String; // true

getName.constructor === Function; // true

sym.constructor === Symbol; // true

set.constructor === Set; // true

map.constructor === Map // true

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。