每日20道面试题带解析 — (41 - 60)

答案在问题下方的折叠部分，点击即可展开问题。祝你好运 ❤️

1. 事件传播的三个阶段是什么？

 事件传播的三个阶段是什么？

• A: Target > Capturing > Bubbling

• B: Bubbling > Target > Capturing

• C: Target > Bubbling > Capturing

• D: Capturing > Target > Bubbling

  点此查看答案及解析

  
  答案 : D
  解析 : 在捕获（capturing）阶段中，事件从祖先元素向下传播到目标元素。当事件达到目标（target）元素后，冒泡（bubbling）才开始。
  
  

2. 写出执行结果，并解释原因

 +true;
!"Lydia";

• A: 1 and false

• B: false and NaN

• C: false and false

  点此查看答案及解析

  
  答案 : A
  解析 : 一元操作符加号尝试将 boolean 转为 number。true 转换为 number 为 1，false 为 0。
  	字符串 'Lydia' 是一个真值，真值取反那么就返回 false。
  
  

3. 写出执行结果，并解释原因

const bird = {
  size: 'small'
}

const mouse = {
  name: 'Mickey',
  small: true
}

• A: mouse.bird.size是无效的

• B: mouse[bird.size]是无效的

• C: mouse[bird["size"]]是无效的

• D: 以上三个选项都是有效的

  点此查看答案及解析

  
  答案 : A
  解析 : 
    1. 所有对象的 keys 都是字符串(在底层总会被转换为字符串)
    2. 使用括号语法时[]，首先看到第一个开始括号 [ 并继续前进直到找到结束括号 ]。
    3. mouse[bird.size]：首先计算 bird.size，得到 small, mouse["small"] 返回 true。
    //使用点语法
    4. mouse 没有 bird 属性，返回 undefined,也就变成了 undefined.size。是无效的，并且会抛出一个错误类似 Cannot read property "size" of undefined。
  
  

4. 当我们这么做时，会发生什么？

function bark() {
  console.log('Woof!')
}

bark.animal = 'dog'

• A: 正常运行!

• B: SyntaxError. 你不能通过这种方式给函数增加属性。

• C: undefined

• D: ReferenceError

  点此查看答案及解析

  
  答案 : A
  解析 : 在JS中是可以的，因为函数是一个特殊的对象（除了基本类型之外其他都是对象）
     函数是一个拥有属性的对象，并且属性也可被调用。
  	bark.animal = function(){ console.log(1)}
  	bark.animal () // 1
  
  

5. 写出执行结果，并解释原因

class Chameleon {
  static colorChange(newColor) {
    this.newColor = newColor
    return this.newColor
  }

  constructor({ newColor = 'green' } = {}) {
    this.newColor = newColor
  }
}

const freddie = new Chameleon({ newColor: 'purple' })
freddie.colorChange('orange')

• A: orange

• B: purple

• C: green

• D: TypeError

  点此查看答案及解析

  
  答案 : D
  解析 : colorChange 是一个静态方法。静态方法只能被创建它们的构造器使用（也就是 Chameleon），
       并且不能传递给实例。因为 freddie 是一个实例，静态方法不能被实例使用，因此抛出了 TypeError 错误。
  
  

6. 写出执行结果，并解释原因

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const member = new Person("Lydia", "Hallie");
Person.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
}

console.log(member.getFullName());

• A: TypeError

• B: SyntaxError

• C: Lydia Hallie

• D: undefined undefined

  点此查看答案及解析

  
  答案 : A
  解析 : 不能像常规对象那样，给构造函数添加属性。应该使用原型。
      Person.prototype.getFullName = function () {
        return `${this.firstName} ${this.lastName}`;
  	}
  这样 member.getFullName() 才起作用。将公共属性和方法添加到原型中，它只存在于内存中的一个位置，所有实例都可以访问它，节省内存空间
  
  

7. 写出执行结果，并解释原因

function Person(firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

const lydia = new Person('Lydia', 'Hallie')
const sarah = Person('Sarah', 'Smith')

console.log(lydia)
console.log(sarah)

• A: Person {firstName: "Lydia", lastName: "Hallie"} and undefined

• B: Person {firstName: "Lydia", lastName: "Hallie"} and Person {firstName: "Sarah", lastName: "Smith"}

• C: Person {firstName: "Lydia", lastName: "Hallie"} and {}

• D:Person {firstName: "Lydia", lastName: "Hallie"} and ReferenceError

  点此查看答案及解析

  
  答案 : A
  解析 : sarah没有使用 new 关键字。当使用 new 时，this 指向我们创建的空对象。未使用 new 时，this 指向的是全局对象。
      上述操作相当于 window.firstName = 'Sarah' 和 window.lastName = 'Smith'。而 sarah 本身是 undefined。
  
  

8. 写出执行结果，并解释原因

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
  解析 : 如果一个对象有两个同名的键，则键会被替换掉。但仍位于该键第一次出现的位置，但是值是最后出现那个值。
  
  

9. 写出执行结果，并解释原因

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
  解析 : 对象的键被自动转换为字符串。
    1. 将对象 b 设置为对象 a 的键，会变成 "[object Object]",相当于a["[object Object]"] = 123。
    2. 再次将对象 c 设置为对象 a 的键,相当于 a["[object Object]"] = 456。
    3. 此时打印 a[b]，也就是 a["[object Object]"]。刚设置为 456，因此返回  456。
  
  

10. 写出执行结果，并解释原因

function sayHi() {
  return (() => 0)()
}

typeof sayHi()

• A: "object"

• B: "number"

• C: "function"

• D: "undefined"

  点此查看答案及解析

  
  答案 : B
  解析 : sayHi 方法返回的是立即执行函数(IIFE)的返回值.此立即执行函数的返回值是 0， 类型是 number 
  
  

11. 写出执行结果，并解释原因

[1, 2, 3].map(num => {
  if (typeof num === "number") return;
  return num * 2;
});

• A: []

• B: [null, null, null]

• C: [undefined, undefined, undefined]

• D: [ 3 x empty ]

  点此查看答案及解析

  
  答案 : C
  解析 : num表示当前元素. 都是number类型，因此typeof num === "number"结果都是true.map函数创建了新数组，并且将函数的返回值插入数组。
  但并没有任何值返回。当函数没有返回任何值时，即默认返回undefined.对数组中的每一个元素来说，函数块都得到了这个返回值，所以结果中每一个元素都是undefined. 
  扩展：
    1. [1, 2, 3].map(num => typeof num === "number" );  // [true, true, true]
    2. [1, 2, 3].map(num => typeof (num === "number")); // ["boolean", "boolean", "boolean"]
  
  

12. 输出什么?

function getFine(speed, amount) {
  const formattedSpeed = new Intl.NumberFormat({
    'en-US',
    { style: 'unit', unit: 'mile-per-hour' }
  }).format(speed)

  const formattedAmount = new Intl.NumberFormat({
    'en-US',
    { style: 'currency', currency: 'USD' }
  }).format(amount)

  return `The driver drove ${formattedSpeed} and has to pay ${formattedAmount}`
}

console.log(getFine(130, 300))

• A: The driver drove 130 and has to pay 300

• B: The driver drove 130 mph and has to pay $300.00

• C: The driver drove undefined and has to pay undefined

• D: The driver drove 130.00 and has to pay 300.00

  点此查看答案及解析

  
  答案 : B
  解析 : Intl.NumberFormat 方法，可以格式化任意区域的数字值。
        mile-per-hour 通过格式化结果为 mph; USD通过格式化结果为 $.
  
  

13. 写出执行结果，并解释原因

class Dog {
  constructor(name) {
    this.name = name;
  }
}

Dog.prototype.bark = function() {
  console.log(`Woof I am ${this.name}`);
};

const pet = new Dog("Mara");

pet.bark();

delete Dog.prototype.bark;

pet.bark();

• A: "Woof I am Mara", TypeError

• B: "Woof I am Mara","Woof I am Mara"

• C: "Woof I am Mara", undefined

• D: TypeError, TypeError

  点此查看答案及解析

  
  答案 : A
  解析 : delete关键字删除对象的属性，对原型也适用。删除原型的属性后，该属性在原型链上就不可用。
    执行 delete Dog.prototype.bark 后不可用,尝试调用一个不存在的函数时会抛出异常。
    TypeError: pet.bark is not a function，因为pet.bark是undefined.
  
  

14. 写出执行结果，并解释原因

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

console.log(set);

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

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

• C: {1, 1, 2, 3, 4}

• D: {1, 2, 3, 4}

  点此查看答案及解析

  
  答案 : D
  解析 : Set对象是唯一值的集合：也就是说同一个值在其中仅出现一次。。所以结果是 {1, 2, 3, 4}. 
  易错 : B, 常见的set用法可用于数组去重，因此大家可能会误以为返回的是唯一值的数组，其实不然，
  	var set1 = [...new Set([1, 1, 2, 3, 4])];
  	console.log(set1); // 此时返回的才是数组 [1, 2, 3, 4]
  
  

15. 写出执行结果，并解释原因

const name = "Lydia Hallie"

console.log(name.padStart(13))
console.log(name.padStart(2))

• A: "Lydia Hallie", "Lydia Hallie"

• B: " Lydia Hallie", " Lydia Hallie" ("[13x whitespace]Lydia Hallie", "[2x whitespace]Lydia Hallie")

• C: " Lydia Hallie", "Lydia Hallie" ("[1x whitespace]Lydia Hallie", "Lydia Hallie")

• D: "Lydia Hallie", "Lyd"

  点此查看答案及解析

  
  答案 : C
  解析 : padStart方法可以在字符串的起始位置填充。参数是字符串的总长度（包含填充）。
    字符串Lydia Hallie的长度为12, 因此name.padStart(13)在字符串的开头只会插入1个空格。
    如果传递给 padStart 方法的参数小于字符串的长度，则不会添加填充。 
  
  

16. 写出执行结果，并解释原因

const { name: myName } = { name: "Lydia" };

console.log(name);

• A: "Lydia"

• B: "myName"

• C: undefined

• D: ReferenceError

  点此查看答案及解析

  
  答案 : D
  解析 : 对象解构：{name：myName}该语法为获取右侧对象中name属性值，并重命名为myName。
     而name是一个未定义的变量，直接打印会引发ReferenceError: name is not defined。
  
  

17. 写出执行结果，并解释原因

function checkAge(age) {
  if (age < 18) {
    const message = "Sorry, you're too young."
  } else {
    const message = "Yay! You're old enough!"
  }

  return message
}

console.log(checkAge(21))

• A: "Sorry, you're too young."

• B: "Yay! You're old enough!"

• C: ReferenceError

• D: undefined

  点此查看答案及解析

  
  答案 : C
  解析 : 本题考查const和let声明的变量具有块级作用域，无法在声明的块之外引用变量，抛出 ReferenceError。
  
  

18. 写出执行结果，并解释原因

let name = 'Lydia'

function getName() {
  console.log(name)
  let name = 'Sarah'
}

getName()

• A: Lydia

• B: Sarah

• C: undefined

• D: ReferenceError

  点此查看答案及解析

  
  答案 : D
  解析 : let和const声明的变量，与var不同，它不会被初始化。 在初始化之前无法访问。称为“暂时性死区”。
      JavaScript会抛出ReferenceError: Cannot access 'name' before initialization。
  
  

19. 写出执行结果，并解释原因

console.log(`${(x => x)('I love')} to program`)

• A: I love to program

• B: undefined to program

• C: ${(x => x)('I love') to program

• D: TypeError

  点此查看答案及解析

  
  答案 : A
  解析 : 带有模板字面量的表达式首先被执行。相当于字符串包含表达式，(x => x)('I love')是一个立即执行函数  
       向箭头函数 x => x 传递 'I love' 作为参数。x 等价于返回的 'I love'。结果就是 I love to program。
  
  

20. 写出执行结果，并解释原因

const spookyItems = ["👻", "🎃", "🕸"];
({ item: spookyItems[3] } = { item: "💀" });

console.log(spookyItems);

• A: ["👻", "🎃", "🕸"]

• B: ["👻", "🎃", "🕸", "💀"]

• C: ["👻", "🎃", "🕸", { item: "💀" }]

• D: ["👻", "🎃", "🕸", "[object Object]"]

  点此查看答案及解析

  
  答案 : B
  解析 : 解构对象，可以从右边对象中拆出值，并将拆出的值分配给左边对象同名的属性。此时将值 "💀" 分配给 spookyItems[3]。
      相当于正在篡改数组 spookyItems，给它添加了值 "💀"。当输出 spookyItems 时，结果为 ["👻", "🎃", "🕸", "💀"]。