必須掌握的JavaScript基本知識

做爲一個前端工做者，應該瞭解一些javascript的發展歷史，javascript實現及版本等。基本概念包括語法、關鍵字、變量、數據類型、操做符、語句控制及函數等，它們和咱們學習的其它語言C/C++、java、C#等基本上相似，只是存在細微的差異。具體區別及基本學習內容參考JavaScript高級編程相關章節。 

1、基本內容中應該注意的幾個地方

1）關於script標籤

咱們最經常使用的寫法以下：

<script type="text/javascript">

    function(){

        console.log("hello world!");

    }

</script>

 

那麼下邊這些用法呢？

 

<script type="text/javascript" >

    //<![CDATA[ function(){

        console.log("hello world!");

    }

//]]>

</script>

        在xhtml中，像一些特殊的符號，<> 等等會默認斷定爲標籤，標籤後邊是不能跟空格的。所以xhtml下要想實現一樣的效果，應該轉義&lt;，可是這樣的代碼誰都不想看到。那麼能夠用CDATA包起來。可是有個特殊的瀏覽器不支持CDATA怎麼辦，那就加上//

 

<script type="text/javascript" >

   <!--function(){

        console.log("hello world!");

    }

//-->

</script>

        以上代碼是防止一些瀏覽器不支持javascript（這個顧慮如今基本能夠打消了，另外還有個特殊的標籤<noscript><p>支持並開啓js的瀏覽器能夠看到我</p></noscript>），用html註釋的方式包起來，支持js的瀏覽器會執行。最後一個//防止js執行到-->認爲是語法錯誤

 

<script type="text/javascript"  defer="defer">

    function(){

        console.log("hello world!");

    }

</script>

通常用於外部瀏覽器，defer表示該腳本的執行延遲到整個頁面解析完成後再運行，用8個歸納就是 當即下載 延遲執行

 

<script type="text/javascript"  async>

    function(){

        console.log("hello world!");

    }

</script>

通常用於外部瀏覽器，顧名思義，不讓頁面等待腳本的下載，頁面的其它部分就能夠加載了。

 

        還有建議css代碼放到head中，而js代碼放到body中的底部。由於html加載是從上往下，若是在body加載以前有不少的腳本須要加載，那麼咱們用戶看到頁面空白的時間就會很長。相反，頁面展現在用戶面前時，用戶也不關心還有什麼東西沒有加載完。這樣給用戶一個錯覺，咱們的頁面比別人的"快"。那有人就說爲了快，怎麼不把css文件放到下邊？那若是這樣作的話，若是頁面比較大，樣式比較多一開始顯示給用戶的將會很醜。

 

        在js代碼中最好少寫 </script>，非要寫能夠這樣 <\/script>，由於當字符中出現</script>，那麼html會判斷爲<script>的結束，後邊的代碼就不能執行了。

 

在加載js過程當中（尤爲是js在head中，這樣會阻塞UI的加載），不建議動態修改Dom元素，這一點你們可想而知。

 

2）鬆散型變量和typeof

鬆散變量的含義就是，變量比較「隨意」，能夠保存任意的類型。不過咱們平時使用時不建議這麼用

如：var number=10;

       namber="十";

這樣不會報錯，可是最好別這樣用。

因爲變量的這樣隨意性，所以咱們最好經過方法判斷該變量當前的類型，typeof很好的解決了這個問題

console.log(typeof "hi jack");//String

console.log(typeof 10);//number

console.log(typeof null);//Object

console.log(typeof message);//undefined

var message="hello jack li";

console.log(typeof message);//hello jack li

3）數據類型中的特殊狀況

 

undefied爲Undefied類型的值，它只有這一個值。當申明一個值但沒有初始化就使用就會報undefined以下：
var message;//其實這裏至關於 var message=undefined;
console.log(message);//undefined

若是這樣呢？

//var error;

console.log(error);//這裏會報錯，不能執行

更離譜的是若是這樣呢？

console.log(typeof error);//undefined 是否是暈了？

總之typeof 能夠避免不少無謂的錯誤。原本上邊兩種用法都不太推薦。使用變量前 經過typeof判斷是個好的習慣，我的理解。

 

Null類型也是隻有一個值 null，它是空的對象的指針，所以 typeof null 爲Object，一樣使用過程當中也推薦先判斷非空

undefined是派生自null的。所以

console.log(null==undefined);//true

 

Boolean類型也是比較特殊的一個類型

        它只有兩個字面量值 true和false，區分大小寫，這個在其它語言中也是如此，判斷一個變量尤爲是前端用戶勾選的一些radio或者下拉框中的某個值 和 後臺查詢出來的值比較，必須 toLowerCase()，統一轉化爲小寫或者大寫再比較。
        任何類型的變量均可以轉化爲Boolean值。利用方法 Boolean()，轉換表以下。

類型	轉換爲true的值	轉換爲false的值
Boolean	true	false
String	任何非空字符串	""空字符串''也是false 注意沒有空格
Number	任何非0的數字	0 NaN
Object	任何對象	null
Undefined	n/a	undefined

數值類型和NaN

        整數 浮點數須要注意浮點數的判斷 好比 if(0.1+0.2==0.3)//永遠是false 特定的浮點數計算，最好不要去比較結果，浮點是精度爲17

NaN全稱是Not a Number。它和任何數的操做結果都是NaN。 number/0的結果爲NaN。還有一個判斷是否爲NaN的函數isNaN()

isNaN(100)//false

isNaN(NaN)//true

isNaN("100")//false

isNaN(true)//false

isNaN("message")//true

 

數值轉換的一些特殊結果，您掌握多少呢？

Number("Hello jack li");//NaN

 

Number(true);//1

 

Number("000123");//123

通常更經常使用的是parseInt() parseFloat()

parseInt("123ignore")//123

parseInt("");//NaN

parseInt("0xA");//10

爲了消除parseInt("070")//這種轉換，咱們最好 指定第二個參數，明確指出是針對多少進制的轉換 parseInt("070",8);//  

parseFloat("123.123.123");//123.123

 

String類型 單引號雙引號的含義差很少，但不能交叉嵌套使用

 

var message=null;

var error;

console.log(String(message));//null

console.log(String(error));//undefined

 

Object類型，這個類型比較複雜須要之後單獨講

 

3）操做符

算數操做符， 位操做符，關係操做符， 相等操做符

 

~按位非
&按位與
|按位或
>>右移 前面保留符號位
<<左移
>>>無符號右移   前面補0

 

相等的特殊狀況
null==undefined//true

NaN=="NaN"//false

123==NaN //false
NaN==NaN//false

false==0//true

undefined==0//false

1 23=="123"//true

 

全等 ===    !==

對比上邊的就能夠看出===要求更高一些，轉換後值相等也不全等。

123==="123"//false

null===undefined//false

 

4)語句控制

須要注意裏邊的for in 語法就能夠了，基本的程序流程控制語句都相似。