常常讓我們陰溝裡翻船的基礎知識
之前總結的都是一些知識面的，會就是會，不會也答不出來，但在JavaScript筆試過程中經常會遇到一些自己覺得明明很簡單，但答案卻讓人莫名其妙的問題，更有一些題目都會讓人目瞪口呆的問題，在筆試過程中出錯的幾乎都是這類問題。你肯定見過這樣的題目 var f = function g(){ return 23; }; typeof g();//g is not defined 或者這樣的題目 var foo = 1; function bar() { foo = 10; return; function foo() {} } bar(); console.log(foo);//1 很多類似的題目，讓人頭痛的很，答案和自己認為肯定的不一樣(後續博客會有相關分析)，吃過很多次虧後也嘗試在網上找一些JavaScript Quiz來做，每次做的時候被虐的體無完膚，做完之後會覺得自己可以應付筆試了，但在下次筆試的時候又死在類似題目上，痛定思痛把常出錯的JavaScript知識點梳理了一下後，正確率果真提高了不少，發現其實都是一些JavaScript基礎的語法知識，如果我們在筆試的時候總在JavaScript坑窪溝洄裡摔倒而不是知識面上，那麼就有必要了解一下這些不起眼的基礎知識了，所以正經介紹面試經歷的博客我希望以基礎知識開始。文中主要內容都是看了《JavaScript權威指南》後了解的，真心推薦找工作的同學耐住性子讀讀這本好書。 讓我們從JavaScript類型開始 JavaScript數據類型很簡單，有原始類型（primitive type，也就是大家口口相傳的值類型）和對象類型（所謂的引用類型）兩類 原始類型 number、string、boolean、null、undefined 對象類型 object、function、Date、Array等 也許你認為很簡單，但如果沒系統學習過，簡單的數據類型在筆試、面試中也是很凶險的，先了解一下這幾個類型的特點 string 在很多編程語言中string類型都是引用類型，JavaScript中的string卻是基本類型，在JavaScript中字符串是一組由16位值組成的不可變的有序序列，每個字符通常來自Unicode字符集（《JavaScript權威指南》）。在JavaScript中所有基礎類型都不可以修改，這句話對於number等類型好理解，1變不成2，但是string "abc"不是可以變成"abcd"嗎？其實所有我們認為修改字符串的方法只是返回了一個新的字符串。 number 和大多數編程語言不同，JavaScript的number類型不區分整數和浮點數，所有數字都適用浮點數表示。 bool 這個比較簡單，該類型就是true和false兩個值 null null對程序員來說並不陌生，表示未定義（聲明）過的變量 undefined null表示“空”了，undefined是什麼東東？我們知道像Java這樣的強類型語言中如果我們聲明一個變量而不初始化，系統會根據變量類型為其賦值該類型的默認值，但在JavaScript中我們聲明變量靠的是var關鍵字（甚至可以不寫），變量的類型是由其value決定的，為其賦值為數組，那麼變量就是數組類型，為其賦值數字，變量就是number，但是如果我們不初始化呢？總不能說變量是null吧，畢竟這個變量已經得到聲明，這時候我們就把該變量認為是undefined類型變量，並為其賦值undefined類型唯一值——undefined（不是"undefined"） 包裝對象 我們經常見到一些這樣的代碼 var s='test'; console.log(s.indexOf(e)); //1 console.log(s.length); //4 乍一看沒什麼奇怪的，但是不是說好的string是基本類型嗎？基本類型的變量哪裡來的方法和屬性！暫且放過這個知識點，反正能這麼用就是了，看個題 var s='test'; s.len=4; console.log(s.len);//undefined 坑爹！怎麼不是4又變成undefined了？只要引用了字符串屬性，JavaScript就會通過調用 new String(s) 來創建一個臨時對象，我們使用的indexOf方法和length屬性正是來源於這個臨時對象，每次使用都創建一次，然後銷毀。這個臨時對象就是包裝對象，不只是string，number和boolean類型同樣有包裝對象。知道了這些知識看看上面的題目為什麼結果是undefined 上面代碼可以這樣解析 var s='test';//創建字符串類型變量 s.len=4;//創建包裝對象，為包裝對象添加屬性len //引用完畢，銷毀包裝對象 console.log(s.len);//創建包裝對象，查找其len屬性，沒有找到，返回undefined 這下明白了吧 類型轉換 在筆試題中經常會遇到一些難題解決最後卻死在陰溝裡的題目，類型轉換就經常充當陰溝，看個例子 var a=[0], b=a, b=[1]; console.log(a+b); 我們搞定了數組的問題，最後問題可以變為[0]+[1]，一不小心就會寫為1，但是這時候我們調用的是數組的toString方法，實際是'0'+'1'='01'，這時候就可以看出類型轉換知識的重要性了。 JavaScript的取值類型非常靈活，會根據需要自動轉換類型，比如 ``` 1+'234' ``` JavaScript會自動把1轉換為期望的字符串"1",這種轉換時非常明顯的，我們看一些平時可能會弄錯的默認轉換 值 轉換為字符串 轉換為數字 轉換為布爾值 undefined "undefined" NaN false null "null" 0 false true "true" 1 false "false" 0 "" 0 false "2.5" 2.5 true "string" NaN true 0 "0" false 1 "1" true NaN "NaN" false Infinity "Infinity" true [2] "2" 2 true 顯式的類型轉換（調用構造函數或者parseInt()函數等）我們很輕松可以發現，但JavaScript很多操作符都能引發隱式的類型轉換 Number("3");//3 String(false);//false Boolean([]);//true Object(3);//new Number(3) 1+"234";//"1234" 5+"";//String(5) +"5";//5，變成了數字 Number("5") "5"-0;//5,也是數字 toString和valueOf 在一些情況下我們會把對象轉換為基本類型，對於轉換為布爾值規則很簡單，所有的對象都會轉換為true，然而我們最常用的是把對象轉換為字符串或數字，這就比較麻煩了 對象轉為字符串 對象轉換為字符串過程大概是這樣 1. 如果對象具有toString方法則調用該方法，如果方法返回的是一個基本類型（有坑爹的toString方法不返回string類型的），JavaScript把這個值轉換為字符串返回 2. 如果對象沒有toString方法，或者該方法返回的不是一個基本類型，那麼就會調用valueOf方法，如果存在valueOf方法並且valueOf返回的是基本類型，那麼將值轉換為字符串輸出 3. 再如果就只能報錯了 對象轉為數字 對象轉換為數字過程大概是這樣 1. 如果對象有valueOf方法，並且方法返回基本類型，則把值轉換為數字返回 2. 如果對象具有toString方法，且方法返回基本類型，則轉換為數字返回 3. 否則就報錯 看個題目 var o = { x: 8, valueOf: function(){ return this.x + 2; }, toString: function(){ return this.x; } }; console.log(o+'1');//"101" console.log(o+1);//11 注意返回的一個是字符串，一個是數字，了解了上面基本知識，你是不是答對了 判斷數據類型 我們可以使用typeof運算符來判斷數據類型 typeof undefined; //"undefined" typeof null; "object" typeof true; "boolean" typeof 0; //"number" typeof NaN; //"number" typeof "string"; //"string" typeof function(){}; //"function" typeof []; //"object" typeof new Date(); //"object" 有幾個看起來比較蹊跷需要我們注意 typeof是操作符，不是方法，也就是說和加減號一樣用，不考慮優先級問題，沒必要給操作數加括號，當然加了也沒事兒，說實話可讀性還挺高 typeof返回值都是小寫字符串 null的類型不是null，而是"object" NaN這個不是數字的類型也是"number" function明明也是對象，但是typeof卻給了"function"類型 其它對象都返回"object",很沒有識別性 具體識別對象類型使用instanceof 操作符，這個記住一點兒就行，對於基本類型，instanceof 永遠返回false 1 instanceof Number; //false new Number(1) instanceof Number; //true