當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript精进篇

發布時間：2025/5/22 javascript 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript精进篇小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JavaScript是所有前端框架中最基礎的框架，在工作了兩年以后又重新回到了這里。過去兩年里用的最多的前端框架是jquery，因為它簡單易上手，而jquery就是封裝了JavaScript。重新系統的回顧一下JavaScript，你能了解到很多以前不知道的小知識、忽略的小細節，夯實基礎。可能了解的這些在編碼中用到的很少或者基本用不到，但是卻能夠加深理解，而且會有一種茅塞頓開的感覺，還不時會遇到以前不理解但是匆匆掠過的問題，看完了以后會說一句“原來如此”，使技術精進。相信重新回顧一下不僅會打牢基礎，而且對以后學習別的前端框架會起到事半功倍的作用。

1、CData

在HTML 中，有特殊的規則用以確定<script>元素中的哪些內容可以被解析，但這些特殊的規則在XHTML 中不適用。這里比較語句a < b 中的小于號（<）在XHTML 中將被當作開始一個新標簽來解析。但是作為標簽來講，小于號后面不能跟空格，因此就會導致語法錯誤。

避免在XHTML 中出現類似語法錯誤的方法有兩個。一是用相應的HTML 實體（<）替換代碼中所有的小于號（<），替換后的代碼類似如下所示：

雖然這樣可以讓代碼在XHTML 中正常運行，但卻導致代碼不好理解了。為此，我們可以考慮采用另一個方法。

保證讓相同代碼在XHTML 中正常運行的第二個方法，就是用一個CData 片段來包含JavaScript 代碼。在XHTML（XML）中，CData 片段是文檔中的一個特殊區域，這個區域中可以包含不需要解析的任意格式的文本內容。因此，在CData 片段中就可以使用任意字符——小于號當然也沒有問題，而且不會導致語法錯誤。引入CData 片段后的JavaScript 代碼塊如下所示：

在兼容XHTML 的瀏覽器中，這個方法可以解決問題。但實際上，還有不少瀏覽器不兼容XHTML，因而不支持CData 片段。怎么辦呢？再使用JavaScript 注釋將CData 標記注釋掉就可以了：

2、var 局部變量與全局變量

用var 操作符定義的變量將成為定義該變量的作用域中的局部變量。也就是說，如果在函數中使用var 定義一個變量，那么這個變量在函數退出后就會被銷毀，例如：

function test(){var message = "hi"; // 局部變量 } test(); alert(message); // 錯誤！

這里，變量message 是在函數中使用var 定義的。當函數被調用時，就會創建該變量并為其賦值。而在此之后，這個變量又會立即被銷毀，因此例子中的下一行代碼就會導致錯誤。不過，可以像下面這樣省略var 操作符，從而創建一個全局變量：

function test(){message = "hi"; // 全局變量 } test(); alert(message); // "hi"

這個例子省略了var 操作符，因而message 就成了全局變量。這樣，只要調用過一次test()函數，這個變量就有了定義，就可以在函數外部的任何地方被訪問到。

注意：雖然省略var 操作符可以定義全局變量，但這也不是我們推薦的做法。因為在局部作用域中定義的全局變量很難維護，而且如果有意地忽略了var 操作符，也會由于相應

變量不會馬上就有定義而導致不必要的混亂。給未經聲明的變量賦值在嚴格模式下會導致拋出ReferenceError 錯誤。

3、null == undefined

首先?alert(null == undefined); 返回的值是 true。

接下來分別解釋一下這兩個類型

Undefined 類型只有一個值，即特殊的undefined。在使用var 聲明變量但未對其加以初始化時，這個變量的值就是undefined，例如：

var message; alert(message == undefined); //true

這個例子只聲明了變量message，但未對其進行初始化。比較這個變量與undefined 字面量，結果表明它們是相等的。

不過，包含undefined 值的變量與尚未定義的變量還是不一樣的。看看下面這個例子：

var message; // 這個變量聲明之后默認取得了undefined 值 // 下面這個變量并沒有聲明 // var age alert(message); // "undefined" alert(age); // 產生錯誤

運行以上代碼，第一個警告框會顯示變量message 的值，即"undefined"。而第二個警告框——由于傳遞給alert()函數的是尚未聲明的變量age——則會導致一個錯誤。對于尚未聲明過的變量，只能執行一項操作，即使用typeof 操作符檢測其數據類型（對未經聲明的變量調用delete 不會導致錯誤，但這樣做沒什么實際意義，而且在嚴格模式下確實會導致錯誤）。

然而，令人困惑的是：對未初始化的變量執行typeof 操作符會返回undefined 值，而對未聲明的變量執行typeof 操作符同樣也會返回undefined 值。來看下面的例子：

var message; // 這個變量聲明之后默認取得了undefined 值 // 下面這個變量并沒有聲明 // var age alert(typeof message); // "undefined" alert(typeof age); // "undefined"

結果表明，對未初始化和未聲明的變量執行typeof 操作符都返回了undefined 值；這個結果有其邏輯上的合理性。因為雖然這兩種變量從技術角度看有本質區別，但實際上無論對哪種變量也不可能執行真正的操作。

結論：即便未初始化的變量會自動被賦予undefined 值，但顯式地初始化變量依然是明智的選擇。如果能夠做到這一點，那么當typeof 操作符返回"undefined"值時，我們就知道被檢測的變量還沒有被聲明，而不是尚未初始化。

Null 類型是第二個只有一個值的數據類型，這個特殊的值是null。從邏輯角度來看，null 值表示一個空對象指針，而這也正是使用typeof 操作符檢測null 值時會返回"object"的原因，如下面的例子所示：

var car = null; alert(typeof car); // "object"

如果定義的變量準備在將來用于保存對象，那么最好將該變量初始化為null 而不是其他值。這樣一來，只要直接檢查null 值就可以知道相應的變量是否已經保存了一個對象的引用，如下面的例子所示：

if (car != null){// 對car 對象執行某些操作 }

實際上，undefined 值是派生自null 值的，因此ECMA-262 規定對它們的相等性測試要返回true：

alert(null == undefined); //true

這里，位于null 和undefined 之間的相等操作符（==）總是返回true，不過要注意的是，這個操作符出于比較的目的會轉換其操作數。

盡管null 和undefined 有這樣的關系，但它們的用途完全不同。如前所述，無論在什么情況下都沒有必要把一個變量的值顯式地設置為undefined，可是同樣的規則對null 卻不

適用。換句話說，只要意在保存對象的變量還沒有真正保存對象，就應該明確地讓該變量保存null 值。這樣做不僅可以體現null 作為空對象指針的慣例，而且也有助于進一步

區分null 和undefined。

4、Boolean和Boolean()

Boolean 類型是ECMAScript 中使用得最多的一種類型，該類型只有兩個字面值：true 和false。這兩個值與數字值不是一回事，因此true 不一定等于1，而false 也不一定等于

0。

雖然Boolean 類型的字面值只有兩個，但ECMAScript 中所有類型的值都有與這兩個Boolean 值等價的值。要將一個值轉換為其對應的Boolean 值，可以調用轉型函數

Boolean()，如下例所示：

var message = "Hello world!"; var messageAsBoolean = Boolean(message);

在這個例子中，字符串message 被轉換成了一個Boolean 值，該值被保存在messageAsBoolean變量中。可以對任何數據類型的值調用Boolean()函數，而且總會返回一個

Boolean 值。至于返回的這個值是true 還是false，取決于要轉換值的數據類型及其實際值。下表給出了各種數據類型及其對應的轉換規則。

這些轉換規則對理解流控制語句（如if 語句）自動執行相應的Boolean 轉換非常重要，請看下面的代碼：

var message = "Hello world!"; if (message){alert("Value is true"); }

運行這個示例，就會顯示一個警告框，因為字符串message 被自動轉換成了對應的Boolean 值（true）。由于存在這種自動執行的Boolean 轉換，因此確切地知道在流控制語

句中使用的是什么變量至關重要。錯誤地使用一個對象而不是一個Boolean 值，就有可能徹底改變應用程序的流程。

轉載于:https://www.cnblogs.com/banma/p/7481293.html

總結

以上是生活随笔為你收集整理的JavaScript精进篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： struts2获取服务器临时目录
下一篇： jfinal多数据源ActiveReco