43 道检验基础的 JavaScript 面试题，2024前端春招面试经历

console.log(++number);

console.log(number);

• A: 1 1 2

• B: 1 2 2

• C: 0 2 2

• D: 0 1 2

答案: C

后缀一元运算符++：

1. 返回值（返回0）

2. 增加值（数字现在是1）

前缀一元运算符++：

1. 增加值（数字现在是2）

2. 返回值（返回2）

所以返回0 2 2。

---

16. 下面代码的输出是什么?

function getPersonInfo(one, two, three) {

console.log(one);

console.log(two);

console.log(three);

}

const person = “Lydia”;

const age = 21;

getPersonInfo${person} is ${age} years old;

• A: Lydia 21 ["", "is", "years old"]

• B: ["", "is", "years old"] Lydia 21

• C: Lydia ["", "is", "years old"] 21

答案: B

如果使用标记的模板字符串，则第一个参数的值始终是字符串值的数组。 其余参数获取传递到模板字符串中的表达式的值！

---

17. 下面代码的输出是什么?

function checkAge(data) {

if (data === { age: 18 }) {

console.log(“You are an adult!”);

} else if (data == { age: 18 }) {

console.log(“You are still an adult.”);

} else {

console.log(Hmm.. You don't have an age I guess);

}

}

checkAge({ age: 18 });

• A: You are an adult!

• B: You are still an adult.

• C: Hmm.. You don't have an age I guess

答案: C

在比较相等性，原始类型通过它们的值进行比较，而对象通过它们的引用进行比较。JavaScript检查对象是否具有对内存中相同位置的引用。

我们作为参数传递的对象和我们用于检查相等性的对象在内存中位于不同位置，所以它们的引用是不同的。

这就是为什么{ age: 18 } === { age: 18 }和 { age: 18 } == { age: 18 } 返回 false的原因。

---

18. 下面代码的输出是什么?

function getAge(…args) {

console.log(typeof args);

}

getAge(21);

• A: "number"

• B: "array"

• C: "object"

• D: "NaN"

答案: C

扩展运算符（... args）返回一个带参数的数组。 数组是一个对象，因此typeof args返回object。

---

20. 下面代码的输出是什么?

function getAge() {

“use strict”;

age = 21;

console.log(age);

}

getAge();

• A: 21

• B: undefined

• C: ReferenceError

• D: TypeError

答案: C

使用“use strict”，可以确保不会意外地声明全局变量。 我们从未声明变量age，因为我们使用`use strict'，它会引发一个ReferenceError。 如果我们不使用“use strict”，它就会起作用，因为属性age会被添加到全局对象中。

---

21. 下面代码的输出是什么?

const sum = eval(“10*10+5”);

• A: 105

• B: "105"

• C: TypeError

• D: "10*10+5"

答案: A

eval会为字符串传递的代码求值。 如果它是一个表达式，就像在这种情况下一样，它会计算表达式。 表达式为10 * 10 + 5计算得到105。

---

22. cool_secret可以访问多长时间?

sessionStorage.setItem(“cool_secret”, 123);

• A：永远，数据不会丢失。

• B：用户关闭选项卡时。

• C：当用户关闭整个浏览器时，不仅是选项卡。

• D：用户关闭计算机时。

答案: B

关闭选项卡后，将删除存储在sessionStorage中的数据。

如果使用localStorage，数据将永远存在，除非例如调用localStorage.clear()。

---

23. 下面代码的输出是什么?

var num = 8;

var num = 10;

console.log(num);

• A: 8

• B: 10

• C: SyntaxError

• D: ReferenceError

答案: B

使用var关键字，您可以用相同的名称声明多个变量。然后变量将保存最新的值。

您不能使用let或const来实现这一点，因为它们是块作用域的。

---

24. 下面代码的输出是什么?

const obj = { 1: “a”, 2: “b”, 3: “c” };

const set = new Set([1, 2, 3, 4, 5]);

obj.hasOwnProperty(“1”);

obj.hasOwnProperty(1);

set.has(“1”);

set.has(1);

• A: false true false true

• B: false true true true

• C: true true false true

• D: true true true true

答案: C

所有对象键（不包括Symbols）都会被存储为字符串，即使你没有给定字符串类型的键。 这就是为什么obj.hasOwnProperty（'1'）也返回true。

上面的说法不适用于Set。 在我们的Set中没有“1”：set.has（'1'）返回false。 它有数字类型1，set.has（1）返回true。

---

25. 下面代码的输出是什么?

const obj = { a: “one”, b: “two”, a: “three” };

console.log(obj);

• A: { a: "one", b: "two" }

• B: { b: "two", a: "three" }

• C: { a: "three", b: "two" }

• D: SyntaxError

答案: C

如果对象有两个具有相同名称的键，则将替前面的键。它仍将处于第一个位置，但具有最后指定的值。

---

26. JavaScript全局执行上下文为你创建了两个东西:全局对象和this关键字.

• A: 对

• B: 错误

• C: 视情况而定

答案: A

基本执行上下文是全局执行上下文:它是代码中随处可访问的内容。

---

27. 下面代码的输出是什么?

for (let i = 1; i < 5; i++) {

if (i === 3) continue;

console.log(i);

}

• A: 1 2

• B: 1 2 3

• C: 1 2 4

• D: 1 3 4

答案: C

如果某个条件返回true，则continue语句跳过迭代。

---

28. 下面代码的输出是什么?

String.prototype.giveLydiaPizza = () => {

return “Just give Lydia pizza already!”;

};

const name = “Lydia”;

name.giveLydiaPizza();

• A: "Just give Lydia pizza already!"

• B: TypeError: not a function

• C: SyntaxError

• D: undefined

答案: A

String是一个内置的构造函数，我们可以为它添加属性。 我刚给它的原型添加了一个方法。 原始类型的字符串自动转换为字符串对象，由字符串原型函数生成。 因此，所有字符串（字符串对象）都可以访问该方法！

译者注：

当使用基本类型的字符串调用giveLydiaPizza时，实际上发生了下面的过程：

• 创建一个String的包装类型实例

• 在实例上调用substring方法

• 销毁实例

---

29. 下面代码的输出是什么?

const a = {};

const b = { key: “b” };

const c = { key: “c” };

a[b] = 123;

a[c] = 456;

console.log(a[b]);

• A: 123

• B: 456

• C: undefined

• D: ReferenceError

答案: B

对象键自动转换为字符串。我们试图将一个对象设置为对象a的键，其值为123。

但是，当对象自动转换为字符串化时，它变成了[Object object]。 所以我们在这里说的是a["Object object"] = 123。 然后，我们可以尝试再次做同样的事情。 c对象同样会发生隐式类型转换。那么，a["Object object"] = 456。

然后，我们打印a[b]，它实际上是a["Object object"]。 我们将其设置为456，因此返回456。

---

30. 下面代码的输出是什么?

const foo = () => console.log(“First”);

const bar = () => setTimeout(() => console.log(“Second”));

const baz = () => console.log(“Third”);

bar();

foo();

baz();

• A: First Second Third

• B: First Third Second

• C: Second First Third

• D: Second Third First

答案: B

我们有一个setTimeout函数并首先调用它。 然而却最后打印了它。

这是因为在浏览器中，我们不只有运行时引擎，我们还有一个叫做WebAPI的东西。WebAPI为我们提供了setTimeout函数，例如DOM。

将callback推送到WebAPI后，setTimeout函数本身（但不是回调！）从堆栈中弹出。

现在，调用foo，并打印First。

foo从堆栈弹出，baz被调用，并打印Third。

WebAPI不能只是在准备就绪时将内容添加到堆栈中。 相反，它将回调函数推送到一个称为任务队列的东西。

这是事件循环开始工作的地方。 事件循环查看堆栈和任务队列。 如果堆栈为空，则会占用队列中的第一个内容并将其推送到堆栈中。

bar被调用，Second被打印，它从栈中弹出。

---

31. 单击按钮时event.target是什么?

Click!

• A: div外部

• B: div内部

• C: button

• D: 所有嵌套元素的数组.

答案: C

导致事件的最深嵌套元素是事件的目标。 你可以通过event.stopPropagation停止冒泡

---

32. 单击下面的html片段打印的内容是什么?

Click here!

• A: p div

• B: div p

• C: p

• D: div

答案: A

如果我们单击p，我们会看到两个日志：p和div。在事件传播期间，有三个阶段：捕获，目标和冒泡。 默认情况下，事件处理程序在冒泡阶段执行（除非您将useCapture设置为true）。 它从最深的嵌套元素向外延伸。

---

33. 下面代码的输出是什么?

const person = { name: “Lydia” };

function sayHi(age) {

console.log(${this.name} is ${age});

}

sayHi.call(person, 21);

sayHi.bind(person, 21);

• A: undefined is 21 Lydia is 21

• B: function function

• C: Lydia is 21 Lydia is 21

• D: Lydia is 21 function

答案: D

使用两者，我们可以传递我们想要this关键字引用的对象。 但是，.call方法会立即执行！

.bind方法会返回函数的拷贝值，但带有绑定的上下文！ 它不会立即执行。

---

34. 下面代码的输出是什么?

function sayHi() {

return (() => 0)();

}

typeof sayHi();

• A: "object"

• B: "number"

• C: "function"

• D: "undefined"

答案: B

sayHi函数返回立即调用的函数（IIFE）的返回值。 该函数返回0，类型为数字。

仅供参考：只有7种内置类型：null，undefined，boolean，number，string，object和symbol。 function不是一个类型，因为函数是对象，它的类型是object。

---

35. 下面这些值哪些是假值?

0;

new Number(0);

(“”);

(" ");

new Boolean(false);

undefined;

• A: 0, '', undefined

• B: 0, new Number(0), '', new Boolean(false), undefined

• C: 0, '', new Boolean(false), undefined

• D: 所有都是假值

答案: A

JavaScript中只有6个假值：

• undefined

• null

• NaN

• 0

• '' (empty string)

• false

函数构造函数，如new Number和new Boolean都是真值。

---

36. 下面代码的输出是什么?

console.log(typeof typeof 1);

• A: "number"

• B: "string"

• C: "object"

• D: "undefined"

答案: B

typeof 1 返回 "number".

typeof "number" 返回 "string"

---

37. 下面代码的输出是什么?

const numbers = [1, 2, 3];

numbers[10] = 11;

console.log(numbers);

• A: [1, 2, 3, 7 x null, 11]

• B: [1, 2, 3, 11]

• C: [1, 2, 3, 7 x empty, 11]

• D: SyntaxError

答案: C

When you set a value to an element in an array that exceeds the length of the array, JavaScript creates something called “empty slots”. These actually have the value of undefined, but you will see something like:

当你为数组中的元素设置一个超过数组长度的值时，JavaScript会创建一个名为“空插槽”的东西。 这些位置的值实际上是undefined，但你会看到类似的东西：

[1, 2, 3, 7 x empty, 11]

这取决于你运行它的位置（每个浏览器有可能不同）。

---

38. 下面代码的输出是什么?

(() => {

let x, y;

try {

throw new Error();

} catch (x) {

(x = 1), (y = 2);

console.log(x);

}

console.log(x);

console.log(y);

})();

• A: 1 undefined 2

• B: undefined undefined undefined

• C: 1 1 2

• D: 1 undefined undefined

答案: A

catch块接收参数x。当我们传递参数时，这与变量的x不同。这个变量x是属于catch作用域的。

之后，我们将这个块级作用域的变量设置为1，并设置变量y的值。 现在，我们打印块级作用域的变量x，它等于1。

在catch块之外，x仍然是undefined，而y是2。 当我们想在catch块之外的console.log(x)时，它返回undefined，而y返回2。

---

39. JavaScript中的所有内容都是…

• A：原始或对象

• B：函数或对象

• C：技巧问题！只有对象

• D：数字或对象

答案: A

JavaScript只有原始类型和对象。

原始类型是boolean，null，undefined，bigint，number，string和symbol。

---

40. 下面代码的输出是什么?

[[0, 1], [2, 3]].reduce(

(acc, cur) => {

return acc.concat(cur);

},

[1, 2]

);

• A: [0, 1, 2, 3, 1, 2]

• B: [6, 1, 2]

• C: [1, 2, 0, 1, 2, 3]

• D: [1, 2, 6]

答案: C

[1,2]是我们的初始值。 这是我们开始执行reduce函数的初始值，以及第一个acc的值。 在第一轮中，acc是[1,2]，cur是[0,1]。 我们将它们连接起来，结果是[1,2,0,1]。

然后，acc的值为[1,2,0,1]，cur的值为[2,3]。 我们将它们连接起来，得到[1,2,0,1,2,3]。

---

41. 下面代码的输出是什么?

!!null;

!!“”;

!!1;

• A: false true false

• B: false false true

• C: false true true

• D: true true false

答案: B

null是假值。 !null返回true。 !true返回false。

""是假值。 !""返回true。 !true返回false。

1是真值。 !1返回false。 !false返回true。

---

42. `setInterval`方法的返回值什么?

setInterval(() => console.log(“Hi”), 1000);

• A：一个唯一的id

• B：指定的毫秒数

• C：传递的函数

• D：undefined

答案: A

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

`setInterval`方法的返回值什么?**

setInterval(() => console.log(“Hi”), 1000);

• A：一个唯一的id

• B：指定的毫秒数

• C：传递的函数

• D：undefined

答案: A

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-KZfeoBc9-1711904183958)]
[外链图片转存中…(img-efkhvcF2-1711904183959)]
[外链图片转存中…(img-kdBCavZO-1711904183960)]
[外链图片转存中…(img-mLkicUdV-1711904183960)]
[外链图片转存中…(img-XK5Od7sM-1711904183960)]
[外链图片转存中…(img-9vh5huNf-1711904183961)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-x5HIo3Wp-1711904183961)]

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

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