十道有趣的前端面試題及解析
每道題都會(huì)涉及到一個(gè)有趣的知識(shí)點(diǎn)，你可以嘗試思考一下再看解析答案！
01、prototype？
請(qǐng)問輸出是什么？
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)分析與解答
看看下面的圖片，我想你就會(huì)知道答案。
- true
- true
02、nums 的值是多少？
請(qǐng)問輸出是什么？
const len = 5
const nums = []
for (var i = 0; i < len; i++);{
nums.push(i + 1)
}
console.log(nums)分析與解答
首先，我認(rèn)為這個(gè)問題并不是考察應(yīng)聘者的編程能力。他正在檢查候選人是否有眼睛方面的問題。如果你沒有注意到分號(hào)，你一定認(rèn)為 nums 是 [0, 1, 2, 3, 4]。
const len = 5
const nums = []
for (var i = 0; i < len; i++);
// At this time, i has become 6
{
nums.push(i + 1)
}
console.log(nums) // [ 6 ]03、要小心排序陷阱嗎？
請(qǐng)問輸出是什么？
const arr = [1, 30, 4, 21, 100000]
console.log(arr.sort())分析與解答
直覺上我們認(rèn)為答案應(yīng)該是[1, 4, 21, 30, 100000]，但是我們沒有傳遞比較函數(shù)，所以結(jié)果并不是我們想象的那樣。
來自 MDN：
提示：指定定義排序順序的函數(shù)。如果省略，數(shù)組元素將轉(zhuǎn)換為字符串，然后根據(jù)每個(gè)字符的 Unicode 代碼點(diǎn)值進(jìn)行排序。
const arr = [1, 30, 4, 21, 100000]
// the array elements are converted to strings, then sorted according to each character's Unicode code point value
const 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)出知識(shí)
我相信這對(duì)你來說太容易了。直接寫答案吧！
// a.js
export default () => "Hello medium"
export const name = "fatfish"
// b.js
import * as data from "./a.js"
console.log(data) // { default: function default (), name: "fatfish" }05、使用對(duì)象作為屬性鍵
請(qǐng)問輸出是什么？
const x = {}
const y = { key: 'y' }
const z = { key: 'z' }
x[y] = 'fatfish'
x[z] = 'medium'
console.log(x[y])分析
眾所周知，使用對(duì)象作為屬性鍵最終會(huì)是這樣的，實(shí)際的鍵是 [object Object]
const objKey = { key: 'fatfish' }
const obj = {
[ objKey ]: 'fatfish'
}
console.log(obj) // { [object Object]: "fatfish" }
回答
那么答案是什么呢？也許你認(rèn)為它是 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]) // medium06、for循環(huán)中SetTimeout？
請(qǐng)問輸出是什么？
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i)
}, 1000)
}分析與解答
1秒后是否打印0,1,2？不會(huì)，1秒后1變成了3，所以3會(huì)連續(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 var
for (let i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i) // 0 1 2
}, 1000)
}
// 2. Using closures
for (var i = 0; i < 3; i++) {
((n) => {
setTimeout(() => {
console.log(n) // 0 1 2
}, 1000)
})(i)
}07、你知道一些基本的轉(zhuǎn)換規(guī)則嗎？
請(qǐng)問輸出是什么？
console.log(+true)
console.log(!'fatfish')分析與解答
// The + operator
converts the Boolean to a number, true is converted to 1, and false is converted to 0
console.log(+true) // 1
// The string "fatfish" is a true value, use ! It will become false
console.log(!'fatfish')08、定義變量的陷阱！
請(qǐng)問輸出是什么？
const fn = () => {
let x = y = 1000
x++
return x
}
fn()
console.log(typeof x)
console.log(typeof y)分析與解答
也許99%的工程師認(rèn)為答案應(yīng)該是*undefined，因?yàn)樗麄儾恢廊绾味x全局變量。
const fn = () => {
// let x = y = 1000
// it is equivalent to the following code
let x = 1000
// Note that here, we define a global variable y
y === 1000
x++
return x
}
fn()
console.log(typeof x) // undefined
console.log(typeof y) // y equals 1000, so typeof y is number09、JavaScript 中的變量hoisting是什么？
請(qǐng)問輸出是什么？
var x = 'fatfish'
const fn = () => {
// No.3
console.log(x)
var x = 'medium'
// No.4
console.log(x)
}
// No.1
console.log(x)
fn()
// No.2
console.log(x)分析與解答
第一題和第二題的答案很簡(jiǎn)單，大家都知道答案。但#3和#4就沒那么容易了。
特別是因?yàn)?3 涉及變量hoisting的問題。
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 undefined
console.log(x)
// var x = 'medium'
x = 'medium'
// No.4
// The value of x is medium
console.log(x)
}
// No.1
console.log(x) // fatfish
fn()
// No.2
console.log(x) // fatfish10、數(shù)組的長度？
請(qǐng)問輸出是什么？
const nums = [ 10, 18, 0, 11, 9 ]
nums.length = 0
console.log(nums[3])分析與解答
答案是11嗎？如果是11，說明你對(duì)數(shù)組的長度屬性了解不夠。
當(dāng)你使用“nums.length = 0”時(shí)，意味著“nums”變空。
const nums = [ 10, 18, 0, 11, 9 ]
nums.length = 0 // it causes nums to become []
console.log(nums[3]) // undefined最后
以上就是我今天與您分享的10道關(guān)于前端的面試題，希望其中有您所需要的內(nèi)容，也希望您能從中學(xué)習(xí)到新的知識(shí)。
最后，感謝您的閱讀，并期待您的關(guān)注，您將會(huì)閱讀到更多優(yōu)質(zhì)文章。
