-> 依次列印 p 和 div

這道題考查事件流，在事件傳播中，有三個階段，捕獲->目標->冒泡，按照標簽來看，就是 div->p->div，但是預設只在冒泡階段處理事件

如果需要在捕獲階段處理事件，可用 addEventLister 並且傳入第三個參數為 true（預設是 false，即預設冒泡階段處理）

<div id="div">
  <p id="p">
    Click here!
  </p>
</div>

<script>
  document.getElementById('div').addEventListener('click', () => console.log('div'), true)
  document.getElementById('p').addEventListener('click', () => console.log('p'), true)
</script>

-> Lydia is 21 [Function: bound sayHi]

這道題主要考查 call 和 bind，當然我們面試的時候一般會把 apply 拿出來一起考察下

call、apply 以及 bind 都是為了改變 this 指向而生，而 call 和 apply 用法比較像，都會在函數調用時改變 this 指向，唯一的區別是 apply 的第二個參數是數組，而 call 從第二個參數開始都是實際傳入該函數中的值。bind 與他們不一樣，它返回的還是函數

-> Maserati

這題考查 new。如果對構造函數以及 new 比較瞭解的就會知道，構造函數里，如果返回一個非 null 的對象（包括數組），則將該對象值賦值給新建的對象

瞭解更多可以參考 一道有意思的筆試題引發的對於 new 操作符的思考

-> {"level":19,"health":90}

這道題主要考查 JSON.stringify 的第二個參數，當然它還能傳入第三個參數

語法：JSON.stringify(value[, replacer [, space]])。詳見 JSON.stringify

replacer

replacer 參數可以是一個函數或者一個數組。作為函數，它有兩個參數，鍵（key）和值（value），它們都會被序列化

在開始時，replacer 函數會被傳入一個空字元串作為 key 值，代表著要被 stringify 的這個對象。隨後每個對象或數組上的屬性會被依次傳入

const settings = {
  username: 'lydiahallie',
  level: 19,
  health: 90,
};

const data = JSON.stringify(settings, (k, v) => {
  console.log(k, v);
  return v 
});

console.log(data);

/*
// 這裡其實最開始列印了個空字元串。在開始時，replacer 函數會被傳入一個空字元串作為 key 值，代表著要被 stringify 的這個對象
 { username: 'lydiahallie', level: 19, health: 90 }
username lydiahallie
level 19
health 90 

{"username":"lydiahallie","level":19,"health":90}
*/

const settings = {
  username: 'lydiahallie',
  level: 19,
  health: 90,
};

const data = JSON.stringify(settings, (k, v) => {
  if (k === 'level') return v * 2
  return v
});

console.log(data);

// {"username":"lydiahallie","level":38,"health":90}

當傳入數組的時候，相對比較簡單，就是需要 picked 的 key（但是沒法深度 pick，只能 pick 第一層）

space

用來格式化，可以傳入數字或者字元串

const settings = {
  username: 'lydiahallie',
  level: 19,
  health: 90,
};

const data = JSON.stringify(settings, null, 2); // 這時候和傳入 '  '（length 2）效果一樣

console.log(data);

/*
{
  "username": "lydiahallie",
  "level": 19,
  "health": 90
}
*/

-> undefined undefined undefined

這道題比較簡單，myFunc 函數需要的是一個對象參數，並且有 key x y 和 z，但是傳入的並不是對象，所以都取了他們的預設值 undefined

如果傳入對象，但是並沒有對應的 key，也同樣是 undefined

const myFunc = ({ x, y, z }) => {
  console.log(x, y, z);
};

myFunc({ x: 1 }); // 1 undefined undefined

-> SyntaxError

這道題就比較腦經急轉彎了，剩餘參數只能放在最後，其實我覺得像上面代碼那樣其實也有使用場景，不知道未來會不會支持這樣的寫法

-> { name: 'Lydia', age: 22 }

這道題的考點是展開運算符在對象中的使用。一般我們會用展開運算符來複制一個對象

當調用 changeAge(person) 時，參數傳入了 person，所以 (x.age += 1) 實際操作的和 person 是一個對象引用。而調用 changeAgeAndName() 時，因為沒有傳入參數，所以 x 其實是 { ...person }，而這個其實是 person 的一個淺拷貝

可以考查下將 (x = { ...person }) 改成 (x = person)

-> {} "" true

這道題的考點是 || 和假值。 || 運算符會返回第一個真值，如果都為假值，則返回最後一個值

這裡可以順便考查 &&。&& 操作符，一旦遇到了假值，便會停止往後

console.log(true && 0); // 0
console.log(true && 0 && true); // 0
console.log(1 && 2); // 2
console.log(1 && false); // false
console.log('' && false); // ''

-> 0 '' undefined

JS 中的假值有以下幾種：

• false
• ''
• NaN
• undefined
• null
• 0 / -0
• 0n（BigInt(0)）

除此之外，new Number、new Boolean 創建的其實都是對象，都是真值

-> { a: 'three', b: 'two' }

這其實更像是一個規範，當對象中 key 重覆的時候，value 會被後面的替換，但是 key 的位置會是第一次出現的位置

一般是對象合併的時候會用到：

const oldObj = {
  name: 'fish',
  age: 30
}

const coverdObj = { name: 'lessfish' }

const newObj = {
  ...oldObj,
  ...coverdObj
}

console.log(newObj); // { name: 'lessfish', age: 30 }

-> false true

這題考查 delete 操作

首先 delete 返回一個布爾值，代表是否刪除成功。然後 var const let 定義的變數，都不能被刪除，只有全局變數才能被刪除

這裡要註意下 name，因為瀏覽器中預設掛了個全局變數 name，所以 delete name 是 ok 的