JavaScript基礎複習(一) 語言特性及數據類型

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

零、是什麼

    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。 

   有時需要根據數組或對象裏有沒有值來判斷是否顯示。

   如果是數組,arr.length>0。

   如果是對象,可以直接拿屬性判斷 obj.name。但如果不知道有什麼屬性,可以使用 Object.keys(obj).length > 0 來判斷

   說說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 

  除了使用instanceof ,還可以使用一個方法來返回複雜類型的類型值。

var arr = [3,4,5,6,2,1]
var aa = Object.prototype.toString(arr)    // '[object Array]'
aa.substr(8,aa.length-9)     // Array

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

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

       是不是覺得很奇怪呢,這裏我們就要說一下 假值

        ''、0、undefined、null、false、NaN 都是假值,返回 false。

       其他的都將是真值,包括對象、數組、正則、函數等。注意 '0'、'null'、'false'、{}、[]也都是真值  。 

      結論: false 0 '' 之間相互比較都是true,null和undefined相互比較是true。其餘全是false

      ps: Js好奇葩呀!

拓展:

JavaScript基礎複習(二) DOM詳解

前端各階段資源,應有盡有,儘管學,學的完算我輸

談一談全棧,爲什麼不建議初學者去做

  參考:http://bonsaiden.github.io/JavaScript-Garden/zh/

關注我獲取更多前端資源和經驗分享

                                                                       

關注後回覆    vivi     獲取我的微信號,望不吝賜教,pps:可輕撩哈哈

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

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章