送你101道javascript面试题(二)

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是什么?

<div onclick="console.log('first div')">
  <div onclick="console.log('second div')">
    <button onclick="console.log('button')">
      Click!
    </button>
  </div>
</div>

A: div外部
B: div内部
C: button
D: 所有嵌套元素的数组.

答案: C

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

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

<div onclick="console.log('div')">
  <p onclick="console.log('p')">
    Click here!

</div>

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

当你为数组中的元素设置一个超过数组长度的值时，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。