10個(gè)經(jīng)常被問及又不太好回答的JS面試題
1、淺拷貝
const user = {name: "Shoaib",info: {father: "Ali",age: 26,email: "[email protected]"},};const copy = { ...user };copy.info.father = "MD";console.log("original: ", user.info);console.log("copy:", copy.info);
輸出
original: {father: ‘MD’,age: 26,email: ‘[email protected]’}copy: {father: ‘MD’,age: 26,email: ‘[email protected]’}
為什么？
Object.assign和傳播操作符都進(jìn)行淺表復(fù)制。 這意味著我們復(fù)制了第一級(jí)對象。
我們之前使用的代碼可以這樣寫Object.assign：
const user = {name: "Shoaib",info: {father: "Ali",age: 26,email: "[email protected]"},};const copy = Object.assign({}, user);copy.info.father = "MD";console.log("original: ", user.info);console.log("copy:", copy.info);
2、 JavaScript吊裝
預(yù)測以下代碼的輸出：
var name = "shoaib";var age = 26var info = function () {console.log(name);console.log(age);var name = 20;};info();
輸出
undefined26
為什么？
代碼段的輸出不是shoaib和20，結(jié)果為undefined和26，這是由于JavaScript中的吊裝而導(dǎo)致的。
我們再將上面的代碼轉(zhuǎn)換一下，如下：
var name = "shoaib";var age = 26var info = function () {var name;console.log(name);console.log(age);name = 20;};info();
3、值分配
function assign() {var numOne = numTwo = 10;}assign();console.log('numTwo', typeof numTwo === 'undefined');console.log('numOne', typeof numOne === 'undefined');
輸出
numTwo falsenumOne true
同樣，我們可以這樣寫：
function assign() {var numOne= (numTwo = 10);}
為什么？
賦值運(yùn)算符具有從右到左的關(guān)聯(lián)性，這意味著它將從右到左進(jìn)行求值。這就是為什么numTwo要為其分配值10，然后將其分配給numOne的原因。
4、 JavaScript this
var obj = {name: "shoaib",func: function() {var self = this;console.log("outer function: this.name = " + this.name);console.log("outer function: self.name = " + self.name);(function() {console.log("inner function: this.name = " + this.name);console.log("inner function: self.name = " + self.name);}());}};obj.func();
輸出
outer function: this.name = shoaibouter function: self.name = shoaibinner function: this.name = undefinedinner function: self.name = shoaib
為什么？
外部函數(shù)this和self引用obj，因此都可以正確訪問該名稱。但是內(nèi)部部分不同。
在這里，this不參考o(jì)bj。這就是為什么this.name是undefined。但是對局部變量的引用self仍在范圍內(nèi)，并且具有適當(dāng)?shù)脑L問權(quán)限。
5、JavaScript返回
function funcOne() {return {name: "shoaib",};}function funcTwo() {return;{name: "shoaib";}}console.log(funcOne());console.log(funcTwo());
輸出
{name: 'shoaib'}undefined
為什么？
此處，funcOne成功返回對象，但問題出在funcTwo。仔細(xì)看看：funcTwo后面有分號(hào)return。這意味著由于分號(hào)，這將不會(huì)返回任何內(nèi)容。
6、數(shù)字.epsilon
console.log(0.1 + 0.2);console.log(0.1 + 0.2 == 0.3);
輸出
0.30000000000000004false
為什么？
這是復(fù)雜的。結(jié)果可能是0.3且為true，但有可能不是。在JavaScript中，數(shù)字均以浮點(diǎn)精度處理，因此可能不會(huì)總是產(chǎn)生預(yù)期的結(jié)果。
解決辦法是什么？
JavaScript為此引入了Math.abs。這將幫助你比較兩個(gè)數(shù)字之間的絕對差。
function almostEqual(numOne, numTwo) {return Math.abs( numOne - numTwo ) < Number.EPSILON;}console.log(almostEqual(0.1 + 0.2, 0.3));
7、超時(shí)和間隔時(shí)間
(function() {console.log(1);setTimeout(function(){console.log(2)}, 1000);setTimeout(function(){console.log(3)}, 0);console.log(4);})();
輸出
1432
為什么？
第一和第四行控制臺(tái)輸出，沒有任何延遲。
然后在第三行，出現(xiàn)時(shí)間限制并執(zhí)行日志。
最后，十秒鐘的延遲結(jié)束，并顯示數(shù)字2。
8、反向數(shù)組
var arrayOne = "shoaib".split('');var arrayTwo = arrayOne.reverse();var arrayThree = "mehedi".split('');arrayTwo.push(arrayThree);console.log("arrayOne length=" + arrayOne.length + " value=" + arrayOne.slice(-1));console.log("arrayTwo length=" + arrayTwo.length + " value=" + arrayTwo.slice(-1));
輸出
arrayOne length = 7 value = m，e，h，e，d，iarrayTwo length = 7 value = m，e，h，e，d，i
為什么？
在JavaScript中使用reverse時(shí)，該方法不僅會(huì)返回reversed數(shù)組。它還會(huì)顛倒數(shù)組本身的順序。
reverse方法返回對數(shù)組本身的引用。
為了更好地理解，下面是一個(gè)示例：
const array1 = ['one', 'two', 'three'];console.log('array1:', array1);// expected output: "array1:" Array ["one", "two", "three"]const reversed = array1.reverse();console.log('reversed:', reversed);// expected output: "reversed:" Array ["three", "two", "one"]// Careful: reverse is destructive -- it changes the original array.console.log('array1:', array1);// expected output: "array1:" Array ["three", "two", "one"]
9、嚴(yán)格平等
console.log(false == '0')console.log(false === '0')
輸出
truefalse
為什么？
在JavaScript中，==在兩件事之間進(jìn)行比較，這并不嚴(yán)格。如果要嚴(yán)格比較，則可以使用===而不是==進(jìn)行比較，這將比較兩件事及其數(shù)據(jù)類型。同樣，！=和！==運(yùn)算符也可以這樣工作。
10、JavaScript對象
var person = {name: 'shoaib',identity: function (){return this.name;}};var personCopy = person.identity;console.log(personCopy());console.log(person.identity());
輸出
undefinedshoaib
為什么？
第一個(gè)控制臺(tái)是未定義的，因?yàn)樵摲椒ㄊ菑膒erson對象中提取的，因此在不存在name屬性的全局上下文中調(diào)用了identity函數(shù)。
結(jié)論
在本文中，我試圖涵蓋一些程序員應(yīng)理解的棘手問題，以便在面試中做得更好。將來我會(huì)嘗試包括更多內(nèi)容。如果我錯(cuò)過了任何有趣的內(nèi)容，請?jiān)谙旅孢M(jìn)行評(píng)論。
感謝你的閱讀。
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號(hào)
