分享12題面試題，看你懂不懂JavaScript！

你到底懂不懂JavaScript？以下這篇文章為大家整理分享12題JavaScript面試題，來做這12題面試題試試，看看能不能全部答對！

JavaScript 是每個前端開發者都應該掌握的基礎技術，但很多時候，你可能不完全懂 JavaScript。

偵測一個人的技術水平有兩個非常簡單的辦法，看他寫的程式碼，或是讓他看別人寫的程式碼。

我總結了一些可以檢視 JavaScript 理解能力的程式碼題，你可以試著做一下，看看能不能全部答對。全答對了，才算是懂一些 JavaScript。

第一題

#嘗試推測它的輸出：

const person = { name: '代码与野兽' }
Object.defineProperty(person, 'age', { value: 18 })

console.log(person.age)
console.log(Object.keys(person))

輸出：

18
['name']

解析：
很多人容易搞錯第二個輸出，因為使用defineProperty 定義的屬性預設是不可列舉的。

第二題

#嘗試推測它的輸出：

const name = '代码与野兽'
age = 18

console.log(delete name)
console.log(delete age)
console.log(typeof age)

輸出：

false
true
"undefined"

解析：
第一個false 是因為delete 只能刪除物件上的屬性，name 不是屬性，所以刪除失敗。
第二個 true 是因為我們不使用任何宣告建立變量，它會被視為全域變量，掛載到 window 物件上面，等價於 delete window.age，所以刪除成功。
第三個 undefined 是因為 age 被刪除了。

第三題

#嘗試推測它的輸出：

let person = { name: '代码与野兽' }
const members = [person]
person = null
console.log(members)

輸出：

[{
  name: "代码与野兽"
}]

解析：
很多人會認為輸出結果應該是[ null ]，但是，我們只是設定了person 這個變數的新引用，之前的引用還在members 中。
簡單來說，{ name: '程式碼與野獸' } 這個物件存在某個記憶體空間中，假設它的位址是 X201。它的邏輯大概像下面這樣：

let person = X201
const members = [X201]
persion = null

#第四題

嘗試推測它的輸出：

function SuperHero() {
  this.make = '代码与野兽'
  return { make: '野兽与代码'}
}

const mySuperhero = new SuperHero()
console.log(mySuperhero)

輸出：

{
  make: "野兽与代码"
}

解析：
如果建構子最終回傳了一個對象，那麼先前設定的屬性都會失效。

第五題

#嘗試推測它的輸出：

const name = '代码与野兽'
console.log(name.padStart(14))
console.log(name.padStart(2))

輸出：

"         代码与野兽"
"代码与野兽"

解析：
padStart 方法可以在字串的開頭填入空格。
參數是新字串的總長度，如果這個長度比原來的字串長度短，那麼就不會填入。

第六題

#嘗試推測它的輸出：

console.log(parseInt("7"))
console.log(parseInt("7*6"))
console.log(parseInt("7Din"))

輸出：

7
7
7

解析：
如果parseInt 的參數是字串和數字的組合，那麼它會從頭開始檢查，直到碰到資料類型錯誤的位置，如果在資料類型錯誤的位置之前是一個有效的數字，它就會回傳數字。

第七題

#嘗試推測它的輸出：

[1, 2, 3, 4].reduce((x, y) => console.log(x, y))

輸出：

1
2
undefined
3
undefined
4

解析：
如果我們不給reduce 傳遞初始值，那麼x 會是數組的第一個值，y 是數組的第二個值。

第八題

#嘗試推測它的輸出：

function getUserInfo(one, two, three) {
  console.log(one)
  console.log(two)
  console.log(three)
}

const superHero = '代码与野兽'
const age = 1000

getUserInfo`${superHero} 是 ${age} 岁`
getUserInfo`hello`

輸出：

["", " 是 ", " 岁"]
"代码与野兽"
1000
["hello"]
undefined
undefined

解析：
我們使用模板字串語法去呼叫函數時，第一個參數總是分割好的字串陣列。其餘的參數是模板表達式的值。

第九題

#嘗試推測它的輸出：

(() => {
  let x, y;
  try {
    throw new Error()
  } catch (x) {
    (x = 1), (y = 2);
    console.log(x)
  }
  console.log(x)
  console.log(y)
})()

輸出：

1
undefined
2

解析：
在catch 中存取x，存取的是參數，而不是外面的變數x。

第十題

#嘗試推測它的輸出：

class Clazz {}

console.log(typeof Clazz)

輸出：

"function"

解析：
在 JavaScript 中，Class 也是 function。

第十一题

尝试推测它的输出：

const arr = [7, 1, 4, 3, 2];
for (const elem of arr) {
  setTimeout(() => console.log(elem), elem);
}

输出：

1
2
3
4
7

解析：
没什么好解释的......

第十二题

尝试推测它的输出：

const foo = { bar: 1 };
with(foo) {
  var bar = 2
};
console.log(foo.bar);

输出：

2

解析：

with 的对象会作为 global 对象。在 with 使用 var 等价于 window.[xxx]。而这时 foo 就是那个 window。

【相关推荐：javascript学习教程】

以上是分享12題面試題，看你懂不懂JavaScript！的詳細內容。更多資訊請關注PHP中文網其他相關文章！