JavaScript從入門到忘記

標籤：ima   catch   null   正則   浮點數   相關   分享   reverse   無效   

JavaScript是一門程式設計語言，瀏覽器內建了JavaScript語言的解譯器，所以在瀏覽器上按照JavaScript語言的規則編寫相應代碼之，瀏覽器可以解釋並做出相應的處理。

• 一、如何編寫
• 二、變數
• 三、資料類型
  • • 1、數字（Number）
    • 2、字串（String）
    • 3、布爾類型（Boolean）
    • 4、數組(Array)
    • 5、 字典（Object）
• 四、其他
  • • 1、序列化
    • 2、轉義
    • 3、eval
    • 4、Regex
    • 5、時間處理
• 五、語句和異常
• 六、函數

一、如何編寫

1、JavaScript代碼存在形式

<!-- 方式一 --><script type"text/javascript" src="JS檔案"></script>  <!-- 方式二 --><script type"text/javascript">    Js代碼內容</script>

2、JavaScript代碼存放位置

HTML的head中
HTML的body代碼塊底部(推薦)
由於Html代碼是從上到下執行，如果Head中的js代碼耗時嚴重，就會導致使用者長時間無法看到頁面，如果放置在body代碼塊底部，那麼即使js代碼耗時嚴重，也不會影響使用者看到頁面效果，只是js實現特效慢而已。

<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script><script>    alert('123');</script>

二、變數

JavaScript中變數的聲明是一個非常容易出錯的點，局部變數必須一個 var 開頭，如果未使用var，則預設表示聲明的是全域變數。

<script type="text/javascript">     // 全域變數    name = 'seven';     function func(){        // 局部變數        var age = 18;         // 全域變數        gender = "男";    }</script>

JavaScript中代碼注釋，此注釋僅在Script塊中生效：
單行 //
多行 /* */

JavaScript中代碼要以分號結束。

使用chrome審查元素進行排錯。

三、資料類型

JavaScript 中的資料類型分為原始類型和物件類型：
原始類型：數字、字串、布爾值 --immutable 不可修改 不可變
物件類型：數組，“字典”，...

null、undefined --不可修改 不可變
null是JavaScript語言的關鍵字，它表示一個特殊值，常用來描述“空值”。
undefined是一個特殊值，表示變數未定義。

1、數字（Number）

JavaScript中不區分整數值和浮點數值，JavaScript中所有數字均用浮點數值表示。

轉換：
parseInt(..) 將某值轉換成數字，不成功則NaN
parseFloat(..) 將某值轉換成浮點數，不成功則NaN
特殊值：

NaN，非數字。可使用 isNaN(num) 來判斷。true->非數字
Infinity，無窮大。可使用 isFinite(num) 來判斷。true->有限數

其他數值計算：

Math.LN1010的自然對數。Math.LOG10E以10為底的e的對數。Math.PI常量piMath.SQRT22的平方根。靜態函數Math.abs( )計算絕對值Math.ceil( )對一個數上舍入Math.floor( )對一個數下舍入Math.cos( )計算餘弦值Math.exp( )計算e的指數Math.log( )計算自然對數

判斷類型ret = typeof a ，返回字串，如'number'。

2、字串（String）

字串是由字元組成的數組，但在JavaScript中字串是不可變的：可以訪問字串任意位置的文本，但是JavaScript並未提供修改已知字串內容的方法。

常見功能：

obj.length                           長度obj.trim()                           移除空白obj.trimLeft()obj.trimRight)obj.charAt(n)                        返回字串中的第n個字元obj.concat(value, ...)               拼接obj.indexOf(substring,start)         子序列位置，從前往後找obj.lastIndexOf(substring,start)     子序列位置，從後往前找obj.substring(from, to)              根據索引擷取子序列obj.slice(start, end)                切片obj.toLowerCase()                    大寫obj.toUpperCase()                    小寫支援正則/\d+/->/Regex內容/，支援分組/(/\d+)e/obj.split(delimiter, limit)          分割，limit表示拿幾個匹配值。obj.search(regexp)                   從頭開始匹配，返回匹配成功的第一個位置(g無效)obj.match(regexp)                    全域搜尋，有g表示全域搜尋，否則只找到第一個。match(/e/g)obj.replace(regexp, replacement)     替換，正則中有g則替換所有，否則只替換第一個匹配項                                     $數字：匹配的第n個組內容；repalce(/(\d+)\w+(\d+)/g,"$2$1")                                     $&：代指匹配成功的的內容；repalce(/(/\d+)/g,"$&"+"x")                                     $`：位於匹配子串左側的文本；                                     $'：位於匹配子串右側的文本                                     $$：直接量$符號，這裡$是轉移符

3、布爾類型（Boolean）

布爾類型僅包含真假，與Python不同的是其首字母小寫。

== 比較值相等
!= 不等於
=== 比較值和類型相等
!=== 不等於
|| 或
&& 且

4、數組(Array)

JavaScript中的數組類似於Python中的列表，可以理解為鏈表形成的數組，不同於java、C#中的連續記憶體空間形成的數組。

常見功能：

obj.length          數組的大小 obj.push(ele)       尾部追加元素obj.pop()           尾部擷取一個元素obj.unshift(ele)    頭部插入元素obj.shift()         頭部移除元素obj.splice(start, deleteCount, value, ...)  插入、刪除或替換數組的元素obj.splice(n,0,val) 指定位置插入元素obj.splice(n,1,val) 指定位置替換元素obj.splice(n,1)     指定位置刪除元素obj.slice( )        切片obj.reverse( )      反轉obj.join(sep)       將數組元素串連起來以構建一個字串obj.concat(val,..)  串連數組obj.sort( )         對數組元素進行排序

5、 字典（Object）

通過對象製造的字典，type為object。

> a = {k1:123,k2:456}> a['k1']< 123

四、其他1、序列化

JSON.stringify(obj)   序列化JSON.parse(str)       還原序列化

2、轉義

decodeURI( )                     解碼 URl中未轉義的字元decodeURIComponent( )            URI組件中的未逸出字元encodeURI( )                     編碼 URI中的逸出字元encodeURIComponent( )            編碼URI組件中的字元，包括：//什麼的escape( )                        對字串轉義unescape( )                      給逸出字元串解碼URIError                         由URl的編碼和解碼方法拋出

3、eval

JavaScript中的eval是Python中eval和exec的合集，既可以編譯代碼也可以擷取傳回值。

eval(“1+1”) eval(“a=1”) eval(‘for(var i=1;i<10;i++){console.log(i)}’)

EvalError 執行字串中的JavaScript代碼

4、Regex

1、定義Regex

/.../  用於定義Regex/.../g 表示全域匹配/.../i 表示不區分大小寫/.../m 表示多行匹配JS正則匹配時本身就是支援多行，此處多行匹配只是影響Regex^和$，m模式也會使用^$來匹配換行的內容

註：定義Regex也可以 reg= new RegExp()

2、匹配

JavaScript中支援Regex，其主要提供了兩個功能：
1， test(string) 檢查字串中是否和正則匹配，用的很多

n = 'uui99sdf'reg = /\d+/reg.test(n)  ---> true只要正則在字串中存在就匹配，如果想要開頭和結尾匹配的話，就需要在正則前後加 ^和$

2， exec(string) 擷取Regex匹配的內容，如果未匹配，值為null，否則，擷取匹配成功的數組

擷取Regex匹配的內容，如果未匹配，值為null，否則，擷取匹配成功的數組。 非全域模式    擷取匹配結果數組，注意：第一個元素是第一個匹配的結果，後面元素是正則子匹配（正則內容分組匹配）    var pattern = /\bJava\w*\b/;    var text = "JavaScript is more fun than Java or JavaBeans!";    result = pattern.exec(text)     var pattern = /\b(Java)\w*\b/;    var text = "JavaScript is more fun than Java or JavaBeans!";    result = pattern.exec(text) 全域模式    需要反覆調用exec方法，來一個一個擷取結果，直到匹配擷取結果為null表示擷取完畢    var pattern = /\bJava\w*\b/g;    var text = "JavaScript is more fun than Java or JavaBeans!";    result = pattern.exec(text)     var pattern = /\b(Java)\w*\b/g;    var text = "JavaScript is more fun than Java or JavaBeans!";    result = pattern.exec(text)

5、時間處理

JavaScript中提供了時間相關的操作，時間操作中分為兩種時間：

時間統一時間 date.setUTCDate
本地時間（東8區）date.setDate

date = new Date()date.setFullYear(2018)//date is an object 

五、語句和異常

1、條件陳述式

JavaScript中支援兩個中條件陳述式，分別是：if 和 switch

   if(條件){     }else if(條件){             }else{     }

    switch(name){        case '1':            age = 123;            break;        case '2':            age = 456;            break;        default :            age = 777;    }

2、迴圈語句

JavaScript中支援三種迴圈語句，分別是：

var names = ["alex", "tony", "rain"]; for(var i=0;i<names.length;i++){    console.log(i);    console.log(names[i]);}

//foreach迴圈names = ["alex", "tony", "rain"];dic = {"k1":123, "k2":456};//不同於python,這裡迴圈的是index不是itemfor(var index in names){    console.log(index);    console.log(names[index]);}for(var key in dic){    console.log(key)}

while(條件){    // break;    // continue;}

3、異常處理

try {    //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行}catch (e) {    // 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。    //e是一個局部變數，用來指向Error對象或者其他拋出的對象}finally {     //無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。}

註：主動拋出異常 throw Error('xxxx')

六、函數

1、基本函數

JavaScript中函數基本上可以分為一下三類：

// 普通函數function func(arg){   return true;}     // 匿名函數var func = function(arg){   return "tony";}  // 自執行函數，定義一個函數自己執行自己f1(arg){    console.log(arg);}f1('123')//等價於(function(arg){   console.log(arg);})('123')

注意：對於JavaScript中函數參數，實際參數的個數可能小於形式參數的個數。函數內的特殊值arguments數組中封裝了所有實際參數。

function f1(a,b,c){    console.log(arguments)    console.log(a,b,c)}f1(1,2)>> [1,2]>> 1 2 undefined

2、範圍

JavaScript中每個函數都有自己的範圍，當出現函數嵌套時，就出現了*範圍鏈。當內層函數使用變數時，會根據範圍鏈從內到外一層層的迴圈，如果不存在，則異常。

切記：所有的範圍在建立函數且未執行時候就已經存在。

var arg =000;function f1(){    var arg= 111;    function f2(){        console.log(arg);    }    f2();}f1();>> 111

var arg =000;function f1(){    var arg= 111;    function f2(){        console.log(arg);    }         return f2;} ret = f1(); //f2ret();  //執行f2>> 111  //拿出f2也沒用，範圍不變

聲明提前，在JavaScript引擎“先行編譯”時進行。

//先行編譯從上到下全部變數進行聲明 不賦值function f1(){    console.log(name);}f1();>> 報錯function f1(){    //var name;    console.log(name);    var name = 'momo';}f1();>> undefined

3、閉包

閉包是指可以包含自由（未綁定到特定對象）變數的代碼塊。

「閉包」，是指擁有多個變數和綁定了這些變數的環境的運算式（通常是一個函數），因而這些變數也是該運算式的一部分。

閉包是個函數，而它「記住了周圍發生了什麼」。表現為由「一個函數」體中定義了「另個函數」

由於範圍鏈只能從內向外找，預設外部無法擷取函數內部變數。閉包，在外部擷取函數內部的變數。

function f2(){    var arg= [11,22];    function f3(){        return arg;    }    return f3;} ret = f2();ret();

4、物件導向

沒有class，只有函數

//this == self//like __init__ 構造方法function Foo (name,age) {    this.Name = name;    this.Age = age;    this.Func = function(arg){        return this.Name + arg;    }}//執行個體var obj = new Foo('alex', 18);var ret = obj.Func("sb");console.log(ret);

對於上述代碼需要注意：

• Foo充當的建構函式
• this代指對象
• 建立對象時需要使用 new

上述代碼中每個對象中均儲存了一個相同的Func函數，從而浪費記憶體。使用原型和可以解決該問題：

function Foo (name,age) {    this.Name = name;    this.Age = age;}Foo.prototype = {    GetInfo: function(){        return this.Name + this.Age    },    Func : function(arg){        return this.Name + arg;    }}//或者 推薦Foo.prototype.GetInfo = function(){return this.Name + this.Age},Foo.prototype.Func = function(arg){return this.Name + arg;}

?

JavaScript從入門到忘記