前端的開發(fā)當中,我們經常聽到的兩個概念就是JavaScript和ECMAScript,其實很多人大都是將兩個概念視為相同的,但是其實JavaScript的實現要遠遠大于ECMAScript,ECMAScript僅僅是作為JavaScript的核心部分,JavaScript還包含兩塊重要的內容就是文檔對象模型(DOM)和瀏覽器對象模型(BOM),DOMBOM其實也是前端技術非常重要的一塊內容。

了解這些以后,我們下面開始講解JavaScript語言最基本的概念,畢竟這也是學習任意一門語言首要掌握的“敲門磚”,俗話說“萬丈高樓平地起”未來你的JavaScript能夠走到什么樣的高度也完全取決于你對這些基本類型以及API的掌握程度!也能解答你最初認為JavaScript“雜亂無章”的困惑,掌握這些基本概念之后,你會發(fā)現并愛上JavaScript這門語言!

語法

  1. 首先JavaScript雖然是一門弱類型語言,但是內部的一切命名都是完全區(qū)分大小寫的,比如變量Test、TEst、test表示三種不同的變量。
  2. JavaScript的標識符命名規(guī)則和其他語言一樣,首字母必須為字母、數字、下劃線(_)、美元符號($)開頭
  3. 注釋采用C語言風格,單行注釋采用“// 注釋內容”,多行注釋采用“/* 注釋內容 */”。
  4. 條件控制語句、循環(huán)語句與大多數語言相同,此處不再贅述!

很多人覺得JavaScript雜亂無章,甚至沒有章法可循就是因為對于JavaScript的基本類型并沒有深入的了解,同時JavaScript因為是松散型的變量,變量僅僅是作為一個占位符能夠被賦予任何類型的值,這導致很多人認為自己“怎么寫都對,怎么都能運行”的概念,就盲目地認為JavaScript其實很簡單,今天我們一起來深入看一下JavaScript的六大基本數據類型,掃清初學者的所有“困惑”,讓你開啟全新的JavaScript之旅!

接下來,我們將進入本屆課的重點內容,6大基本數據類型的刨根問底!

六大基本數據類型

在JavaScript這門語言當中有6大基本數據類型:5種簡單數據類型+1種復雜數據類型。

5種簡單數據類型:undefined、null、布爾類型(Boolean)、字符串類型(String)、數值類型(Number

1種復雜數據類型:對象類型(Object

那么其實在ES6標準當中,JavaScript又新增了一個原始基本類型:Symbol類型,表示一個獨一無二的值,Symbol類型的出現主要是為了解決我們在為對象增加方法以及屬性時導致同名屬性或者同名方法被覆蓋而新增的。

因為JavaScript是松散類型的,變量僅僅是一個占位符,那么當我們給變量賦值后,如何正確地獲得該變量的類型然后再做相應的處理就成為一個棘手的問題,其實JavaScript是提供給我們一個typeof操作符來獲取變量類型的,不過留一個問題就是typeof真的能夠幫助我們準確的判斷類型嗎?這個知識點其實也是檢測你對JavaScript的掌握程度的一個關鍵點。

typeof 操作符

我們首先來看一下各個基本類型使用typeof操作符返回的值:

如上圖,我們可以看到typeof操作符是無法區(qū)分nullObject類型,也無法區(qū)分復合類型(Arrary)與 函數類型(Function),所以這個操作符在檢測類型的時候是有缺陷的,那么我們如何準確的檢測出類型呢?

這兒給出一個普遍JS類庫都采用的方式比如(JQuery),就是調用Object原型鏈上的toString方法,如下圖:

我們可以看到,JavaScript目前所有的類型都能夠通過這種方式準確的檢測出來,那么這兒有一個知識點就是必須調用Object原型鏈上的toString方法通過call方法將this對象變成檢測的變量,這樣變量就會調用Object原型鏈上的toString方法,而非變量所屬基本類型覆蓋重寫后的toStirng方法。

知道上面如何檢測變量類型之后,我們來學習幾個比較重要的類型轉換規(guī)則:BooleanNumber。

Boolean類型轉換規(guī)則

可以說Boolean類型在JavaScript中是使用的最多的一種類型,該類型只有truefalse兩個值。在條件語句中任何傳入的類型都將被轉換為Boolean類型,來判斷其該走哪個條件分支,這時候就涉及到其他基本類型到Boolean類型的轉換,它們的轉換規(guī)則如下:

這個轉換規(guī)則我們需要牢記,對我們以后書寫判斷條件以及閱讀一些JS類庫非常有幫助,也不再會對JavaScript的判斷條件產生困惑了。

Number類型轉換規(guī)則

JavaScript的Number類型是采用的IEEE754格式標準,這個標準有一個浮點計算的通病,那就是在做條件判斷的時候永遠不要用與浮點計算的數值相比較,來看一個具體的例子:

  • console.log(0.1+0.2); // 輸出多少?

如果你單純的認為輸出0.3,那么你就錯了,這是JS浮點計算中的一個特例,其輸出0.30000000000000004,所以當你執(zhí)行以下判斷時,你永遠不會得到正確的結果:

  • if(a + b == 0.3){ // 切記不要做這樣的條件判斷
  • // do sth.
  • }else{
  • // do else sth.
  • }

知道這個知識點之后,我們再看其他基本類型轉換到 Number 類型有三種方式,一種是通過Number()函數,另一個是全局函數parseInt()和parseFloat(),當然了 Number() 函數能夠將任何基本類型轉換為 Number 類型,后兩個僅僅是針對字符串轉換成 Number 類型,這塊的轉換規(guī)則也比較重要,需要謹記!

Number() 函數的轉換規(guī)則如下:

打開網易新聞 查看精彩圖片

可以看出Number() 函數對String字符串進行轉換的時候并不是很合理,所以我們常用的其實是全局函數parseInt() 函數,該函數的轉換規(guī)則更加合理,parseInt() 的解析規(guī)則是忽略掉字符串的前置空格,直到找到第一個非空字符,如果不是數字或者負號,直接返回NaN,如果是數字或者負號,繼續(xù)往下找,一直到沒有數字字符為止,將前面解析到的數字提取出來。

而parseInt函數與Number函數的另一個區(qū)別是能夠解析進制,雖然如此,但是我們應該堅持在使用parseInt()函數的時候始終指定第二個參數(代表進制)。

最后一種Object類型,則是先調用Object類型的valueOf() 方法,得到返回值,然后返回值按照上圖的規(guī)則進行轉換,若結果返回 NaN ,再次調用其 toString() 方法得到返回值再按照上圖的轉換規(guī)則進行轉換,最后String類型種若有非數字字符,一律轉換為 NaN 。

Undefined類型

Unfefined類型還是比較簡單明了的,只有一個取值為undefined,比如聲明了一個變量但未對其進行初始化,那么該變量默認被賦值為undefined。一般來說字面量undefined通常被拿來進行比較判斷。

Null類型

如同Undefined類型一樣,Null類型也僅有一個字面量為null,但是Null類型在進行typeof操作符的時候返回是“object”,其實null就是一個空對象指針。

所以其實如果我們的變量將來如果要存放對象類型的話,初始化的時候最好顯示的賦值為null。

這兒其實有一個知識點就是null == undefined 比較返回的是true,這是因為兩者在進行判等的時候都進行了類型轉換,規(guī)則按照前面的Boolean類型的轉換規(guī)則,所以都會被轉換為false,所以兩者判等返回的是true。

String類型

String類型可以說在JS開發(fā)當中算是比較常用的類型,那么JS的字符串可以用雙引號或者單引號引用起來,都是有效的,單引號雙引號也是可以嵌套使用的,比如“

或者'

。不過在ES6當中也為我們增加了一個模板字符串`this is a string`,這個模板字符串非常好用,對于拼接字符串來說再也不用“+”號來連接,只需要使用模板字符串直接抒寫然后添加變量。

例子:

  • var number=6;
  • console.log(`打印數字:${number}`);

運行輸出:打印數字:6

其實String類型當中有很多內置的方法,這兒就不再細說,讀者可以查閱相關API仔細理解一下,比如最常用的substr()、splice()、split()、replace()方法。

Object類型

Object類型的初始化有兩種方式:

  • var obj = new Object();
  • var obj = {}; // 字面量創(chuàng)建Object對象

Object類型創(chuàng)建完成后就可以為其添加各種屬性或者方法,都會存在于其原型鏈上,以上就是我們需要知道的5大基本類型的相關重點內容,這兒我們也引出了原型鏈這一概念,原型鏈在JS當中也是非常重要的,我們將會在下一節(jié)內容中詳解講解。

打開網易新聞 查看精彩圖片