分享10個輕松有趣的前端面試題
英文 | https://blog.stackademic.com/10-popular-front-end-interview-questions-e89c96c2c787
今天這篇文章，我整理了10道有趣的面試題，每道題都會涉及到一個有趣的知識點，你可以嘗試思考一下再看答案！
那么，我們現(xiàn)在開始吧。
const Animal = function (){this.type = 'animal'}const Cat = function (){this.name = 'cat'}Cat.prototype = new Animal()const cat = new Cat();console.log(cat.__proto__ === Cat.prototype)console.log(Cat.prototype.__proto__ === Animal.prototype)
分析與解答
看看下面的圖片，我想你就會知道答案。
true
true
02、nums 的值是多少？
請問輸出是什么？
const len = 5const nums = []for (var i = 0; i < len; i++);{nums.push(i + 1)}console.log(nums)
分析與解答
首先，我認為這個問題并不是考察應(yīng)聘者的編程能力。他正在檢查候選人是否有眼力。如果你沒有注意到分號，你一定認為 nums 是 [0, 1, 2, 3, 4]。
const len = 5const nums = []for (var i = 0; i < len; i++);// At this time, i has become 6{nums.push(i + 1)}console.log(nums) // [ 6 ]
03、要小心排序陷阱嗎？
請問輸出是什么？
const arr = [1, 30, 4, 21, 100000]console.log(arr.sort())
分析與解答
直覺上我們認為答案應(yīng)該是[1, 4, 21, 30, 100000]，但是我們沒有傳遞比較函數(shù)，所以結(jié)果并不是我們想象的那樣。
來自 MDN提示：指定定義排序順序的函數(shù)。如果省略，數(shù)組元素將轉(zhuǎn)換為字符串，然后根據(jù)每個字符的 Unicode 代碼點值進行排序。
const arr = [1, 30, 4, 21, 100000]// the array elements are converted to strings, then sorted according to each character's Unicode code point valueconst charCodesOfArr = arr.map((num) => `${num}`.charCodeAt()) // [49, 51, 52, 50, 49]// so the answer is [1, 100000, 21, 30, 4]console.log(arr.sort())
04、ES6模塊導(dǎo)入導(dǎo)出知識
我相信這對你來說太容易了。直接寫答案吧！
// a.jsexport default () => "Hello medium"export const name = "fatfish"// b.jsimport * as data from "./a.js"console.log(data) // { default: function default (), name: "fatfish" }
05、使用對象作為屬性鍵
請問輸出是什么？
const x = {}const y = { key: 'y' }const z = { key: 'z' }x[y] = 'fatfish'x[z] = 'medium'console.log(x[y])
分析
眾所周知，使用對象作為屬性鍵最終會是這樣的。實際的鍵是 [object Object]
const objKey = { key: 'fatfish' }const obj = {[ objKey ]: 'fatfish'}console.log(obj) // { [object Object]: "fatfish" }
回答
那么答案是什么呢？也許你認為它是fatfish，但medium才是最終的答案。
const x = {}const y = { key: 'y' }const z = { key: 'z' }x[y] = 'fatfish' // x => { [object Object]: "fatfish" }x[z] = 'medium' // x => { [object Object]: "medium" }console.log(x[y]) // medium
06、for循環(huán)中SetTimeout？
請問輸出是什么？
for (var i = 0; i < 3; i++) {setTimeout(() => {console.log(i)}, 1000)}
分析與解答
1秒后是否打印0,1,2？不會，1秒后1變成了3，所以3會連續(xù)打印3次
for (var i = 0; i < 3; i++) {setTimeout(() => {console.log(i) // 3 3 3}, 1000)}
如果我們想在1秒后打印出0,1,2怎么辦？
// 1. Use let instead of varfor (let i = 0; i < 3; i++) {setTimeout(() => {console.log(i) // 0 1 2}, 1000)}// 2. Using closuresfor (var i = 0; i < 3; i++) {((n) => {setTimeout(() => {console.log(n) // 0 1 2}, 1000)})(i)}
07、你知道一些基本的轉(zhuǎn)換規(guī)則嗎？
請問輸出是什么？
console.log(+true)console.log(!'fatfish')
分析與解答
// The + operator converts the Boolean to a number, true is converted to 1, and false is converted to 0console.log(+true) // 1// The string "fatfish" is a true value, use ! It will become falseconsole.log(!'fatfish')
08、定義變量的陷阱！
請問輸出是什么？
const fn = () => {let x = y = 1000x++return x}fn()console.log(typeof x)console.log(typeof y)
分析與解答
也許99%的工程師認為答案應(yīng)該是*undefined，未定義，因為他們不知道如何定義全局變量。
const fn = () => {// let x = y = 1000// it is equivalent to the following codelet x = 1000// Note that here, we define a global variable yy === 1000x++return x}fn()console.log(typeof x) // undefinedconsole.log(typeof y) // y equals 1000, so typeof y is number
09、JavaScript 中的變量提升是什么？
請問輸出是什么？
var x = 'fatfish'const fn = () => {// No.3console.log(x)var x = 'medium'// No.4console.log(x)}// No.1console.log(x)fn()// No.2console.log(x)
分析與解答
第一題和第二題的答案很簡單，大家都知道答案。但#3和#4就沒那么容易了。
特別是因為 3 涉及變量提升的問題。
var x = 'fatfish'const fn = () => {// No.3// Variable hoisting occurs when a variable is declared with var.var x = undefined// So at this time the value of x is undefinedconsole.log(x)// var x = 'medium'x = 'medium'// No.4// The value of x is mediumconsole.log(x)}// No.1console.log(x) // fatfishfn()// No.2console.log(x) // fatfish
10、數(shù)組的長度？
請問輸出是什么？
const nums = [ 10, 18, 0, 11, 9 ]nums.length = 0console.log(nums[3])
分析與解答
答案是11嗎？如果是11，說明你對數(shù)組的長度屬性了解不夠。
當你使用“nums.length = 0”時，意味著“nums”變空。
const nums = [ 10, 18, 0, 11, 9 ]nums.length = 0 // it causes nums to become []console.log(nums[3]) // undefined
最后，今天的文章內(nèi)容就到這里了。