JavaScript基礎複習(一) 語言特性及資料型別

FEvivi發表於2018-11-08
終於要開始寫JS系列了,目標列了好久,導圖也做了,但總沒有行動,近來無事,總結一下這個系列的學習。

JavaScript基礎複習(一) 語言特性及資料型別


零、是什麼

    JavaScript是前端必學語言,和HTML,CSS並稱為前端三劍客,是一門執行在瀏覽器端的指令碼語言,功能是操作DOM,處理資料,渲染特效等

一、語言特性

1、弱型別

    說白了就是型別定義,對應的就是強型別,比如Java,C等都是強型別語言,在使用變數的時候必須宣告是哪種型別的,一旦被定義了資料型別,除非強制型別轉換,那麼它到銷燬的時候都是這個型別的,這樣當然是比較安全的。而弱型別就是不需要定義是什麼資料型別,它的值就表示了它是什麼型別的,如下

var asd1 = 'have a nice day'   //string
var asd2 = 20                  //number
var asd3 = new Date()          //object
var asd4 = ['1','3','4']       //object
var asd5 = true                //boolean
複製程式碼

2、動態性

    可以直接對使用者的操作做出相應,不需要通過Web伺服器。採用事件驅動的方式進行,比如你點選一個提交按鈕就是一個事件,也就是說你執行某種操作的動作,非常常見。當相關事件在觸發的時候就會自動執行需要響應的指令碼或函式。

3、執行在瀏覽器端

    js指令碼語言不允許訪問本地硬碟,也不能儲存在伺服器上,所以它只能通過瀏覽器實現資料的展示和動態互動,正是因為這樣,保證了資料的安全性。

4、跨平臺性

    依賴於瀏覽器本身,與操作環境無關。只要能執行瀏覽器的計算機,並安裝了支援javascript的瀏覽器就可以正確執行,從而實現了“編寫一次,走遍天下”的夢想。

5、指令碼語言

    解釋性指令碼語言,javascript不需要編譯,只需要嵌入到html程式碼中,由瀏覽器逐行載入解釋執行

二、基本資料型別

    JavaScript的基本型別值是儲存在棧記憶體中的簡單資料段,按值儲存,所以按值訪問。基本資料型別有:
    Number、String、Boolean、Null、Undefined、以及ES6的symbol(獨一無二的值)。
    用typeof 來檢驗基本型別,參考弱型別的舉例,可以返回這些值:undefined、boolean、string、number、object、function
    這裡還有一些有意思的例子:

typeof undefined      //undefined
typeof null           //object
typeof ['1','2','3']  //object
typeof {asd:'sssss'}  //object複製程式碼

所以不要使用typeof 來區分陣列還是物件,因為都返回object。

說說null和undefined的區別。

都表示 無,如果轉換為數值     undefined => NaN             有宣告,但未賦值或者未初始化
                                               null => 0 (原型鏈的終點)     沒有,也沒有定義,不存在

typeof 未定義值     // undefined
typeof 未初始化值   // undefined複製程式碼

三、進階

    JavaScript 的基本知識就是上述,你可能發現好像很簡單並不多,那只是基本型別,我們常用到的Object還沒有介紹呢,接下來說一下進階的知識。

1、引用型別

    和基本型別對應,引用型別是儲存在堆記憶體中的物件,值是可變的,在棧中儲存對應的指標(一個指向堆的引用地址),指向堆中實際的值。
    型別值:Object(在JS中除了基本資料型別以外的都是物件,陣列是物件,函式是物件,正規表示式是物件)
    使用 instanceof 檢測引用型別

var a = [1,2]
var b = {'a':'asss'}
alert( a instanceof Array)   // true
alert( b instanceof Object)  // true 複製程式碼

    ​那麼基本型別和引用型別有什麼區別呢。

var arr = [2,4,6];
var bcc = arr;//傳址 ,物件中傳給變數的資料是引用型別的,會儲存在堆中;
var cxx = arr[0];//傳值,把物件中的屬性/陣列中的陣列項賦值給變數,這時變數C是基本資料型別,儲存在棧記憶體中;改變棧中的資料不會影響堆中的資料
alert(bcc);//2,4,6
alert(cxx);//2
//改變數值 
bcc[1] = 6;
cxx = 7;
alert(arr[2]);//6
alert(arr[0]);//2
複製程式碼

    從上面我們可以得知,當我改變bcc中的資料時,arr中資料也發生了變化;但是當我改變cxx的資料值時,arr卻沒有發生改變。
    這就是傳值傳址的區別。因為arr是陣列,屬於引用型別,所以它賦予給bcc的時候傳的是棧中的地址(相當於新建了一個不同名“指標”),而不是堆記憶體中的物件。而cxx僅僅是從arr堆記憶體中獲取的一個資料值,並儲存在棧中。所以bcc修改的時候,會根據地址回到arr堆中修改,cxx則直接在棧中修改,並且不能指向arr堆記憶體中。
    接下來就涉及到比較常用的深拷貝和淺拷貝,我們放在之後來說。

2、型別判斷

    在開發的過程中經常會判斷值是否相等來進行下一步的操作,在js中有兩個方式判斷兩個值是否相等。
== 等於操作符
    js是弱型別語言,在使用 == 操作符的時候,會進行強制型別轉換

""           ==   "0"           // false
0            ==   ""            // true
0            ==   "0"           // true
false        ==   "false"       // false
false        ==   "0"           // true
false        ==   undefined     // false
false        ==   null          // false
null         ==   undefined     // true
" \t\r\n"    ==   0             // true
複製程式碼

    因為在強制型別轉換的時候規則比較複雜,所以說使用 == 是一個不好的程式設計習慣,也會帶來效能消耗。

 === 全等操作符

不會進行強制型別轉換,

""           ===   "0"           // false
0            ===   ""            // false
0            ===   "0"           // false
false        ===   "false"       // false
false        ===   "0"           // false
false        ===   undefined     // false
false        ===   null          // false
null         ===   undefined     // false
" \t\r\n"    ===   0             // false
複製程式碼

所以推薦使用 === 操作符

3、型別轉換

所以已經使用了 === 操作符,但是還是會產生很多問題,那麼不然我們自己進行型別轉換。

    轉換為 字元型別: 將一個值加上空字串可以輕鬆轉換為字串型別

'' + 10 === '10'; // true
複製程式碼

    轉換為 數字型別: 使用一元的加號操作符,可以把字串轉換為數字。

+'10' === 10; // true
複製程式碼

    轉換為布林值: 通過使用 操作符兩次,可以把一個值轉換為布林型

!!'foo';   // true
!!'';      // false
!!'0';     // true
!!'1';     // true
!!'-1'     // true
!!{};      // true
!!true;    // true複製程式碼

over~

參考:bonsaiden.github.io/JavaScript-…


JavaScript基礎複習(一) 語言特性及資料型別


    關注我獲取更多前端資源和經驗分享 關注後回覆 vivi 獲取我的微訊號,望不吝賜教,pps:可輕撩哈哈 

JavaScript基礎複習(一) 語言特性及資料型別

 感謝大佬們閱讀,希望大家頭髮濃密,睡眠良好,情緒穩定,早日實現財富自由~ 


相關文章