Python開發【第十一篇】：JavaScript

時間  2019-11-18
標籤 python 開發 第十一篇 javascript 欄目 Python 简体版
原文   原文鏈接

JavaScript是一門編程語言，瀏覽器內置了JavaScript語言的解釋器，因此在瀏覽器上按照JavaScript語言的規則編寫相應代碼之，瀏覽器能夠解釋並作出相應的處理。javascript

1、如何編寫

一、JavaScript代碼存在形式html

二、JavaScript代碼存放位置java

  • HTML的head中
  • HTML的body代碼塊底部(推薦)

因爲Html代碼是從上到下執行，若是Head中的js代碼耗時嚴重，就會致使用戶長時間沒法看到頁面，若是放置在body代碼塊底部，那麼即便js代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現特效慢而已。python

2、變量

JavaScript中變量的聲明是一個很是容易出錯的點，局部變量必須一個 var 開頭，若是未使用var，則默認表示聲明的是全局變量。正則表達式

1
2
3
4
5
6
7
8
9
10
11
12
13
<script  type = "text/javascript" >
 
     / /  全局變量
     name  =  'seven' ;
 
     function func(){
         / /  局部變量
         var age  =  18 ;
 
         / /  全局變量
         gender  =  "男"
     }
< / script>

JavaScript中代碼註釋：編程

  • 單行 //
  • 多行 /*  */

注意：此註釋僅在Script塊中生效。api

3、數據類型

JavaScript 中的數據類型分爲原始類型和對象類型：數組

  • 原始類型
    • 數字
    • 字符串
    • 布爾值
  • 對象類型
    • 數組
    • 「字典」
    • ...

特別的，數字、布爾值、null、undefined、字符串是不可變。瀏覽器

  null和undefined

一、數字（Number）閉包

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

轉換：

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

特殊值：

  •  NaN，非數字。可以使用 isNaN(num) 來判斷。
  • Infinity，無窮大。可以使用 isFinite(num) 來判斷。

更多數值計算：

  Math

二、字符串（String）

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

常見功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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()                    小寫
obj.split(delimiter, limit)          分割
obj.search(regexp)                   從頭開始匹配，返回匹配成功的第一個位置(g無效)
obj.match(regexp)                    全局搜索，若是正則中有g表示找到所有，不然只找到第一個。
obj.replace(regexp, replacement)     替換，正則中有g則替換全部，不然只替換第一個匹配項，
                                      $數字：匹配的第n個組內容；
                                      $&：當前匹配的內容；
                                      $`：位於匹配子串左側的文本；
                                      $'：位於匹配子串右側的文本
                                      $$：直接量$符號

三、布爾類型（Boolean）

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

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

四、數組

JavaScript中的數組相似於Python中的列表

常見功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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( )         對數組元素進行排序

4、其餘

一、序列化

  • JSON.stringify(obj)   序列化
  • JSON.parse(str)        反序列化

二、轉義

  • decodeURI( )                   URl中未轉義的字符
  • decodeURIComponent( )   URI組件中的未轉義字符
  • encodeURI( )                   URI中的轉義字符
  • encodeURIComponent( )   轉義URI組件中的字符
  • escape( )                         對字符串轉義
  • unescape( )                     給轉義字符串解碼
  • URIError                         由URl的編碼和解碼方法拋出

三、eval

JavaScript中的eval是Python中eval和exec的合集，既能夠編譯代碼也能夠獲取返回值。

  • eval() 
  • EvalError   執行字符串中的JavaScript代碼

四、正則表達式

一、定義正則表達式

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

注：定義正則表達式也能夠  reg= new RegExp()

二、匹配

JavaScript中支持正則表達式，其主要提供了兩個功能：

  • test(string)     檢查字符串中是否和正則匹配
  • exec(string)    獲取正則表達式匹配的內容，若是未匹配，值爲null，不然，獲取匹配成功的數組。

三、字符串中相關方法

　　

五、時間處理

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

  • 時間統一時間
  • 本地時間（東8區）

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

5、語句和異常

一、條件語句

JavaScript中支持兩個中條件語句，分別是：if 和 switch

  if語句
  switch語句

二、循環語句

JavaScript中支持三種循環語句，分別是：

  方式一
  方式二
  方式三

三、異常處理

1
2
3
4
5
6
7
8
9
10
try  {
     / / 這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
     / /  若是 try 代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
     / / e是一個局部變量，用來指向Error對象或者其餘拋出的對象
}
finally  {
      / / 不管 try 中代碼是否有異常拋出（甚至是 try 代碼塊中有 return 語句）， finally 代碼塊中始終會被執行。
}

注：主動跑出異常 throw Error('xxxx')

6、函數

一、基本函數

JavaScript中函數基本上能夠分爲一下三類：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/ /  普通函數
     function func(arg){
         return  true;
     }
          
/ /  匿名函數
     var func  =  function(arg){
         return  "tony" ;
     }
  
/ /  自執行函數
     (function(arg){
         console.log(arg);
     })( '123' )

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

二、做用域

JavaScript中每一個函數都有本身的做用域，當出現函數嵌套時，就出現了做用域鏈。當內層函數使用變量時，會根據做用域鏈從內到外一層層的循環，若是不存在，則異常。

切記：全部的做用域在建立函數且未執行時候就已經存在。

1
2
3
4
5
6
7
8
9
10
11
function f2(){
     var arg =  111 ;
     function f3(){
         console.log(arg);
     }
     
     return  f3;
}
 
ret  =  f2();
ret();
  View Code

注：聲明提早，在JavaScript引擎「預編譯」時進行。

更多：http://www.cnblogs.com/wupeiqi/p/5649402.html

 

三、閉包

閉包是指能夠包含自由（未綁定到特定對象）變量的代碼塊。

「閉包」，是指擁有多個變量和綁定了這些變量的環境的表達式（一般是一個函數），於是這些變量也是該表達式的一部分。

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

因爲做用域鏈只能從內向外找，默認外部沒法獲取函數內部變量。閉包，在外部獲取函數內部的變量。

1
2
3
4
5
6
7
8
9
10
function f2(){
     var arg =  [ 11 , 22 ];
     function f3(){
         return  arg;
     }
     return  f3;
}
 
ret  =  f2();
ret();

四、面向對象

1
2
3
4
5
6
7
8
9
10
11
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函數，從而浪費內存。使用原型和能夠解決該問題：

1
2
3
4
5
6
7
8
9
10
11
12
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;
     }
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程