前端面試題JavaScript篇——2022-09-23

公粽號【今天也要寫bug】每日推送，歡迎關註

每日3題

1 以下代碼執行後，控制臺中的輸出內容為？

const user = {
  name: "JM",
  age: 18,
};
const data = JSON.stringify(user, ["age"]);
console.log(data);

2 點擊p標簽時，會輸出什麼

function Car() {
  this.make = "蘭博基尼";
  return { make: "雞你太美" };
}
const myCar = new Car();
console.log(myCar.make);

3 以下代碼執行後，控制臺中的輸出內容為？

const p1 = new Promise((res, rej) => {
  setTimeout(res, 500, "1");
});
const p2 = new Promise((res, rej) => {
  setTimeout(res, 100, "2");
});
Promise.race([p1, p2]).then((res) => console.log(res));

答案及解析

1

// 答案：{"age":18}
// 考察 JSON.stringify()

// JSON.stringify() 方法將一個 JavaScript 對象或值轉換為 JSON 字元串，
// 如果指定了一個 replacer 函數，則可以選擇性地替換值，
// 或者指定的 replacer 是數組，則可選擇性地僅包含數組指定的屬性。
const user = {
  name: "JM",
  age: 18,
};
const data = JSON.stringify(user, ["age"]); // replacer 是數組
console.log(data); // 根據 replacer 數組，只包含 age 屬性， 輸出 {"age":18}

2

// 答案：雞你太美
// 考察 new 創建對象的過程
function Car() {
  this.make = "蘭博基尼";
  // 如果構造函數顯式返回了一個對象，則該對象會覆蓋創建的對象
  return { make: "雞你太美" };
}
const myCar = new Car(); // myCar={ make: "雞你太美" }
console.log(myCar.make); // 所以輸出：雞你太美

3

// 答案：2
// 考察Promise、setTimeout、Promise.race
const p1 = new Promise((res, rej) => {
  setTimeout(res, 500, "1");
  /**
   * setTimeout 也可以寫成
   * setTimeout(() => {res('1')}, 500)
   */
});
const p2 = new Promise((res, rej) => {
  setTimeout(res, 100, "2");
});
Promise.race([p1, p2]).then((res) => console.log(res));
// Promise.race：提供的多個 promise 進行”競爭“，誰最先解決或拒絕，Promise.race 就採用它的值
// p2 100ms 後就解決，先於 p1，因此返回 2