每日20道面試題帶解析03

​

以下題目，本人驗證無誤，查閱了相關資料，得出解析部分并做了相關總結，希望對正準備跳槽或找工作的你有幫助！

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 時，結果為 ["👻", "🎃", "🕸", "💀"]。