一周一話題之四(JavaScript、Dom、jQuery全面復習總結


-->目錄導航

一、 JavaScript

    1. js介紹

    2. js語法

    3. js進階

    4. js高級

    5. 事例代碼下載

一、 JavaScript

做BS系統,JavaScript的使用是少不了的;本文就帶你快速回顧一下JavaScript的基本知識,看看哪些基礎知識是你所遺漏的

1. js介紹

① js是一種基於對象和事件的腳本語言,使用瀏覽器來執行。

② js是解釋型語言無需編譯就可隨時運行。

③ 安全性:不允許訪問本地硬盤;跨平台:有支持js的瀏覽器即可。

④ 在網頁中編寫js代碼推薦使用外部引用的方式,這樣可以多個頁面共享js代碼,達到代碼復用。

回到導航

2. js語法

(1) 大小寫敏感,嚴格區分大小寫。

(2) 定義字符串,可以使用“雙引號”,也可使用“單引號”,推薦使用單引號與html避免沖突。

(3) js是“弱類型”語言,支持“動態類型”,沒有顯示數據類型,聲明變量都用var

(4) 網頁中的js代碼應該放到<script></script>標簽中,<script>標簽可以放到<head>、<body>等任意位置,並且一個頁面可以有不止一對<script></script>標簽。

(5) 每條語句后用“;”來結尾,可以方便做js壓縮並且提高代碼可讀性

(6) 變量命名規則:以字母、下划線或$開頭,中間可以包括字母、數字、下划線或$

(7) 關鍵字、保留字

關鍵字:break、else、new、var、case、finally、return、void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instanceof、typeof

保留字:abstract、enum、int short、boolean、export、interface、static、byte、extends、long、super、char、final、native、synchronized、class、float、package、throws、const、goto、private、transient、debugger、implements、protected、volatile、double、import、public

(8) 注釋

單行注釋: // ;塊級注釋:/* */推薦使用單行注釋

(9) 數據類型

js中有5種簡單數據類型(也稱為基本數據類型):Undefined(未定義) 取值-undefined、Null(空對象) 取值-null、Boolean(布爾) 取值-true或false、Number(數字) 取值-所有數字,包含整數和小數,范圍相當於double、String(字符串) 取值-。還有1種復雜數據類型——Object(對象類型) 取值-任何對象,本質上是由一組無序的名值對組成的。

typeof運算符用來檢測變量的數據類型

"undefined"——如果這個值未定義;

"boolean"  ——如果這個值是布爾值;

"string"   ——如果這個值是字符串;

"number"   ——如果這個值是數值;

"object"   ——如果這個值是對象或null;

"function" ——如果這個值是函數;

(10) 其它語句如if、while、for等等與C#幾乎一致

(11) 轉義字符“\”也與C#一樣

回到導航

3. js進階

(1) ==與===

==、!=:對於其兩邊的表達式,如果類型相同,則直接比較,如果不同,則嘗試轉換成為相同類型再判斷;==認為null與undefined、undefined與undefined是相等的

===、!==:判斷前不進行類型轉換,===兩邊必須類型相同、值也相同時才會返回true

(2) null與undefined

null:表示一個有意義的值,表示“無值”或“無對象”,變量的狀態為已知狀態;通過設置對象為null,來釋放對對象的引用,以便瀏覽器回收內存。

undefined

① 聲明變量但未賦值時,變量的值為undefined

② 方法沒有return語句返回值時,返回undefined

③ 未聲明的變量,通過typeof()檢測變量時,返回"undefined"字符串。

④ 訪問不存在的屬性時返回undefined

注:把null轉換為數字,結果為0。而把undefined轉換為數字結果為NaN。

(3) 判斷變量是否可用

變量不可用:變量聲明未賦值、變量未聲明就使用、變量值為null

判斷:

if(typeof(v) !='undefined' && v != null)

推薦寫法:if(v)   --這里會把v先轉換為boolean類型再判斷 ;對於null、undefined、0、空字符串就會轉換為false

(4) 變量作用域

① 全局變量:在頁面上直接聲明的變量,“全局”是指在整個當前頁面都能訪問到的變量;

默認屬於windows成員

直到頁面關閉或瀏覽器關閉才釋放資源

在每個<script></script>中都可以訪問到

容易引起“命名沖突”

② 函數內部變量:作用范圍為當前函數內部

③ 沒有塊級作用域范圍,所以在方法中任何地方聲明的變量都是在整個方法中有效。

④ 聲明變量可以用“var”,也可不用,不用“var”聲明的變量是全局變量;

⑤ js中同樣不能有重名的變量,js發現變量重復后悔自動忽略后面的聲明,只是用第一次聲明的變量

注:推薦在js聲明變量時要用var,且少使用全局變量

(5) 數據類型轉換

① 字符串轉化數字 

字符串轉換為整數:parseInt(numString, [radix]) radix 為要解析的字符串的基數。該值介於 2 ~ 36 之間。如果省略該參數或其值為 0,則數字將以 10 為基礎來解析。如果它以 “0x” 或 “0X” 開頭,將以 16 為基數。如果該參數小於 2 或者大於 36,則 parseInt() 將返回 NaN。

字符串轉化為小數:parseFloat(numString)

② 任意類型到指定類型

轉為字符串:String(object)、對象.toString()

轉為Boolean:Boolean(object)

轉化為數字:Number(object)

NaN:當某類型轉化為數字失敗時,返回NaN,表示不是一個數字;NaN不等於任何值,包括它自己,判斷時需要使用isNaN(arg)函數

(6) eval() 函數

eval() 函數可將字符串轉換為代碼執行,並返回一個或多個值.

如果eval函數在執行時遇到錯誤,則拋出異常給調用者.

類似的函數是loadcode ,loadcode並不立即執行代碼,而是返回一個函數對象.

並且loadcode支持路徑參數,eval並不支持. eval並不支持代碼中的return語句,而是將代碼作為表達式直接計算出結果.

注:不推薦使用,效率低且不安全

(7) String對象

length屬性:獲取字符串的字符個數。(無論中文字符還是英文字符都算1個字符。)

charAt(index)方法:獲取指定索引位置的字符。(索引從0開始)

indexOf(‘字符串’,startIndex)方法:獲取指定字符串第一次出現的位置。startIndex表示從第幾個開始搜索。

split(‘分隔符’,limit);//根據分隔符將一個字符串返回為一個數組。limit表示要返回的數組的最大長度(可自定義)。多個

隔符使用正則表達式:var msg = 'a★b★c☆d☆e#f';var vals = msg.split(/☆|★|#/);alert(vals);

substr(startIndex,len)//從startIndex開始,截取len個字符。

substring(startIndex,stopIndex)//從startIndex開始,截取到stopIndex位置(不包括stopIndex所在的字符)。

toUpperCase()//轉換大寫、toLowerCase();//轉換小寫

match()、replace()、search()方法,正則表達式相關

(8) 普通函數

-->基礎

① 使用function關鍵字

② 無返回值類型

③ 無參數的類型

④ JavaScript中函數永遠有返回值,如果沒有執行return語句,則返回undefined。(把函數當做“構造函數”時,return語句將不返回)

⑤ 易錯:自定義函數名不要與不要和js內置、dom內置等系統函數名重名。如selectAll、focus等函數名不要用

⑥ 函數名稱采用“駝峰命名法”,而非C#中的帕斯卡命名法

-->函數重載

① js中沒有重載的概念,當遇到多個重名的方法后,最后一個方法定義會覆蓋前面的所有方法定義

② 利用arguments實現js函數重載:通過arguments對象可以判斷用戶在調用函數時,是否傳遞了參數,以及傳遞了幾個參數,相當於C#中的params,它是用起來像數組的一個對象,但arguments對象本身並不是數組對象。

③ 例子

function add(){
    var sum = 0;
    for(var i =0; i < arguments.length; i++){
        sum += arguments[i];
    }
}

注:推薦使用“命名參數”增加程序可讀性

-->“函數”即“對象”

① 對象成員

length屬性,獲取方法命名參數的個數

prototype屬性、arguments屬性(函數執行時才可獲取)

toString()方法,獲取方法的源代碼

② 例子

<script type="text/javascript">
        function getUserName() {
            var first_name = ‘Li';
            var last_name = ‘Li';
            return last_name + first_name;
        }
        //此時user_name中為函數getUserName()執行完畢后的返回值
        //var user_name = getUserName();

        //此時user_name就相當於是函數getUserName
        var user_name = getUserName;
        alert(user_name); //相當於user_name.toString()獲取函數的源代碼
        alert(user_name.length); //獲取函數的參數的個數
        var result = user_name(); //調用該函數
        alert(result);
    </script>

(9) 調試與排錯:可以利用vs和chrome、firefox瀏覽器中設置斷點進行調試

回到導航

4. js高級

(1) 函數聲明與變量聲明預解析

① 函數預解析:在頁面中的所有函數定義語句,都會在代碼執行前進行“預解析”,在“預解析”的時候,對於重名的函數就會用最后一次定義覆蓋所有前面的定義

② 變量聲明預解析:對於在函數內部定義的局部變量,無論是定義在函數的任何位置,在函數執行前也會進行“預解析”,會把變量聲明語句“置頂”解析。也就是說無論變量聲明語句在函數的任何地方,都會被認為是寫在了函數一開始的部分,所以后面的語句都可以直接使用這些變量了。但注意:這里只會把變量聲明的語句“預解析”,賦值語句並不會一同被“解析”。

(2) 匿名函數

將函數定義語句當做一個表達式來處理,它可以減少函數命名問題,並且減少文件的字節數。

① 寫法一:

var fn = function (x, y) { return x + y; };(勿忘分號) 調用:alert(fn(10,20));  應用之一:設置事件處理程序。

② 寫法二:

var result = (function (x, y) { return x + y; })(10, 20); 調用:alert(result);

③ 寫法三:

var fn = new Function("x,y,z", "var sum=x+y+z;alert(sum);"); 調用:fn(10, 20, 30);

(3) 數組

① 介紹:js中通過Array對象創建數組,它是集成數組、ArrayList集合、Hashtable集合、棧集合、隊列集合等的一個“超強綜合體”

② 使用:var ages = new Array();ages[0]=10;ages[1]=16;

通過for循環來遍歷:for(var i=0;i<ages.length;i++)

注:用length來獲取數組元素中的個數

③ 其它聲明方式

new Array(size)//聲明數組初始長度為size

new Array(a,b,c…)//聲明數組並設置初始值

推薦使用數組字面量:var arr =[12,‘ok’,true]

④ 沒有多維數組,只能嵌套數組 :var arr = [12, ‘ok’,[‘abc’,false]]

⑤ Array的方法:toString,join,reverse、concat、sort、push、pop、shift、unshift、slice、splice等等

⑥ Array鍵值對集合:鍵值對聲明 var arr={'dawei':'大衛','jim':'吉姆'};

Array數組本身就是一個鍵值對集合,“普通數組”,即通過下標來獲取元素,只不過是一個“特殊的鍵值對集合”而已,把下標作為“鍵”,把數組元素最為值。

當鍵是整數時認為是“普通數組”,length屬性具有長度。

當鍵是非整數字符串時認為是“鍵值對集合”。

不建議將“普通數組”與“鍵值對集合”混用。

遍歷:

for (var key in arrayDict) {
      console.log(key + '......' + arrayDict[key]);
}

(4) 面向對象

① 介紹

JavaScript中沒有“類”的概念,全都是對象。“函數”是對象,通過new 關鍵字調用“函數”創建的也是對象。

函數本身是一個“函數對象”,而通過new關鍵字調用“函數”創建的對象又是另外一個對象,是兩個不同的對象。

js中的面向對象也都是通過維護變量的作用域等方式來模擬的

② 構造函數

構造函數也是函數,只是調用時使用new關鍵字;

構造函數使用“帕斯卡”命名;

創建帶參數的構造函數:通過this關鍵字初始化成員;

linstanceof關鍵字,判斷對象是否屬於某個“類型”(構造函數); ex:p1 instanceof Person

③ js模擬“類”

-->prototype屬性

prototype是“函數對象”的屬性,可實現類似C#中擴展方法的功能;

注:不要為“內置對象”隨便添加新成員。防止混亂,可以對自定義對象通過該方式來添加新成員。

prototype原理圖:

image

-->繼承

js中的“繼承”一般通過prototype來實現的,也可以通過apply和call來進行模擬實現

任何類型都直接或間接繼承自Object

function Person(){ 
  } 
  Person.prototype.hello = "hello"; 
  Person.prototype.sayHello = function(){ 
    alert(this.hello); 
  } 
  
  function Child(){ 
  } 
  Child.prototype = new Person();//這行的作用是:將Parent中將所有通過prototype追加的屬性和方法都追加到Child,從而實現了繼承 
  Child.prototype.world = "world"; 
  Child.prototype.sayWorld = function(){ 
    alert(this.world); 
  } 
  
  var c = new Child(); 
  c.sayHello(); 
  c.sayWorld();

擴展:《js中call與apply用法》《js繼承的實現》

(5) 函數閉包(變量作用域問題)

在一個函數內部又定義了一個函數,內部函數函數能訪問外部函數作用域范圍內的變量,這時這個內部函數就叫做閉包。無論這個內部函數在哪里被調用都能訪問的到外部函數作用域中的那些變量

作用:匿名自執行函數、實現緩存、實現封裝、實現面向對象中的對象

擴展:《js閉包的作用》

回到導航

5. 事例代碼下載

《代碼下載》

注:各位園友,如果您覺得本文對你有些幫助的話,就幫我右下角推薦一下!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM