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

前端（vue）入門到精通課程：進入學習

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。

【相關推薦：】

以上就是分享12道面試題，看你懂不懂JavaScript！的詳細內容，更多請關注TW511.COM其它相關文章！