送你 43 道 JS 面试题

论坛 › 期权论坛 › 期权     
前端大全   2019-6-30 05:05   2795   0
（给前端大全加星标，提升前端技能）
作者： code秘密花园 公号 / ConardLi
[h1]导读[/h1]
这两天的
  1. GitHub Trending repositories
复制代码
被一个名叫
  1. javascript-questions
复制代码
的项目霸榜了，项目中记录了一些
  1. JavaScript
复制代码
题目。

我大概从头到尾看了一遍，都是一些基础的题目，我大概花了半个小时（有些题很简单，可以一扫而过）把这些题做完了，虽然题目很简单，但是每道题都对应一个知识点，如果这个知识点你没有接触过，那肯定会做错，如果你接触过这些知识点，那么这些题对你来说就很容易。
建议大家也花半个小时来做一做，以便查漏补缺。
为方便大家能够更快的做题，而不把时间浪费在翻译上，我又花了几个小时把它们翻译成了中文，当然已经获得了作者授权。
文中有些点作者解释的不太完整，为了更好的理解，我在文中添加了一些个人解释。
仓库地址：https://github.com/lydiahallie/javascript-questions
[h1]JavaScript 进阶问题列表[/h1]我在我的Instagram上发布了每日
  1. JavaScript
复制代码
选择题，我也会在这里发布！
从基础到高级：测试您对
  1. JavaScript
复制代码
的了解程度，刷新您的知识，或为您的编码面试做好准备！ 我每周用新问题更新这个项目。
答案位于问题下方的折叠部分，只需单击它们即可展开。 祝你好运
1. 下面代码的输出是什么？
  1. function sayHi() {
  2.   console.log(name);
  3.   console.log(age);
  4.   var name = "Lydia";
  5.   let age = 21;
  6. }
  8. sayHi();
复制代码
  • A:
    1. Lydia
    复制代码
    和
    1. undefined
    复制代码
  • B:
    1. Lydia
    复制代码
    和
    1. ReferenceError
    复制代码
  • C:
    1. ReferenceError
    复制代码
    和
    1. 21
    复制代码
  • D:
    1. undefined
    复制代码
    和
    1. ReferenceError
    复制代码
[h3]答案: D[/h3]在函数中，我们首先使用
  1. var
复制代码
关键字声明了
  1. name
复制代码
变量。 这意味着变量在创建阶段会被提升（
  1. JavaScript
复制代码
会在创建变量创建阶段为其分配内存空间），默认值为
  1. undefined
复制代码
，直到我们实际执行到使用该变量的行。 我们还没有为
  1. name
复制代码
变量赋值，所以它仍然保持
  1. undefined
复制代码
的值。
使用
  1. let
复制代码
关键字（和
  1. const
复制代码
）声明的变量也会存在变量提升，但与
  1. var
复制代码
不同，初始化没有被提升。 在我们声明（初始化）它们之前，它们是不可访问的。 这被称为“暂时死区”。 当我们在声明变量之前尝试访问变量时，
  1. JavaScript
复制代码
会抛出一个
  1. ReferenceError
复制代码
。
译者注：
关于
  1. let
复制代码
的是否存在变量提升，我们何以用下面的例子来验证：
  1. let name = 'ConardLi'
  2. {
  3.   console.log(name) // Uncaught ReferenceError: name is not defined
  4.   let name = 'code秘密花园'
  5. }
复制代码
  1. let
复制代码
变量如果不存在变量提升，
  1. console.log(name)
复制代码
就会输出
  1. ConardLi
复制代码
，结果却抛出了
  1. ReferenceError
复制代码
，那么这很好的说明了，
  1. let
复制代码
也存在变量提升，但是它存在一个“暂时死区”，在变量未初始化或赋值前不允许访问。
变量的赋值可以分为三个阶段：
  • 创建变量，在内存中开辟空间
  • 初始化变量，将变量初始化为
    1. undefined
    复制代码
  • 真正赋值
关于
  1. let
复制代码
、
  1. var
复制代码
和
  1. function
复制代码
：
    1. let
    复制代码
    的「创建」过程被提升了，但是初始化没有提升。
    1. var
    复制代码
    的「创建」和「初始化」都被提升了。
    1. function
    复制代码
    的「创建」「初始化」和「赋值」都被提升了。
2. 下面代码的输出是什么?
  1. for (var i = 0; i < 3; i++) {
  2.   setTimeout(() => console.log(i), 1);
  3. }
  5. for (let i = 0; i < 3; i++) {
  6.   setTimeout(() => console.log(i), 1);
  7. }
复制代码
  • A:
    1. 0 1 2
    复制代码
    and
    1. 0 1 2
    复制代码
  • B:
    1. 0 1 2
    复制代码
    and
    1. 3 3 3
    复制代码
  • C:
    1. 3 3 3
    复制代码
    and
    1. 0 1 2
    复制代码
[h3]答案: C[/h3]由于
  1. JavaScript
复制代码
中的事件执行机制，
  1. setTimeout
复制代码
函数真正被执行时，循环已经走完。 由于第一个循环中的变量
  1. i
复制代码
是使用
  1. var
复制代码
关键字声明的，因此该值是全局的。 在循环期间，我们每次使用一元运算符
  1. ++
复制代码
都会将
  1. i
复制代码
的值增加
  1. 1
复制代码
。 因此在第一个例子中，当调用
  1. setTimeout
复制代码
函数时，
  1. i
复制代码
已经被赋值为
  1. 3
复制代码
。
在第二个循环中，使用
  1. let
复制代码
关键字声明变量
  1. i
复制代码
：使用
  1. let
复制代码
（和
  1. const
复制代码
）关键字声明的变量是具有块作用域的（块是
  1. {}
复制代码
之间的任何东西）。 在每次迭代期间，
  1. i
复制代码
将被创建为一个新值，并且每个值都会存在于循环内的块级作用域。
3. 下面代码的输出是什么?
  1. const shape = {
  2.   radius: 10,
  3.   diameter() {
  4.     return this.radius * 2;
  5.   },
  6.   perimeter: () => 2 * Math.PI * this.radius
  7. };
  9. shape.diameter();
  10. shape.perimeter();
复制代码
  • A:
    1. 20
    复制代码
    and
    1. 62.83185307179586
    复制代码
  • B:
    1. 20
    复制代码
    and
    1. NaN
    复制代码
  • C:
    1. 20
    复制代码
    and
    1. 63
    复制代码
  • D:
    1. NaN
    复制代码
    and
    1. 63
    复制代码
[h3]答案: B[/h3]请注意，
  1. diameter
复制代码
是普通函数，而
  1. perimeter
复制代码
是箭头函数。
对于箭头函数，
  1. this
复制代码
关键字指向是它所在上下文（定义时的位置）的环境，与普通函数不同！ 这意味着当我们调用
  1. perimeter
复制代码
时，它不是指向
  1. shape
复制代码
对象，而是指其定义时的环境（window）。没有值
  1. radius
复制代码
属性，返回
  1. undefined
复制代码
。
4. 下面代码的输出是什么?
  1. +true;
  2. !"Lydia";
复制代码
  • A:
    1. 1
    复制代码
    and
    1. false
    复制代码
  • B:
    1. false
    复制代码
    and
    1. NaN
    复制代码
  • C:
    1. false
    复制代码
    and
    1. false
    复制代码
[h3]答案: A[/h3]一元加号会尝试将
  1. boolean
复制代码
类型转换为数字类型。
  1. true
复制代码
被转换为
  1. 1
复制代码
，
  1. false
复制代码
被转换为
  1. 0
复制代码
。
字符串
  1. 'Lydia'
复制代码
是一个真值。 我们实际上要问的是“这个真值是假的吗？”。 这会返回
  1. false
复制代码
。
5. 哪个选项是不正确的?
  1. const bird = {
  2.   size: "small"
  3. };
  5. const mouse = {
  6.   name: "Mickey",
  7.   small: true
  8. };
复制代码
  • A:
    1. mouse.bird.size
    复制代码
  • B:
    1. mouse[bird.size]
    复制代码
  • C:
    1. mouse[bird["size"]]
    复制代码
  • D: All of them are valid
[h3]答案: A[/h3]在
  1. JavaScript
复制代码
中，所有对象键都是字符串（除了
  1. Symbol
复制代码
）。尽管有时我们可能不会给定字符串类型，但它们总是被转换为字符串。
  1. JavaScript
复制代码
解释语句。当我们使用方括号表示法时，它会看到第一个左括号
  1. [
复制代码
，然后继续，直到找到右括号
  1. ]
复制代码
。只有在那个时候，它才会对这个语句求值。
  1. mouse [bird.size]
复制代码
：首先它会对
  1. bird.size
复制代码
求值，得到
  1. small
复制代码
。
  1. mouse [“small”]
复制代码
返回
  1. true
复制代码
。
但是，使用点表示法，这不会发生。
  1. mouse
复制代码
没有名为
  1. bird
复制代码
的键，这意味着
  1. mouse.bird
复制代码
是
  1. undefined
复制代码
。 然后，我们使用点符号来询问
  1. size
复制代码
：
  1. mouse.bird.size
复制代码
。 由于
  1. mouse.bird
复制代码
是
  1. undefined
复制代码
，我们实际上是在询问
  1. undefined.size
复制代码
。 这是无效的，并将抛出
  1. Cannot read property "size" of undefined
复制代码
。
6. 下面代码的输出是什么?
  1. let c = { greeting: "Hey!" };
  2. let d;
  4. d = c;
  5. c.greeting = "Hello";
  6. console.log(d.greeting);
复制代码
  • A:
    1. Hello
    复制代码
  • B:
    1. undefined
    复制代码
  • C:
    1. ReferenceError
    复制代码
  • D:
    1. TypeError
    复制代码
[h3]答案: A[/h3]在
  1. JavaScript
复制代码
中，当设置它们彼此相等时，所有对象都通过引用进行交互。
首先，变量
  1. c
复制代码
为对象保存一个值。 之后，我们将
  1. d
复制代码
指定为
  1. c
复制代码
与对象相同的引用。


更改一个对象时，可以更改所有对象。

7. 下面代码的输出是什么?
  1. let a = 3;
  2. let b = new Number(3);
  3. let c = 3;
  5. console.log(a == b);
  6. console.log(a === b);
  7. console.log(b === c);
复制代码
  • A:
    1. true
    复制代码
    1. false
    复制代码
    1. true
    复制代码
  • B:
    1. false
    复制代码
    1. false
    复制代码
    1. true
    复制代码
  • C:
    1. true
    复制代码
    1. false
    复制代码
    1. false
    复制代码
  • D:
    1. false
    复制代码
    1. true
    复制代码
    1. true
    复制代码
[h3]答案: C[/h3]
  1. new Number（）
复制代码
是一个内置的函数构造函数。 虽然它看起来像一个数字，但它并不是一个真正的数字：它有一堆额外的功能，是一个对象。
当我们使用
  1. ==
复制代码
运算符时，它只检查它是否具有相同的值。 他们都有
  1. 3
复制代码
的值，所以它返回
  1. true
复制代码
。
译者注：
  1. ==
复制代码
会引发隐式类型转换，右侧的对象类型会自动拆箱为
  1. Number
复制代码
类型。
然而，当我们使用
  1. ===
复制代码
操作符时，类型和值都需要相等，
  1. new Number()
复制代码
不是一个数字，是一个对象类型。两者都返回
  1. false
复制代码
。
8. 下面代码的输出是什么?
  1. class Chameleon {
  2.   static colorChange(newColor) {
  3.     this.newColor = newColor;
  4.   }
  6.   constructor({ newColor = "green" } = {}) {
  7.     this.newColor = newColor;
  8.   }
  9. }
  11. const freddie = new Chameleon({ newColor: "purple" });
  12. freddie.colorChange("orange");
复制代码
  • A:
    1. orange
    复制代码
  • B:
    1. purple
    复制代码
  • C:
    1. green
    复制代码
  • D:
    1. TypeError
    复制代码
[h3]答案: D[/h3]
  1. colorChange
复制代码
方法是静态的。 静态方法仅在创建它们的构造函数中存在，并且不能传递给任何子级。 由于
  1. freddie
复制代码
是一个子级对象，函数不会传递，所以在
  1. freddie
复制代码
实例上不存在
  1. freddie
复制代码
方法：抛出
  1. TypeError
复制代码
。
9. 下面代码的输出是什么?
  1. let greeting;
  2. greetign = {}; // Typo!
  3. console.log(greetign);
复制代码
  • A:
    1. {}
    复制代码
  • B:
    1. ReferenceError: greetign is not defined
    复制代码
  • C:
    1. undefined
    复制代码
[h3]答案: A[/h3]控制台会输出空对象，因为我们刚刚在全局对象上创建了一个空对象！ 当我们错误地将
  1. greeting
复制代码
输入为
  1. greetign
复制代码
时，JS解释器实际上在浏览器中将其视为
  1. global.greetign = {}
复制代码
（或
  1. window.greetign = {}
复制代码
）。
为了避免这种情况，我们可以使用
  1. “use strict”
复制代码
。 这可以确保在将变量赋值之前必须声明变量。
10. 当我们这样做时会发生什么?
  1. function bark() {
  2.   console.log("Woof!");
  3. }
  5. bark.animal = "dog";
复制代码
  • A: Nothing, this is totally fine!
  • B:
    1. SyntaxError
    复制代码
    . You cannot add properties to a function this way.
  • C:
    1. undefined
    复制代码
  • D:
    1. ReferenceError
    复制代码
[h3]答案: A[/h3]这在
  1. JavaScript
复制代码
中是可能的，因为函数也是对象！（原始类型之外的所有东西都是对象）
函数是一种特殊类型的对象。您自己编写的代码并不是实际的函数。 该函数是具有属性的对象，此属性是可调用的。
11. 下面代码的输出是什么?
  1. function Person(firstName, lastName) {
  2.   this.firstName = firstName;
  3.   this.lastName = lastName;
  4. }
  6. const member = new Person("Lydia", "Hallie");
  7. Person.getFullName = () => this.firstName + this.lastName;
  9. console.log(member.getFullName());
复制代码
  • A:
    1. TypeError
    复制代码
  • B:
    1. SyntaxError
    复制代码
  • C:
    1. Lydia Hallie
    复制代码
  • D:
    1. undefined
    复制代码
    1. undefined
    复制代码
[h3]答案: A[/h3]您不能像使用常规对象那样向构造函数添加属性。 如果要一次向所有对象添加功能，则必须使用原型。 所以在这种情况下应该这样写：
  1. Person.prototype.getFullName = function () {
  2.   return `${this.firstName} ${this.lastName}`;
  3. }
复制代码
这样会使
  1. member.getFullName()
复制代码
是可用的，为什么样做是对的？ 假设我们将此方法添加到构造函数本身。 也许不是每个
  1. Person
复制代码
实例都需要这种方法。这会浪费大量内存空间，因为它们仍然具有该属性，这占用了每个实例的内存空间。 相反，如果我们只将它添加到原型中，我们只需将它放在内存中的一个位置，但它们都可以访问它！
12. 下面代码的输出是什么?
  1. function Person(firstName, lastName) {
  2.   this.firstName = firstName;
  3.   this.lastName = lastName;
  4. }
  6. const lydia = new Person("Lydia", "Hallie");
  7. const sarah = Person("Sarah", "Smith");
  9. console.log(lydia);
  10. console.log(sarah);
复制代码
  • A:
    1. Person {firstName: "Lydia", lastName: "Hallie"}
    复制代码
    and
    1. undefined
    复制代码
  • B:
    1. Person {firstName: "Lydia", lastName: "Hallie"}
    复制代码
    and
    1. Person {firstName: "Sarah", lastName: "Smith"}
    复制代码
  • C:
    1. Person {firstName: "Lydia", lastName: "Hallie"}
    复制代码
    and
    1. {}
    复制代码
  • D:
    1. Person {firstName: "Lydia", lastName: "Hallie"}
    复制代码
    and
    1. ReferenceError
    复制代码
[h3]答案: A[/h3]对于
  1. sarah
复制代码
，我们没有使用
  1. new
复制代码
关键字。 使用
  1. new
复制代码
时，它指的是我们创建的新空对象。 但是，如果你不添加
  1. new
复制代码
它指的是全局对象！
我们指定了
  1. this.firstName
复制代码
等于
  1. 'Sarah
复制代码
和
  1. this.lastName
复制代码
等于
  1. Smith
复制代码
。 我们实际做的是定义
  1. global.firstName ='Sarah'
复制代码
和
  1. global.lastName ='Smith
复制代码
。
  1. sarah
复制代码
本身的返回值是
  1. undefined
复制代码
。
12. 事件传播的三个阶段是什么？?
  • A: 目标 > 捕获 > 冒泡
  • B: 冒泡 > 目标 > 捕获
  • C: 目标 > 冒泡 > 捕获
  • D: 捕获 > 目标 > 冒泡
[h3]答案: D[/h3]在捕获阶段，事件通过父元素向下传递到目标元素。 然后它到达目标元素，冒泡开始。


13. 所有对象都有原型.
  • A: 对
  • B: 错误
[h3]答案: B[/h3]除基础对象外，所有对象都有原型。 基础对象可以访问某些方法和属性，例如
  1. .toString
复制代码
。 这就是您可以使用内置
  1. JavaScript
复制代码
方法的原因！ 所有这些方法都可以在原型上找到。 虽然
  1. JavaScript
复制代码
无法直接在您的对象上找到它，但它会沿着原型链向下寻找并在那里找到它，这使您可以访问它。
译者注：基础对象指原型链终点的对象。基础对象的原型是
  1. null
复制代码
。
14. 下面代码的输出是什么?
  1. function sum(a, b) {
  2.   return a + b;
  3. }
  5. sum(1, "2");
复制代码
  • A:
    1. NaN
    复制代码
  • B:
    1. TypeError
    复制代码
  • C:
    1. "12"
    复制代码
  • D:
    1. 3
    复制代码
[h3]答案: C[/h3]
  1. JavaScript
复制代码
是一种动态类型语言：我们没有指定某些变量的类型。 在您不知情的情况下，值可以自动转换为另一种类型，称为隐式类型转换。 强制从一种类型转换为另一种类型。
在此示例中，
  1. JavaScript
复制代码
将数字
  1. 1
复制代码
转换为字符串，以使函数有意义并返回值。 在让数字类型（
  1. 1
复制代码
）和字符串类型（
  1. '2'
复制代码
）相加时，该数字被视为字符串。 我们可以连接像
  1. “Hello”+“World”
复制代码
这样的字符串，所以这里发生的是
  1. “1”+“2”
复制代码
返回
  1. “12”
复制代码
。
15. 下面代码的输出是什么?
  1. let number = 0;
  2. console.log(number++);
  3. console.log(++number);
  4. console.log(number);
复制代码
  • A:
    1. 1
    复制代码
    1. 1
    复制代码
    1. 2
    复制代码
  • B:
    1. 1
    复制代码
    1. 2
    复制代码
    1. 2
    复制代码
  • C:
    1. 0
    复制代码
    1. 2
    复制代码
    1. 2
    复制代码
  • D:
    1. 0
    复制代码
    1. 1
    复制代码
    1. 2
    复制代码
[h3]答案: C[/h3]后缀一元运算符
  1. ++
复制代码
：
  • 返回值（返回
    1. 0
    复制代码
    ）
  • 增加值（数字现在是
    1. 1
    复制代码
    ）
前缀一元运算符
  1. ++
复制代码
：
  • 增加值（数字现在是
    1. 2
    复制代码
    ）
  • 返回值（返回
    1. 2
    复制代码
    ）
所以返回
  1. 0 2 2
复制代码
。
16. 下面代码的输出是什么?
  1. function getPersonInfo(one, two, three) {
  2.   console.log(one);
  3.   console.log(two);
  4.   console.log(three);
  5. }
  7. const person = "Lydia";
  8. const age = 21;
  10. getPersonInfo`${person} is ${age} years old`;
复制代码
  • A:
    1. Lydia
    复制代码
    1. 21
    复制代码
    1. ["", "is", "years old"]
    复制代码
  • B:
    1. ["", "is", "years old"]
    复制代码
    1. Lydia
    复制代码
    1. 21
    复制代码
  • C:
    1. Lydia
    复制代码
    1. ["", "is", "years old"]
    复制代码
    1. 21
    复制代码
[h3]答案: B[/h3]如果使用标记的模板字符串，则第一个参数的值始终是字符串值的数组。 其余参数获取传递到模板字符串中的表达式的值！
17. 下面代码的输出是什么?
  1. function checkAge(data) {
  2.   if (data === { age: 18 }) {
  3.     console.log("You are an adult!");
  4.   } else if (data == { age: 18 }) {
  5.     console.log("You are still an adult.");
  6.   } else {
  7.     console.log(`Hmm.. You don't have an age I guess`);
  8.   }
  9. }
  11. checkAge({ age: 18 });
复制代码
  • A:
    1. You are an adult!
    复制代码
  • B:
    1. You are still an adult.
    复制代码
  • C:
    1. Hmm.. You don't have an age I guess
    复制代码
[h3]答案: C[/h3]在比较相等性，原始类型通过它们的值进行比较，而对象通过它们的引用进行比较。
  1. JavaScript
复制代码
检查对象是否具有对内存中相同位置的引用。
我们作为参数传递的对象和我们用于检查相等性的对象在内存中位于不同位置，所以它们的引用是不同的。
这就是为什么
  1. { age: 18 } === { age: 18 }
复制代码
和
  1. { age: 18 } == { age: 18 }
复制代码
返回
  1. false
复制代码
的原因。
18. 下面代码的输出是什么?
  1. function getAge(...args) {
  2.   console.log(typeof args);
  3. }
  5. getAge(21);
复制代码
  • A:
    1. "number"
    复制代码
  • B:
    1. "array"
    复制代码
  • C:
    1. "object"
    复制代码
  • D:
    1. "NaN"
    复制代码
[h3]答案: C[/h3]扩展运算符（
  1. ... args
复制代码
）返回一个带参数的数组。 数组是一个对象，因此
  1. typeof args
复制代码
返回
  1. object
复制代码
。
20. 下面代码的输出是什么?
  1. function getAge() {
  2.   "use strict";
  3.   age = 21;
  4.   console.log(age);
  5. }
  7. getAge();
复制代码
  • A:
    1. 21
    复制代码
  • B:
    1. undefined
    复制代码
  • C:
    1. ReferenceError
    复制代码
  • D:
    1. TypeError
    复制代码
[h3]答案: C[/h3]使用
  1. “use strict”
复制代码
，可以确保不会意外地声明全局变量。 我们从未声明变量
  1. age
复制代码
，因为我们使用
  1. `use strict'
复制代码
，它会引发一个
  1. ReferenceError
复制代码
。 如果我们不使用
  1. “use strict”
复制代码
，它就会起作用，因为属性
  1. age
复制代码
会被添加到全局对象中。
21. 下面代码的输出是什么?
  1. const sum = eval("10*10+5");
复制代码
  • A:
    1. 105
    复制代码
  • B:
    1. "105"
    复制代码
  • C:
    1. TypeError
    复制代码
  • D:
    1. "10*10+5"
    复制代码
[h3]答案: A[/h3]
  1. eval
复制代码
会为字符串传递的代码求值。 如果它是一个表达式，就像在这种情况下一样，它会计算表达式。 表达式为
  1. 10 * 10 + 5
复制代码
计算得到
  1. 105
复制代码
。
22. cool_secret可以访问多长时间?
  1. sessionStorage.setItem("cool_secret", 123);
复制代码
  • A：永远，数据不会丢失。
  • B：用户关闭选项卡时。
  • C：当用户关闭整个浏览器时，不仅是选项卡。
  • D：用户关闭计算机时。
[h3]答案: B[/h3]关闭选项卡后，将删除存储在
  1. sessionStorage
复制代码
中的数据。
如果使用
  1. localStorage
复制代码
，数据将永远存在，除非例如调用
  1. localStorage.clear()
复制代码
。
23. 下面代码的输出是什么?
  1. var num = 8;
  2. var num = 10;
  4. console.log(num);
复制代码
  • A:
    1. 8
    复制代码
  • B:
    1. 10
    复制代码
  • C:
    1. SyntaxError
    复制代码
  • D:
    1. ReferenceError
    复制代码
[h3]答案: B[/h3]使用
  1. var
复制代码
关键字，您可以用相同的名称声明多个变量。然后变量将保存最新的值。
您不能使用
  1. let
复制代码
或
  1. const
复制代码
来实现这一点，因为它们是块作用域的。
24. 下面代码的输出是什么?
  1. const obj = { 1: "a", 2: "b", 3: "c" };
  2. const set = new Set([1, 2, 3, 4, 5]);
  4. obj.hasOwnProperty("1");
  5. obj.hasOwnProperty(1);
  6. set.has("1");
  7. set.has(1);
复制代码
  • A:
    1. false
    复制代码
    1. true
    复制代码
    1. false
    复制代码
    1. true
    复制代码
  • B:
    1. false
    复制代码
    1. true
    复制代码
    1. true
    复制代码
    1. true
    复制代码
  • C:
    1. true
    复制代码
    1. true
    复制代码
    1. false
    复制代码
    1. true
    复制代码
  • D:
    1. true
    复制代码
    1. true
    复制代码
    1. true
    复制代码
    1. true
    复制代码
[h3]答案: C[/h3]所有对象键（不包括
  1. Symbols
复制代码
）都会被存储为字符串，即使你没有给定字符串类型的键。 这就是为什么
  1. obj.hasOwnProperty（'1'）
复制代码
也返回
  1. true
复制代码
。
上面的说法不适用于
  1. Set
复制代码
。 在我们的
  1. Set
复制代码
中没有
  1. “1”
复制代码
：
  1. set.has（'1'）
复制代码
返回
  1. false
复制代码
。 它有数字类型
  1. 1
复制代码
，
  1. set.has（1）
复制代码
返回
  1. true
复制代码
。
25. 下面代码的输出是什么?
  1. const obj = { a: "one", b: "two", a: "three" };
  2. console.log(obj);
复制代码
  • A:
    1. { a: "one", b: "two" }
    复制代码
  • B:
    1. { b: "two", a: "three" }
    复制代码
  • C:
    1. { a: "three", b: "two" }
    复制代码
  • D:
    1. SyntaxError
    复制代码
[h3]答案: C[/h3]如果对象有两个具有相同名称的键，则将替前面的键。它仍将处于第一个位置，但具有最后指定的值。
26. JavaScript全局执行上下文为你创建了两个东西:全局对象和this关键字.
  • A: 对
  • B: 错误
  • C: 视情况而定
[h3]答案: A[/h3]基本执行上下文是全局执行上下文:它是代码中随处可访问的内容。
27. 下面代码的输出是什么?
  1. for (let i = 1; i < 5; i++) {
  2.   if (i === 3) continue;
  3.   console.log(i);
  4. }
复制代码
  • A:
    1. 1
    复制代码
    1. 2
    复制代码
  • B:
    1. 1
    复制代码
    1. 2
    复制代码
    1. 3
    复制代码
  • C:
    1. 1
    复制代码
    1. 2
    复制代码
    1. 4
    复制代码
  • D:
    1. 1
    复制代码
    1. 3
    复制代码
    1. 4
    复制代码
[h3]答案: C[/h3]如果某个条件返回
  1. true
复制代码
，则
  1. continue
复制代码
语句跳过迭代。
28. 下面代码的输出是什么?
  1. String.prototype.giveLydiaPizza = () => {
  2.   return "Just give Lydia pizza already!";
  3. };
  5. const name = "Lydia";
  7. name.giveLydiaPizza();
复制代码
  • A:
    1. "Just give Lydia pizza already!"
    复制代码
  • B:
    1. TypeError: not a function
    复制代码
  • C:
    1. SyntaxError
    复制代码
  • D:
    1. undefined
    复制代码
[h3]答案: A[/h3]
  1. String
复制代码
是一个内置的构造函数，我们可以为它添加属性。 我刚给它的原型添加了一个方法。 原始类型的字符串自动转换为字符串对象，由字符串原型函数生成。 因此，所有字符串（字符串对象）都可以访问该方法！
译者注：
当使用基本类型的字符串调用
  1. giveLydiaPizza
复制代码
时，实际上发生了下面的过程：
  • 创建一个
    1. String
    复制代码
    的包装类型实例
  • 在实例上调用
    1. substring
    复制代码
    方法
  • 销毁实例
29. 下面代码的输出是什么?
  1. const a = {};
  2. const b = { key: "b" };
  3. const c = { key: "c" };
  5. a[b] = 123;
  6. a[c] = 456;
  8. console.log(a[b]);
复制代码
  • A:
    1. 123
    复制代码
  • B:
    1. 456
    复制代码
  • C:
    1. undefined
    复制代码
  • D:
    1. ReferenceError
    复制代码
[h3]答案: B[/h3]对象键自动转换为字符串。我们试图将一个对象设置为对象
  1. a
复制代码
的键，其值为
  1. 123
复制代码
。
但是，当对象自动转换为字符串化时，它变成了
  1. [Object object]
复制代码
。 所以我们在这里说的是
  1. a["Object object"] = 123
复制代码
。 然后，我们可以尝试再次做同样的事情。
  1. c
复制代码
对象同样会发生隐式类型转换。那么，
  1. a["Object object"] = 456
复制代码
。
然后，我们打印
  1. a[b]
复制代码
，它实际上是
  1. a["Object object"]
复制代码
。 我们将其设置为
  1. 456
复制代码
，因此返回
  1. 456
复制代码
。
30. 下面代码的输出是什么?
  1. const foo = () => console.log("First");
  2. const bar = () => setTimeout(() => console.log("Second"));
  3. const baz = () => console.log("Third");
  5. bar();
  6. foo();
  7. baz();
复制代码
  • A:
    1. First
    复制代码
    1. Second
    复制代码
    1. Third
    复制代码
  • B:
    1. First
    复制代码
    1. Third
    复制代码
    1. Second
    复制代码
  • C:
    1. Second
    复制代码
    1. First
    复制代码
    1. Third
    复制代码
  • D:
    1. Second
    复制代码
    1. Third
    复制代码
    1. First
    复制代码
[h3]答案: B[/h3]我们有一个
  1. setTimeout
复制代码
函数并首先调用它。 然而却最后打印了它。
这是因为在浏览器中，我们不只有运行时引擎，我们还有一个叫做
  1. WebAPI
复制代码
的东西。
  1. WebAPI
复制代码
为我们提供了
  1. setTimeout
复制代码
函数，例如
  1. DOM
复制代码
。
将
  1. callback
复制代码
推送到
  1. WebAPI
复制代码
后，
  1. setTimeout
复制代码
函数本身（但不是回调！）从堆栈中弹出。


现在，调用
  1. foo
复制代码
，并打印
  1. First
复制代码
。


  1. foo
复制代码
从堆栈弹出，
  1. baz
复制代码
被调用，并打印
  1. Third
复制代码
。


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


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


  1. bar
复制代码
被调用，
  1. Second
复制代码
被打印，它从栈中弹出。

31. 单击按钮时event.target是什么?
  2.   
  3.    
  4.       Click!
  5.    
  6.   
复制代码
  • A:
    1. div
    复制代码
    外部
  • B:
    1. div
    复制代码
    内部
  • C:
    1. button
    复制代码
  • D: 所有嵌套元素的数组.
[h3]答案: C[/h3]导致事件的最深嵌套元素是事件的目标。 你可以通过
  1. event.stopPropagation
复制代码
停止冒泡
32. 单击下面的html片段打印的内容是什么?
  2.   
  3.     Click here!
复制代码
  • A:
    1. p
    复制代码
    1. div
    复制代码
  • B:
    1. div
    复制代码
    1. p
    复制代码
  • C:
    1. p
    复制代码
  • D:
    1. div
    复制代码
[h3]答案: A[/h3]如果我们单击
  1. p
复制代码
，我们会看到两个日志：
  1. p
复制代码
和
  1. div
复制代码
。在事件传播期间，有三个阶段：捕获，目标和冒泡。 默认情况下，事件处理程序在冒泡阶段执行（除非您将
  1. useCapture
复制代码
设置为
  1. true
复制代码
）。 它从最深的嵌套元素向外延伸。
33. 下面代码的输出是什么?
  1. const person = { name: "Lydia" };
  3. function sayHi(age) {
  4.   console.log(`${this.name} is ${age}`);
  5. }
  7. sayHi.call(person, 21);
  8. sayHi.bind(person, 21);
复制代码
  • A:
    1. undefined is 21
    复制代码
    1. Lydia is 21
    复制代码
  • B:
    1. function
    复制代码
    1. function
    复制代码
  • C:
    1. Lydia is 21
    复制代码
    1. Lydia is 21
    复制代码
  • D:
    1. Lydia is 21
    复制代码
    1. function
    复制代码
[h3]答案: D[/h3]使用两者，我们可以传递我们想要
  1. this
复制代码
关键字引用的对象。 但是，
  1. .call
复制代码
方法会立即执行！
  1. .bind
复制代码
方法会返回函数的拷贝值，但带有绑定的上下文！ 它不会立即执行。
34. 下面代码的输出是什么?
  1. function sayHi() {
  2.   return (() => 0)();
  3. }
  5. typeof sayHi();
复制代码
  • A:
    1. "object"
    复制代码
  • B:
    1. "number"
    复制代码
  • C:
    1. "function"
    复制代码
  • D:
    1. "undefined"
    复制代码
[h3]答案: B[/h3]
  1. sayHi
复制代码
函数返回立即调用的函数（
  1. IIFE
复制代码
）的返回值。 该函数返回
  1. 0
复制代码
，类型为
  1. 数字
复制代码
。
仅供参考：只有7种内置类型：
  1. null
复制代码
，
  1. undefined
复制代码
，
  1. boolean
复制代码
，
  1. number
复制代码
，
  1. string
复制代码
，
  1. object
复制代码
和
  1. symbol
复制代码
。
  1. function
复制代码
不是一个类型，因为函数是对象，它的类型是
  1. object
复制代码
。
35. 下面这些值哪些是假值?
  1. 0;
  2. new Number(0);
  3. ("");
  4. (" ");
  5. new Boolean(false);
  6. undefined;
复制代码
  • A:
    1. 0
    复制代码
    ,
    1. ''
    复制代码
    ,
    1. undefined
    复制代码
  • B:
    1. 0
    复制代码
    ,
    1. new Number(0)
    复制代码
    ,
    1. ''
    复制代码
    ,
    1. new Boolean(false)
    复制代码
    ,
    1. undefined
    复制代码
  • C:
    1. 0
    复制代码
    ,
    1. ''
    复制代码
    ,
    1. new Boolean(false)
    复制代码
    ,
    1. undefined
    复制代码
  • D: 所有都是假值
[h3]答案: A[/h3]
  1. JavaScript
复制代码
中只有6个假值：
    1. undefined
    复制代码
    1. null
    复制代码
    1. NaN
    复制代码
    1. 0
    复制代码
    1. ''
    复制代码
    (empty string)
    1. false
    复制代码
函数构造函数，如
  1. new Number
复制代码
和
  1. new Boolean
复制代码
都是真值。
36. 下面代码的输出是什么?
  1. console.log(typeof typeof 1);
复制代码
  • A:
    1. "number"
    复制代码
  • B:
    1. "string"
    复制代码
  • C:
    1. "object"
    复制代码
  • D:
    1. "undefined"
    复制代码
[h3]答案: B[/h3]
  1. typeof 1
复制代码
返回
  1. "number"
复制代码
.
  1. typeof "number"
复制代码
返回
  1. "string"
复制代码
37. 下面代码的输出是什么?
  1. const numbers = [1, 2, 3];
  2. numbers[10] = 11;
  3. console.log(numbers);
复制代码
  • A:
    1. [1, 2, 3, 7 x null, 11]
    复制代码
  • B:
    1. [1, 2, 3, 11]
    复制代码
  • C:
    1. [1, 2, 3, 7 x empty, 11]
    复制代码
  • D:
    1. SyntaxError
    复制代码
[h3]答案: C[/h3]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
  1. undefined
复制代码
, but you will see something like:
当你为数组中的元素设置一个超过数组长度的值时，
  1. JavaScript
复制代码
会创建一个名为“空插槽”的东西。 这些位置的值实际上是
  1. undefined
复制代码
，但你会看到类似的东西：
  1. [1, 2, 3, 7 x empty, 11]
复制代码
这取决于你运行它的位置（每个浏览器有可能不同）。
38. 下面代码的输出是什么?
  1. (() => {
  2.   let x, y;
  3.   try {
  4.     throw new Error();
  5.   } catch (x) {
  6.     (x = 1), (y = 2);
  7.     console.log(x);
  8.   }
  9.   console.log(x);
  10.   console.log(y);
  11. })();
复制代码
  • A:
    1. 1
    复制代码
    1. undefined
    复制代码
    1. 2
    复制代码
  • B:
    1. undefined
    复制代码
    1. undefined
    复制代码
    1. undefined
    复制代码
  • C:
    1. 1
    复制代码
    1. 1
    复制代码
    1. 2
    复制代码
  • D:
    1. 1
    复制代码
    1. undefined
    复制代码
    1. undefined
    复制代码
[h3]答案: A[/h3]
  1. catch
复制代码
块接收参数
  1. x
复制代码
。当我们传递参数时，这与变量的
  1. x
复制代码
不同。这个变量
  1. x
复制代码
是属于
  1. catch
复制代码
作用域的。
之后，我们将这个块级作用域的变量设置为
  1. 1
复制代码
，并设置变量
  1. y
复制代码
的值。 现在，我们打印块级作用域的变量
  1. x
复制代码
，它等于
  1. 1
复制代码
。
在
  1. catch
复制代码
块之外，
  1. x
复制代码
仍然是
  1. undefined
复制代码
，而
  1. y
复制代码
是
  1. 2
复制代码
。 当我们想在
  1. catch
复制代码
块之外的
  1. console.log(x)
复制代码
时，它返回
  1. undefined
复制代码
，而
  1. y
复制代码
返回
  1. 2
复制代码
。
39. JavaScript中的所有内容都是…
  • A：原始或对象
  • B：函数或对象
  • C：技巧问题！只有对象
  • D：数字或对象
[h3]答案: A[/h3]
  1. JavaScript
复制代码
只有原始类型和对象。
原始类型是
  1. boolean
复制代码
，
  1. null
复制代码
，
  1. undefined
复制代码
，
  1. bigint
复制代码
，
  1. number
复制代码
，
  1. string
复制代码
和
  1. symbol
复制代码
。
40. 下面代码的输出是什么?
  1. [[0, 1], [2, 3]].reduce(
  2.   (acc, cur) => {
  3.     return acc.concat(cur);
  4.   },
  5.   [1, 2]
  6. );
复制代码
  • A:
    1. [0, 1, 2, 3, 1, 2]
    复制代码
  • B:
    1. [6, 1, 2]
    复制代码
  • C:
    1. [1, 2, 0, 1, 2, 3]
    复制代码
  • D:
    1. [1, 2, 6]
    复制代码
[h3]答案: C[/h3]
  1. [1,2]
复制代码
是我们的初始值。 这是我们开始执行
  1. reduce
复制代码
函数的初始值，以及第一个
  1. acc
复制代码
的值。 在第一轮中，
  1. acc
复制代码
是
  1. [1,2]
复制代码
，
  1. cur
复制代码
是
  1. [0,1]
复制代码
。 我们将它们连接起来，结果是
  1. [1,2,0,1]
复制代码
。
然后，
  1. acc
复制代码
的值为
  1. [1,2,0,1]
复制代码
，
  1. cur
复制代码
的值为
  1. [2,3]
复制代码
。 我们将它们连接起来，得到
  1. [1,2,0,1,2,3]
复制代码
。
41. 下面代码的输出是什么?
  1. !!null;
  2. !!"";
  3. !!1;
复制代码
  • A:
    1. false
    复制代码
    1. true
    复制代码
    1. false
    复制代码
  • B:
    1. false
    复制代码
    1. false
    复制代码
    1. true
    复制代码
  • C:
    1. false
    复制代码
    1. true
    复制代码
    1. true
    复制代码
  • D:
    1. true
    复制代码
    1. true
    复制代码
    1. false
    复制代码
[h3]答案: B[/h3]
  1. null
复制代码
是假值。
  1. !null
复制代码
返回
  1. true
复制代码
。
  1. !true
复制代码
返回
  1. false
复制代码
。
  1. ""
复制代码
是假值。
  1. !""
复制代码
返回
  1. true
复制代码
。
  1. !true
复制代码
返回
  1. false
复制代码
。
  1. 1
复制代码
是真值。
  1. !1
复制代码
返回
  1. false
复制代码
。
  1. !false
复制代码
返回
  1. true
复制代码
。
42. `setInterval`方法的返回值什么?
  1. setInterval(() => console.log("Hi"), 1000);
复制代码
  • A：一个唯一的
    1. id
    复制代码
  • B：指定的毫秒数
  • C：传递的函数
  • D：
    1. undefined
    复制代码
[h3]答案: A[/h3]它返回一个唯一的
  1. id
复制代码
。 此
  1. id
复制代码
可用于使用
  1. clearInterval()
复制代码
函数清除该定时器。
43. What does this return?
  1. [..."Lydia"];
复制代码
  • A:
    1. ["L", "y", "d", "i", "a"]
    复制代码
  • B:
    1. ["Lydia"]
    复制代码
  • C:
    1. [[], "Lydia"]
    复制代码
  • D:
    1. [["L", "y", "d", "i", "a"]]
    复制代码
[h3]答案: A[/h3]字符串是可迭代的。 扩展运算符将迭代的每个字符映射到一个元素。

【本文作者】


ConardLi：一枚高级前端开发工程师。个人公众号：「code秘密花园」


推荐阅读
（点击标题可跳转阅读）
聊聊我们最近在面试中发现的一些共性问题
用 JS 开发跨平台桌面应用，从原理到实践
一个合格的中级前端工程师要掌握的 JavaScript 技巧


觉得本文对你有帮助？请分享给更多人
关注「前端大全」加星标，提升前端技能

好文章，我在看
回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

4级常客
前端大全

积分:195
帖子:39
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP