你到底懂不懂JavaScript?下面本篇文章給大家整理分享12道JavaScript面試題,來做做這12道面試題試試,看看能不能全部答對!
前端(vue)入門到精通課程:進入學習
JavaScript 是每一個前端開發(fā)者都應該掌握的基礎技術,但是很多時候,你可能并不完全懂 JavaScript。
檢測一個人的技術水平有兩個非常簡單的辦法,看他寫的代碼,或者讓他看別人寫的代碼。
我總結(jié)了一些可以考察對 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 是因為我們不使用任何聲明創(chuàng)建變量,它會被視作全局變量,掛載到 window 對象上面,等價于 delete window.age,所以刪除成功。
第三個 undefined 是因為 age 被刪除了。
第三題
嘗試推測它的輸出:
let person = { name: '代碼與野獸' } const members = [person] person = null console.log(members)
輸出:
[{ name: "代碼與野獸" }]
解析:
很多人會認為輸出結(jié)果應該是 [ null ],但是,我們只是設置了 person 這個變量的新引用,之前的引用還在 members 中。
簡單來說,{ name: '代碼與野獸' } 這個對象存在某個內(nèi)存空間中,假設它的地址是 X201。它的邏輯大概像下面這樣:
let person = X201 const members = [X201] persion = null
第四題
嘗試推測它的輸出:
function SuperHero() { this.make = '代碼與野獸' return { make: '野獸與代碼'} } const mySuperhero = new SuperHero() console.log(mySuperhero)
輸出:
{ make: "野獸與代碼" }
解析:
如果構(gòu)造函數(shù)最終返回了一個對象,那么之前設置的屬性都將失效。
第五題
嘗試推測它的輸出:
const name = '代碼與野獸' console.log(name.padStart(14)) console.log(name.padStart(2))
輸出:
" 代碼與野獸" "代碼與野獸"
解析:
padStart 方法可以在字符串的開頭填充空格。
參數(shù)是新字符串的總長度,如果這個長度比原來的字符串長度短,那么不會填充。
第六題
嘗試推測它的輸出:
console.log(parseInt("7")) console.log(parseInt("7*6")) console.log(parseInt("7Din"))
輸出:
7 7 7
解析:
如果 parseInt 的參數(shù)是字符串和數(shù)字的組合,那么它會從頭開始檢查,直到碰到數(shù)據(jù)類型錯誤的位置,如果在數(shù)據(jù)類型錯誤的位置之前是一個有效的數(shù)字,它就會返回數(shù)字。
第七題
嘗試推測它的輸出:
[1, 2, 3, 4].reduce((x, y) => console.log(x, y))
輸出:
1 2 undefined 3 undefined 4
解析:
如果我們不給 reduce 傳遞初始值,那么 x 會是數(shù)組的第一個值,y 是數(shù)組的第二個值。
第八題
嘗試推測它的輸出:
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
解析:
我們使用模板字符串語法去調(diào)用函數(shù)時,第一個參數(shù)始終都是分割好的字符串數(shù)組。其余的參數(shù)是模板表達式的值。
第九題
嘗試推測它的輸出:
(() => { 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,訪問的是參數(shù),而不是外面的變量 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。
【