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面試題實例代碼分析”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript面試題實例代碼分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。