JavaScript面試時候的坑窪溝洄——數據類型

前些日子寫了篇關於最近找工做的一些感覺的博客 找工做的一些感悟——前端小菜的成長,沒想到獲得了不少園友的共鳴，獲得了不少鼓勵，也有園友但願我分享一些筆試、面試的經驗。我以爲分享一些筆試題沒太多價值，對讀者幫助不大，本身總結了一些筆試、面試經常使用的知識點，但願能夠給想找工做的同窗一些借鑑。

有興趣同窗能夠看看前些日子總結的一些面試中常常被問到的問題的博客，目前主要寫了關於CSS和JavaScript，會持續把一些經歷分享出來

容易被忽略CSS特性

經常使用CSS優化總結——網絡性能與語法性能建議

常見標籤的默認屬性值及相互做用——關於CSS reset的思考

CSS清浮動處理（Clear與BFC）

最簡單的JavaScript模板引擎

簡單JavaScript模版引擎優化

JavaScript 正則表達式上——基本語法

JavaScript正則表達式下——相關方法

經常讓咱們陰溝裏翻船的基礎知識

以前總結的都是一些知識面的，會就是會，不會也答不出來，但在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. 不然就報錯

上面狀況只是針對強制轉換，也就是咱們顯示的調用String或者Number構造函數的時候的處理，在日常使用中，在」顯示「相關操做中會優先調用toString方法，而在運算相關操做中會優先調用valueOf方法。

看個題目

var o = {
        x: 8,
        valueOf: function(){
            return this.x + 2;
        },
        toString: function(){
            return this.x;
        }
    };
console.log(String(o));//"8"
console.log(Number(o)); //10
console.log(o+1);//11，運算相關
alert(o);//"8"，顯現相關

注意返回的一個是字符串，一個是數字，瞭解了上面基本知識，你是否是答對了

判斷數據類型

咱們可使用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"

有幾個看起來比較蹊蹺須要咱們注意

1. typeof是運算符，不是方法，也就是說和加減號同樣用，不考慮優先級問題，不必給操做數加括號，固然加了也沒事兒，說實話可讀性還挺高

1. typeof返回值都是小寫字符串

1. null的類型不是null，而是"object"

1. NaN這個不是數字的類型也是"number"

1. function明明也是對象，可是typeof卻給了"function"類型

1. 其它對象都返回"object",很沒有識別性

具體識別對象類型使用instanceof 操做符，這個記住一點兒就行，對於基本類型，instanceof 永遠返回false

1 instanceof Number; //false
new Number(1) instanceof Number; //true

最後

原本就想寫一些知識點來闡述一些面試題，越寫內容越多，並且發現盤根錯節，只好老老實實從最基礎的談起，有了這些基本知識接下來就能小步快跑了，接下來會更新一些「乾貨」內容，再也不是乾巴巴的理論知識，不過都得創建在前幾篇基礎上才行

• JavaScript面試時候的坑窪溝洄——數據類型

• JavaScript面試時候的坑窪溝洄——表達式與運算符

• JavaScript面試時候的坑窪溝洄——逗號、冒號和括號

• JavaScript面試時候的坑窪溝洄——預解析

PS. 讓人望而生畏的JavaScript認真總結下來無非這些絕不起眼的基礎知識，地基打好了，JavaScript的坑窪溝洄就都可以應付自如了。另一直在尋找Mac上比較好用的博客客戶端，感受都不如Windows live Writer，驚聞博客園支持Markdown語法了，趕忙試試，開始時有些費力，不過熟悉了幾個簡單的語法後真的好方便。建議沒有用過的同窗嘗試一下