【Python之路】第十二篇

highoo 2019-03-20

展開全文

JavaScript 歷史

1992年Nombas開發(fā)出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).后將其改名ScriptEase.(客戶端執(zhí)行的語言)
Netscape(網(wǎng)景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產(chǎn)品中開發(fā)出一套livescript的腳本語言.Sun和Netscape共同完成.后改名叫Javascript
微軟隨后模仿在其IE3.0的產(chǎn)品中搭載了一個JavaScript的克隆版叫Jscript.
為了統(tǒng)一三家,ECMA(歐洲計算機制造協(xié)會)定義了ECMA-262規(guī)范.國際標(biāo)準(zhǔn)化組織及國際電工委員會（ISO/IEC）也采納 ECMAScript 作為標(biāo)準(zhǔn)（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有著不同的程度的成功和失?。?ECMAScript 作為 JavaScript 實現(xiàn)的基礎(chǔ)。EcmaScript是規(guī)范.

ECMAScript

　　盡管 ECMAScript 是一個重要的標(biāo)準(zhǔn)，但它并不是 JavaScript 唯一的部分，當(dāng)然，也不是唯一被標(biāo)準(zhǔn)化的部分。

　　實際上，一個完整的 JavaScript 實現(xiàn)是由以下 3 個不同部分組成的：

核心（ECMAScript）
文檔對象模型（DOM） Document object model (整合js，css，html)
瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
Javascript 在開發(fā)中絕大多數(shù)情況是基于對象的.也是面向?qū)ο蟮?

ECMAScript 描述了以下內(nèi)容：

語法
類型
語句
關(guān)鍵字
保留字
運算符
對象 (封裝繼承多態(tài)) 基于對象的語言.使用對象.

一、如何編寫

1、JavaScript代碼存在形式

<script type="text/javascript" src="JS文件"></script>

<script type="=text/javascript">

Js代碼內(nèi)容...

</script>

2、JavaScript代碼存放位置

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

　　由于Html代碼是從上到下執(zhí)行，如果Head中的js代碼耗時嚴(yán)重，就會導(dǎo)致用戶長時間無法看到頁面；

　　如果放置在body代碼塊底部，那么即使js代碼耗時嚴(yán)重，也不會影響用戶看到頁面效果，只是js實現(xiàn)特效慢而已。

二、變量

　　JavaScript中變量的聲明是一個非常容易出錯的點，局部變量必須一個 var 開頭，如果未使用var，則默認(rèn)表示聲明的是全局變量。

<script type="text/javascript">

// 全局變量

name = 'seven';

function func(){

// 局部變量

var age = 18;

// 全局變量

gender = "男"

}

</script>

JavaScript中代碼注釋：

單行 //
多行 /* */

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

JavaScript中代碼末尾需要加上 ; ,不添加也可以,不推薦,防止代碼壓縮帶來的錯誤!

書寫規(guī)范：

Camel 標(biāo)記法
首字母是小寫的，接下來的字母都以大寫字符開頭。例如：
var myTestValue = 0, mySecondValue = "hi";

Pascal 標(biāo)記法
首字母是大寫的，接下來的字母都以大寫字符開頭。例如：
Var MyTestValue = 0, MySecondValue = "hi";

匈牙利類型標(biāo)記法
在以 Pascal 標(biāo)記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數(shù)，s 表示字符串，如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";

標(biāo)識符：

由不以數(shù)字開頭的字母、數(shù)字、下劃線(_)、美元符號($)組成
常用于表示函數(shù)、變量等的名稱
例如：_abc,$abc,abc,abc123是標(biāo)識符，而1abc不是
JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再定義為標(biāo)識符

三、數(shù)據(jù)類型

JavaScript 中的數(shù)據(jù)類型分為基本數(shù)據(jù)類型和引用數(shù)據(jù)類型：

特別的:數(shù)字、布爾值、null、undefined、字符串是不可變,會重新在內(nèi)存中創(chuàng)建一份。

null 和 undefined

1、數(shù)字（Number）

JavaScript中不區(qū)分整數(shù)值和浮點數(shù)值，JavaScript中所有數(shù)字均用浮點數(shù)值表示。

創(chuàng)建:

num = 123;　　直接創(chuàng)建一個原始值
num = new Number(123); 根據(jù)Number類創(chuàng)建一個對象

轉(zhuǎn)換：

parseInt(..) 將某值轉(zhuǎn)換成數(shù)字，不成功則NaN
parseFloat(..) 將某值轉(zhuǎn)換成浮點數(shù)，不成功則NaN

特殊值：

NaN，非數(shù)字?？墒褂?isNaN(num) 來判斷。
Infinity，無窮大?？墒褂?isFinite(num) 來判斷。

更多數(shù)值計算：

Math

2、字符串（String）

　　字符串是由字符組成的數(shù)組，但在JavaScript中字符串是不可變的：可以訪問字符串任意位置的文本，但是JavaScript并未提供修改已知字符串內(nèi)容的方法。

是由Unicode字符、數(shù)字、標(biāo)點符號組成的序列
字符串常量首尾由單引號或雙引號括起
JavaScript中沒有字符類型
常用特殊字符在字符串中的表達(dá)
字符串中部分特殊字符必須加上右劃線\
常用的轉(zhuǎn)義字符 \n:換行 \':單引號 \":雙引號 \\:右劃線

<script>

var str="\u4f60\u597d\n歡迎來到\"JavaScript世界\"";

alert(str);

</script>

常見功能：

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) 根據(jù)索引獲取子序列

obj.slice(start, end) 切片

obj.toLowerCase() 大寫

obj.toUpperCase() 小寫

obj.split(delimiter, limit) 分割

obj.search(regexp) 從前往后找，返回匹配成功的第一個位置(g無效)

obj.match(regexp)                    全局搜索，如果正則中有g(shù)表示找到全部，否則只找到第一個。

obj.replace(regexp, replacement)     替換，正則中有g(shù)則替換所有，否則只替換第一個匹配項，

$數(shù)字：匹配的第n個組內(nèi)容；

$&：當(dāng)前匹配的內(nèi)容；

$`：位于匹配子串左側(cè)的文本；

$'：位于匹配子串右側(cè)的文本

$$：直接量$符號

3、布爾類型（Boolean）

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

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

if(temp){
        console.log("aaaaa")       // temp : new Object() , []
    }else {
        console.log("bbbbb")       // temp : false , 0 , null , undefined
    }

4、數(shù)組

JavaScript中的數(shù)組類似于Python中的列表

常見功能：

obj.length 數(shù)組的大小

obj.push(ele) 尾部追加元素

obj.pop() 尾部獲取一個元素

obj.unshift(ele) 頭部插入元素

obj.shift() 頭部移除元素

obj.splice(start, deleteCount, value, ...) 插入、刪除或替換數(shù)組的元素

obj.splice(n,0,val) 指定位置插入元素

obj.splice(n,1,val) 指定位置替換元素

obj.splice(n,1) 指定位置刪除元素

obj.slice( ) 切片

obj.reverse( ) 反轉(zhuǎn)

obj.join(sep) 將數(shù)組元素連接起來以構(gòu)建一個字符串

obj.concat(val,..) 連接數(shù)組

obj.sort( ) 對數(shù)組元素進(jìn)行排序

四、ECMAScript 運算符

ECMAScript 算數(shù)運算符

　　加(＋)、減(－)、乘(*) 、除(/) 、余數(shù)(% ) 加、減、乘、除、余數(shù)和數(shù)學(xué)中的運算方法一樣　　例如：9/2=4.5，4*5=20，9%2=1

　　- 除了可以表示減號還可以表示負(fù)號例如：x=-y

　　+除了可以表示加法運算還可以用于字符串的連接例如："abc"+"def"="abcdef"

遞增(＋＋) 、遞減(－－)

　　假如x=2，那么x++表達(dá)式執(zhí)行后的值為3，x--表達(dá)式執(zhí)行后的值為1

　　i++相當(dāng)于i=i+1，i--相當(dāng)于i=i-1

　　遞增和遞減運算符可以放在變量前也可以放在變量后：--i

一元加減法：

    var a = 1;
    var b = 1;
    a = -a;     //a=-1

    var c = "10";
    c = +c;     //類型轉(zhuǎn)換

    var d = "eric";
    d = +d;
    alert(d);   //NaN:  屬于Number類型的一個特殊值,當(dāng)遇到將字符串轉(zhuǎn)成數(shù)字無效時,就會得到一個NaN數(shù)據(jù)
    alert(typeof(d));   // Number

    //NaN特點:
    
    var n=NaN;
    
    alert(n>3);
    alert(n<3);
    alert(n==3);
    alert(n==NaN);
    
    alert(n!=NaN);    //NaN參與的所有的運算都是false,除了!=

ECMAScript 邏輯運算符

等于 ( == )  、不等于( != ) 、 大于( > ) 、 小于( < ) ?大于等于(>=) 、小于等于(<=)
與 (&&) 、或(||) 、非(!)
1 && 1 = 1  1 || 1 = 1
1 && 0 = 0  1 || 0 = 1
0 && 0 = 0  0 || 0 = 0

!0=1
!1=0

邏輯 AND 運算符(&&)

　　邏輯 AND 運算的運算數(shù)可以是任何類型的，不止是 Boolean 值。

　　如果某個運算數(shù)不是原始的 Boolean 型值，邏輯 AND 運算并不一定返回 Boolean 值：

- 如果某個運算數(shù)是 null，返回 null。
- 如果某個運算數(shù)是 NaN，返回 NaN。

- 如果某個運算數(shù)是 undefined，返回undefined。

邏輯 OR 運算符(||)

　　與邏輯 AND 運算符相似，如果某個運算數(shù)不是 Boolean 值，邏輯 OR 運算并不一定返回 Boolean 值

ECMAScript等性運算符

執(zhí)行類型轉(zhuǎn)換的規(guī)則如下：

如果一個運算數(shù)是 Boolean 值，在檢查相等性之前，把它轉(zhuǎn)換成數(shù)字值。false 轉(zhuǎn)換成 0，true 為 1。
如果一個運算數(shù)是字符串，另一個是數(shù)字，在檢查相等性之前，要嘗試把字符串轉(zhuǎn)換成數(shù)字。
如果一個運算數(shù)是對象，另一個是字符串，在檢查相等性之前，要嘗試把對象轉(zhuǎn)換成字符串。
如果一個運算數(shù)是對象，另一個是數(shù)字，在檢查相等性之前，要嘗試把對象轉(zhuǎn)換成數(shù)字。

在比較時，該運算符還遵守下列規(guī)則：

值 null 和 undefined 相等。
在檢查相等性時，不能把 null 和 undefined 轉(zhuǎn)換成其他值。
如果某個運算數(shù)是 NaN，等號將返回 false，非等號將返回 true。
如果兩個運算數(shù)都是對象，那么比較的是它們的引用值。如果兩個運算數(shù)指向同一對象，那么等號返回 true，否則兩個運算數(shù)不等。

ECMAScript 關(guān)系運算符

1 2	`var bResult` `=` `"Blue"` `<` `"alpha";` `alert(bResult);` `//輸出 true`

在上面的例子中，字符串 "Blue" 小于 "alpha"，因為字母 B 的字符代碼是 66，字母 a 的字符代碼是 97。

比較數(shù)字和字符串

1 2	`var bResult` `=` `"25"` `<` `3;` `alert(bResult);` `//輸出` `"false"`

比較運算符兩側(cè)如果一個是數(shù)字類型,一個是其他類型,會將其類型轉(zhuǎn)換成數(shù)字類型.

比較運算符兩側(cè)如果都是字符串類型,比較的是最高位的asc碼,如果最高位相等,繼續(xù)取第二位比較.

五、其他

1、序列化

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

2、轉(zhuǎn)義

decodeURI( ) URl中未轉(zhuǎn)義的字符
decodeURIComponent( ) URI組件中的未轉(zhuǎn)義字符
encodeURI( ) URI中的轉(zhuǎn)義字符
encodeURIComponent( ) 轉(zhuǎn)義URI組件中的字符　　 #全部轉(zhuǎn)義,不僅是最后的值
escape( ) 對字符串轉(zhuǎn)義
unescape( ) 給轉(zhuǎn)義字符串解碼
URIError 由URl的編碼和解碼方法拋出

3、eval

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

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

4、正則表達(dá)式

1、定義正則表達(dá)式

/.../ 用于定義正則表達(dá)式　　
/.../g 表示全局匹配　　　　　　
/.../i 表示不區(qū)分大小寫　　
/.../m 表示多行匹配

JS正則匹配時本身就是支持多行，此處多行匹配只是影響正則表達(dá)式^和$，m模式也會使用^$來匹配換行的內(nèi)容)

var pattern = /^Java\w*/gm;

var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";

result = pattern.exec(text)

注：定義正則表達(dá)式也可以 reg= new RegExp()

2、匹配

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

test(string) 檢查字符串中是否和正則匹配

n = 'uui99sdf'

reg = /\d+/

reg.test(n) ---> true

# 只要正則在字符串中存在就匹配，如果想要開頭和結(jié)尾匹配的話，就需要在正則前后加 ^和$

exec(string) 獲取正則表達(dá)式匹配的內(nèi)容，如果未匹配，值為null，否則，獲取匹配成功的數(shù)組。

+ View Code ?

獲取正則表達(dá)式匹配的內(nèi)容，如果未匹配，值為null，否則，獲取匹配成功的數(shù)組。

非全局模式

獲取匹配結(jié)果數(shù)組，注意：第一個元素是第一個匹配的結(jié)果，后面元素是正則子匹配（正則內(nèi)容分組匹配）

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)

全局模式

需要反復(fù)調(diào)用exec方法，來一個一個獲取結(jié)果，直到匹配獲取結(jié)果為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)

3、字符串中相關(guān)方法

+ View Code ?

obj.search(regexp)                   獲取索引位置，搜索整個字符串，返回匹配成功的第一個位置(g模式無效)

obj.match(regexp)                    獲取匹配內(nèi)容，搜索整個字符串，獲取找到第一個匹配內(nèi)容，如果正則是g模式找到全部

obj.replace(regexp, replacement)     替換匹配替換，正則中有g(shù)則替換所有，否則只替換第一個匹配項，

$數(shù)字：匹配的第n個組內(nèi)容；

$&：當(dāng)前匹配的內(nèi)容；

$`：位于匹配子串左側(cè)的文本；

$'：位于匹配子串右側(cè)的文本

$$：直接量$符號

5、時間處理

JavaScript中提供了時間相關(guān)的操作，時間操作中分為兩種時間：

時間統(tǒng)一時間
本地時間（東8區(qū)）

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

六、語句和異常

1、條件語句

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

if語句

switch語句

2、循環(huán)語句

JavaScript中支持三種循環(huán)語句，分別是：

方式一

方式二

方式三

3、異常處理

try {

//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結(jié)束運行

}

catch (e) {

// 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執(zhí)行。

//e是一個局部變量，用來指向Error對象或者其他拋出的對象

}

finally {

//無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執(zhí)行。

}

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

七、函數(shù)

1、基本函數(shù)

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

// 普通函數(shù)

function func(arg){

return true;

}

// 匿名函數(shù)

var func = function(arg){

return "tony";

}

// 自執(zhí)行函數(shù)

(function(arg){

console.log(arg);

})('123')

注意：對于JavaScript中函數(shù)參數(shù)，實際參數(shù)的個數(shù)可能小于形式參數(shù)的個數(shù)，函數(shù)內(nèi)的特殊值arguments中封裝了所有實際參數(shù)。

2、作用域

JavaScript中每個函數(shù)都有自己的作用域，當(dāng)出現(xiàn)函數(shù)嵌套時，就出現(xiàn)了作用域鏈。當(dāng)內(nèi)層函數(shù)使用變量時，會根據(jù)作用域鏈從內(nèi)到外一層層的循環(huán)，如果不存在，則異常。

切記：所有的作用域在創(chuàng)建函數(shù)且未執(zhí)行時候就已經(jīng)存在。

function f2(){

var arg= 111;

function f3(){

console.log(arg);

}

return f3;

}

ret = f2();

ret();

View Code

注：聲明提前，在JavaScript引擎“預(yù)編譯”時進(jìn)行。

3、閉包

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

「閉包」，是指擁有多個變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個函數(shù)），因而這些變量也是該表達(dá)式的一部分。

閉包是個函數(shù)，而它「記住了周圍發(fā)生了什么」。表現(xiàn)為由「一個函數(shù)」體中定義了「另個函數(shù)」

由于作用域鏈只能從內(nèi)向外找，默認(rèn)外部無法獲取函數(shù)內(nèi)部變量。閉包，在外部獲取函數(shù)內(nèi)部的變量。

function f2(){

var arg= [11,22];

function f3(){

return arg;

}

return f3;

}

ret = f2();

ret();

4、面向?qū)ο?/strong>

?
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充當(dāng)?shù)臉?gòu)造函數(shù)

this代指對象

創(chuàng)建對象時需要使用 new

上述代碼中每個對象中均保存了一個相同的Func函數(shù)，從而浪費內(nèi)存。使用原型可以解決該問題：

?
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;
    }
}

　　