“有意思”的JavaScript的面試題

一道“有意思”的JavaScript的面試題

• 操作符優先級你“真的”懂了麼？
• parseInt你真的“會用”嗎？

今天逛文章的時候，發現一道面試題，粗看起來感覺挺簡單的，其實不然。閑話不多說，且看這道題。

操作符優先級你“真的”懂了麼？

var str = 'msg';
	var showStr = 'value is' + (str === 'msg') ? 'Something' : 'Nothing';
	console.log(showStr);
           

當時乍一看，這題輸入的結果肯定是"Something"，洋洋自得中……

當時心裡分析過程是這樣的：

1、首先進行 (str === 'msg')的判斷，str指向的值肯定是msg，是以傳回的是true；
	2、根據三目運算的流程，showStr取的值就會是'Something'；
	3、最終輸入的結果是'Something'；
           

分析出來的結果和實際輸出結果一緻！

然，我總是對于自己的技術永遠抱有“懷疑”的态度，如果結果這麼簡單，那出這道題的人考查的意義僅僅是為了考查三目運算？肯定不會這麼簡單吧？

是以我就把str換成了msg1，我在想，如果最終的結果是Nothing的話，那我之前的分析是沒有錯的，但是實際運作起來，結果給我的是Something，這不符合道理啊。

接下來，排除，問題出在哪裡。

1、三目運算的流程肯定是不會有錯的。a == true ? b : c。a為真，則是b，否則是c；

2、那麼問題應該出現這個三目的判斷條件上，我把問題拆了下，直接寫成

var a = str ==='msg' ? 'Something' : 'Nothing';
	console.log(a);
           

結果果然是Nothing。

3、三目一塊，沒有問題，那麼隻能是在多餘的還沒分析地方出了問題，再次看了一下；

4、‘value is’ + 三目 ?這塊有什麼問題？字元串拼接？

5、為了驗證我的想法，再次改寫了一下；

var str = 'msg1';
	var showStr = 'value is' + ((str === 'msg') ? 'Something' : 'Nothing');
	console.log(showStr);
           

結果是我想要的Nothing

通過以上的分析不能得出JavaScript引擎在編譯執行時解析成了 showStr = ‘value is false’ ? ‘Something’ : ‘Nothing’ 了，是以最張的結果會是Something。

通過這個案例，我們得出的結論是

字元串拼接的優先級高于三目運算符

parseInt你真的“會用”嗎？

繼續上一道題

var arr = ["1", "2", "3"];
	var result = arr.map(parseInt);
           

相信對于這段代碼的目的，稍微用過Javascript ES5的人都知道它是想把數組arr中的每一項的值轉成整數。相信有很多人跟我一樣，看到這道題會立即給出答案

result = [1, 2, 3]

；但是結果真的如我們所料嗎？

閑話不多說，直接上答案

result = [1, NaN, NaN]

。

我當時的了解過程是這樣的

1、

result .push(parseInt("1")); => result = [1]

2、

result .push(parseInt("2")); => result = [1, 2]

3、

result .push(parseInt("3")); => result = [1, 2, 3]

我相信有很多技術不太深的人跟我一樣的了解過程，但是實際上是這樣的麼？

真實的過程是這樣的：

1、

result .push(parseInt("1", 0)); => result = [1]

;

2、

result .push(parseInt("2", 1)); => result = [1, NaN]

;

2、

result .push(parseInt("3", 2)); => result = [1, NaN, NaN]

;

為什麼會這樣，其實這裡考查了parseInt的基礎用法和map的基礎用法

MDN

上明确說明了：

1. parseInt(string, radix) 将一個字元串 string 轉換為 radix 進制的整數， radix 為介于2-36之間的數。raidx，就是你想要換算成的進制，預設為10

2. Array.prototype.map(item, index, array)，第一個參數是數組的每一項，即目前項，第二個參數是數組的目前項的下标，第三個參數

是以js在解析的時候，它的過程是

1. parseInt("1", 0); => 1

   ;

2. parseInt("2", 1); => NaN

   ;

3. parseInt("3", 2); => NaN

   ;

   上述中的parseInt中的0 1 2分别為目前項的下标，在parseInt2的時候，進制出現了1, 計算機是沒有1進制的，是以就出現Nan的情況，同理parseInt3的時候，2進制是不可能出現3的存在，結果傳回NaN。

其實技術的突破，個人感覺不是學會了好多種語言，各種新的流行架構運用的爐火純青，而是在看似很基礎的上面能知其然，技術底子紮實牢固。