天天看點

JavaScript

JavaScript是一門程式設計語言,浏覽器内置了JavaScript語言的解釋器,是以在浏覽器上按照JavaScript語言的規則編寫相應的代碼,浏覽器可以解釋并作出相應的處理。

1·JavaScript代碼存在形式

1 <!--方式一-->
2 <script type"text/javascript" src="js檔案"></script>
3 
4 
5 <!--方式二 -->
6 <script type"text/javascript">
7         js代碼内容...
8 </script>      

2·JavaScript代碼存在位置

·HTML的head中

·HTML的body代碼塊底部(強烈推薦)

由于html代碼是從上到下執行,如果Head中的js代碼耗時嚴重,就會導緻使用者長時間無法看到頁面,如果放置在body代碼塊底部,那麼及時js代碼耗時嚴重,也不會影響使用者看到頁面的效果,隻是js實作特效慢而已。

1 如:
2 <script src="https://www.xxxx.com"></script>
3 <script>
4     alert("123");
5 </script>
6 
7 
8 //alert(彈窗)      

3·變量

·全局變量

·局部變量

JavaScript中變量的聲明是一個非常容易出錯的點,局部變量必須以個var開頭,如果未使用var,則默人表示聲明的是全局變量·

1 var name ="xxxx"     //局部變量
2 age = 18             //全局變量      

注:單行注釋  //   多行注釋    /* */

4·基本資料類型

javascript 中的資料類型分為原始類型和對象類型:

·原始類型

  ·數字

  ·字元串

  ·布爾值

·對象類型

  ·數組

  ·"字典"

  ·...

特憋的,數字,布爾值,null,undefined,字元串是不可變的.

JavaScript

null和undefined

JavaScript
//null, undefined
null,是JavaScript語言的關鍵字,它表示以個特殊的值,常用來描述"空值".
undefined是一個特殊值,表示變量未定義.      

1·數字(Number)

JavaScript中不區分整數值和浮點數值,java中所有數字均使用浮點數值表示·

轉換:

  ·parseIne(變量名) 将某個值轉換成數字,不成功則返現NaN

  ·parseFloat(變量名)将某個值轉換成浮點數,不成功則返現NaN

特殊值:

  ·NaN:非數字,可使用isNaN(num)來判斷·

  ·Infinity:無窮大,可使用isFinite(num)來判斷·

更多數值計算:

JavaScript
JavaScript
常量

Math.E
常量e,自然對數的底數·

Math.LN10
10的自然對數·

Math.LN2
2的自然對數·

Math.LOG10E
以10為底的e的對數·

Math.LOG2E
以2為底的e的對數·

Math.PI
常量figs/U03C0.gif·

Math.SQRT1_2
2的平方根除以1·

Math.SQRT2
2的平方根·

##靜态函數

Math.abs()
計算絕對值·

Math.acos()
計算反餘弦值·

Math.asin( )
計算反正弦值。

Math.atan( )
計算反正切值。

Math.atan2( )
計算從X軸到一個點的角度。

Math.ceil( )
對一個數上舍入。

Math.cos( )
計算餘弦值。

Math.exp( )
計算e的指數。

Math.floor( )
對一個數下舍人。

Math.log( )
計算自然對數。

Math.max( )
傳回兩個數中較大的一個。

Math.min( )
傳回兩個數中較小的一個。

Math.pow( )
計算xy。

Math.random( )
計算一個随機數。

Math.round( )
舍入為最接近的整數。

Math.sin( )
計算正弦值。

Math.sqrt( )
計算平方根。

Math.tan( )
計算正切值。      

math

2·字元串(String)

字元串是由字元組成的數組,但在JavaScript中字元串是不可變的:可以通路字元串任意位置的文本,但是JavaScript并未提供修改已知字元串内容的方法·

常見功能:

a = "huanyingguanglin"
"huanyingguanglin"
a.length    (檢視長度)
16


a = " wyc "
" wyc "
a.trim()       (去除字元串的兩邊空格)
"wyc"
a.trimleft()      (去除字元串的左邊空格)
a.trimright      (去除字元串的右邊空格)



a = "nihao"
"nihao"
a.charAt(2)     (傳回字元串中的參數的字元)!參數可以定義,看字元串的長度定義
"h"


      

a = "wyc"

"wyc"

b = "nihao"

"nihao"

a.concat(b)             (字元串的拼接)

"wycnihao"

a = "wycnihao"

a.indexOf("ni",2)     (尋找子序列位置)

3

a.lastIndexOf("yc",2)      (子序列位置 )

1

a.substring("yc",4)      (根據索引擷取子序列)

"wycn"

a.slice(1,6)          (切片,從字元串的1位置到6位置)

"ycnih"

a.toLowerCase()       (将字元串變小寫)

a.toUpperCase()      (将字元串變大寫)

"WYCNIHAO"

a.split("cn")       (字元串的分割)

["wy", "ihao"]

a = "wycwyc9wycwyc"

"wycwyc9wycwyc"

a.split(/(\d+)/)          (字元串的分割,支援正則分割)

["wycwyc", "9", "wycwyc"]

a = "wycwycwyc"

"wycwycwyc"

a.match(/w/)         (全局比對)

["w"]

a.match(/w/g)       (比對的元素後邊加個g,表示把字元串裡邊所有的w全部比對出來)

["w", "w", "w"]

a.search(/y/)        (比對出元素的位置)

a = "wyc7wycwyc9"

"wyc7wycwyc9"

a.replace(/(\d+)/g,"X")      (将比對到的數字全部替換為"X")

"wycXwycwycX"

a.replace(/(\d+)/g,"$&"+"L")   (将比對到的數字後邊的元素替換為“L”)    

"wyc7Lwycwyc9L"

a.replace(/(\d+)/g,"&")         (将所有比對到的數字替換成艾特符号“&”)

"wyc&wycwyc&"

a.replace(/(\d+)\w+(\d+)/g,"$2$1")      (将比對到數字的7,9交換一下位置)

"wyc97"

a.replace(/\d+/,"$`")       (用于比對左側文本)

"wycwycwycwyc9"

a.replace(/(\d+)\w+(\d+)/g,"$$")        (直接量"$"符号)

"wyc$"

3·布爾值 

布爾類型僅包含真假,與python不同的是,python第一個字母是大寫,("True","False"),則JavaScript裡是小寫("true","false")

· ==   (比較值相等)

· !=     (不等于)

· ===    (比較值和類型相等)

· !===    (不等于)

·  ||      (或)

·  &&       (且)

4·數組

JavaScript中的數組類似于python中的清單[]

1 obj.length      //數組的大小
 2 
 3 obj.push(ele)       //尾部追加元素
 4 
 5 obj.pop         //尾部擷取元素
 6 
 7 obj.shift()     //頭部移除元素
 8 
 9 obj.splice(start,deleteCount,value,......)       //插入·删除或替換數組的元素
10 
11                       obj.splice(n,0,val)    //指定位置插入元素
12                       obj.splice(n,1,val)    //指定位置替換元素
13                       obj.splice(n,1)         //指定位置删除元素
14 
15 obj.slice()      //切片
16 
17 obj.reverse()      //反轉
18 
19 onj.join(sep)         //将數組元素連結起來以建構一個字元串
20 
21 obj.concat(val,...)        //連接配接數組
22 
23 obj.sort()         //對數組元素進行排序      
//檢視數組元素的長度
a = [11,22,33,44,55]
[11, 22, 33, 44, 55]
a.length
5


// 給數組尾部添加元素
a.push(66)
6
a
[11, 22, 33, 44, 55, 66]


//删除數組元素
[11, 22, 33, 44, 55, 66]
ret = a.pop()
66
ret
66
a
[11, 22, 33, 44, 55]



//在數組頭部添加元素
[11, 22, 33, 44, 55]
a.unshift(77)
6
a
[77, 11, 22, 33, 44, 55]


//在數組頭部移除元素
[77, 11, 22, 33, 44, 55]
a.shift()
77
a
[11, 22, 33, 44, 55]



//splice即删除既添加
a
[11, 22, 33, 44, 55]
a.splice(1,0,"wyc")        (表示在1的位置,0表示不删除,"wyc"表示在1的               
                                            位置添加進去)
[]
a
[11, "wyc", 22, 33, 44, 55]



//splice能添加多個元素
[11, "wyc", 22, 33, 44, 55]
a.splice(1,0,"wyc","nihao")     (splice,可以在數組一次裡邊添加多個元素       )
[]
a
[11, "wyc", "nihao", "wyc", 22, 33, 44, 55]      


//splice删除
[11, "wyc", "nihao", "wyc", 22, 33, 44, 55]
a.splice(1,2)      (表示從數組的第一個位置删除兩個元素)
["wyc", "nihao"]
a
[11, "wyc", 22, 33, 44, 55]


//splice替換
[11, "nihao", "wyc", 22, 33, 44, 55]
a.splice(1,1,"hi")     (表示在元素1的位置删除1在添加一個新的元素)
["nihao"]
a
[11, "hi", "wyc", 22, 33, 44, 55]


      
//切片
a
[11, "hi", "wyc", 22, 33, 44, 55]
a.slice(1,2)
["hi"]

 

//反轉

[11, "hi", "wyc", 22, 33, 44, 55]
a.reverse()          (将數組元素反轉過來)
[55, 44, 33, 22, "wyc", "hi", 11]

 

 

//将數組元素拼接起來(join)

[55, 44, 33, 22, "wyc", "hi", 11]
a.join("_")             //将數組元素用下滑線拼接起來
"55_44_33_22_wyc_hi_11"

 

//sort排序

[55, 44, 33, 22, "wyc", "hi", 11]
a.sort()     //将數組進行排序
[11, 22, 33, 44, 55, "hi", "wyc"]      

四·其他  

1丶序列化

·JSON.stringify(obj)      序列化

·JSON.parse(str)           反序列化

JavaScript
JavaScript
a = 3
3
JSON.stringify(a)        (将a序列化成字元串)
"3"
JSON.parse(a)          (将a在反序列化成整數)
3      

序列化,反序列化

2丶轉義

·decodeURI()     URI中為轉義的字元

·decodeURIComponent()       URI元件中的未轉義字元

·encodeURI()            URI中的轉義字元

·encodeURIComponent()         轉義URI元件中的字元

·escape()             對字元串的轉義

·unescape()          給轉義字元串解碼

·URIError               由URI的編碼和解碼方法抛出

3丶eval

JavaScript中的eval是python中eval和exec的合集,既可以編譯代碼也可以擷取傳回值·

·eval()

·EvalError 執行字元串中的JavaScript代碼

4丶正規表達式

JavaScript中支援正規表達式,其主要提供了兩個功能:

  ·test(string)   用于檢測正則是否比對

    ·exec(string)  用于擷取正則比對的内容

注:定義正規表達式時,"g","i","m"分别表示去全局比對,忽略大小寫,多行比對·

5丶時間處理

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

·時間統一時間

·本地時間(東8區)

更多操作參見:http://www.shouce.ren/api/javascript/main.html

五丶語句和異常

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中支援三種循環語句,分别是:

JavaScript
JavaScript
var names = ["wyc","nihao"];
for(var i=0;i>names.lengith;i++){
     console.log(i);
     console.log(name[i]);
}      

方式一

JavaScript
JavaScript
var name = ["wyc","nihao"]
for (var index in name ){
    console.log(index);
    console.log(name[index]);
}      

方式二

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

View Code

3丶異常處理

JavaScript
JavaScript
1 try{
 2      //這段代碼從上到下運作,其中任何一個語句抛出異常該代碼塊就結束運作·
 3 }
 4 catch(e){
 5     //如果try代碼中抛出異常,catch代碼塊中的代碼就會被執行.
 6     //e是一個局部變量,用來指向Error對象或者其他抛出的對象
 7 }
 8 finally{
 9    //無論try中代碼是否有異常抛出(甚至是try代碼塊中有return語句),finally代碼塊中始終會被執行·
10 }      

注:主動跑出異常throw Error("xxxxx")

六丶函數

1·基本函數

javascript中函數基本可分為一下三類:

JavaScript
JavaScript
//普通函數
function function(arg){        //建立函數
    return true;  
}

//匿名函數
var func = function(arg){
    return "tony";
}

//自動執行函數
(function(arg){
    console.log(arg);
})("123")      

注意:對于javascript中函數參數,十幾參數的個數可能小于形參的個數,函數内的特殊值arguments中封裝了所有的實際參數·

2·作用域

javascript中每個函數都有自己的的作用域,當出現函數嵌套時,就出現了作用域鍊,當内層函數使用變量時,會根據作用域鍊從内到外一層層的循環,如果不存在則異常·

!切記:所有的作用域在建立函數且未執行的時候就已經存在了·

1 function f2(){
 2     var arg = 111;
 3     function f3(){
 4         conlose.log(arg);
 5     }
 6     return f3();
 7 }
 8 
 9 ret = f2();        //執行函數
10 ret();      
JavaScript
JavaScript
function f2(){
    var arg = [11,22];
    function f3(){
        console.log(arg);
    }
    arg = [44,55];
    return f3;
}
ret = f2();
ret();      

注:聲明提前,在javascript引擎"預編譯"時進行·

更多:

3丶閉包

[閉包],是指擁有多個變量和綁定了這些變量的環境的表達式(通常是一個函數),因而這些變量也是該表達式的一部分·

閉包是個函數,而他[記住了周圍發生了什麼]·表現為由[一個函數]體中定義了[另一個函數],由于作用域鍊隻能從内向外找,預設外部無法擷取函數内部變量.閉包、在外部擷取函數内部的變量.

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

ret = f2();
ret();      

 面向對象·

function Foo (name,age){
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
           return this.name + arg;
    }
}

var obj = new Foo("Wyc",19);
var ret = obj.Func("nihao");
console.log(ret);
      

對于上述代碼需要注意:

  · Foo充當的構造方法         在python構造方法代指的是(__init__)

  · thif 代指對象

  · 建立對象是需要使用 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;
    }
}