本章內容：
- 簡介
- 定義
- 注釋
- 引入文件
- 變量
- 運算符
- 算術運算符
- 比較運算符
- 邏輯運算符
- 數據類型
-
- 數字
- 字符串
- 布爾類型
- 數組
- Math
- 語句
-
- 條件語句（if、switch）
- 循環語句（for、for in、while、do-while）
- label語句
- 異常處理
- 函數
-
- 定義函數3種方式
- 函數參數（arguments）
- 作用域與作用鏈
- 閉包
- 面向對象（特性，構造模式，原型模式prototype）
- prototype 驗證方法（isPrototypeOf、hasOwnProperty、in）
- 其它
-
- 序列化
- 轉義
- eval
- 正則表達式
- 時間處理
簡介
定義
javascript是一門動態弱類型的解釋型編程語言，增強頁面動態效果，實現頁面與用戶之間的實時動態的交互。
javascript是由三部分組成：ECMAScript、DOM、BOM
- ECMAScript由ECMA-262定義，提供核心語言功能（ECMA是歐洲計算機制造商協會）
- DOM(Document Object Model)文檔對象模型，提供訪問和操作網頁內容的方法和接口
- BOM(Browser Object Model)瀏覽器對象模型，提供與瀏覽器交互的方法和接口
注釋
JavaScript中代碼注釋：
- 單行 //
- 多行 /* */
引入文件
1. 引入外部文件
<script type="text/javascript" src="JS文件"></script>
2. 存放在HTML的<head>或<body>中
<script type="text/javascript">
Js代碼內容
</script>
- HTML的head中
- HTML的body代碼塊底部(推薦)
3. 為什么要放在<body>代碼塊底部？
- HTML代碼從上到下執行，先加載CSS，避免html出現無樣式狀態；
- 將JavaScript代碼塊放在<body>最后，可以讓網頁盡快的呈現給用戶，減少瀏覽者的等待時間，避免因為JS代碼塊阻塞網頁的呈現。
變量
需要注意的是：局部變量必須以 var 開頭申明，如果不寫 var 則為全局變量
<script type="text/javascript">
// 全局變量
name = 'nick';
function func(){
// 局部變量
var age = 18;
// 全局變量
gender = "man"
}
</script>
注：需要注意變量提升，就是把變量位置放到函數體的最上方
運算符
1. 算術運算符
| 一元算術 | |
| + 一元加，數值不會產生影響 | 對非數值應用一元加運算時，會調用Number()轉型函數對這個值進行轉換 |
| - 一元減，轉換為負數 | ~ |
| ++ 遞增1 | 通過Number()轉型為數字，再加1，再重新賦值給操作數值 |
| -- 遞減1 | ~ |
| 二元算術 | |
| + 加法 | |
| - 減法 | |
| * 乘法 | |
| / 除法 | |
| % 取模 | |
1> 如果其中一個操作數是對象，則對象會轉換為原始值：日期對象通過toString()方法執行轉換，其他對象通過valueOf()方法執行轉換。如果結果還不是原始值，則再使用toString()方法轉換 2> 在進行了對象到原始值的轉換后，如果其中一個操作數是字符串的話，另一個操作數也會轉換成字符串，進行字符串拼接 3> 兩個操作數都將轉換成數字或NaN，進行加法操作
2. 比較運算符
| === 嚴格運算符 | 比較過程沒有任何類型轉換 |
| !== 嚴格運算符 | ===的結果取反 |
| == 相等運算符 | 如果兩個操作值不是同一類型，相等運算符會嘗試進行一些類型轉換，然后再進行比較 |
| != 不相等運算符 | ==的結果取反 |
| > 大於運算符 | |
| >= 大於等於運算符 | |
| < 小於運算符 | |
| <= 小於等於運算符 |
1> 如果兩個值類型不同則返回false 2> 如果兩個值類型相同，值相同，則返回true，否則返回false 3> 如果兩個值引用同一個對象，則返回true，否則，返回false console.log([] === []);//false console.log({} === {});//false var a = {}; b = a; console.log(a === b);//true
對象類型和原始類型比較： 1> 對象類型會先使用valueOf()轉換成原始值，如果結果還不是原始值，則再使用toString()方法轉換，再進行比較（日期類只允許使用toString()方法轉換為字符串） 2> 在對象轉換為原始值之后，如果兩個操作數都是字符串，則進行字符串的比較 3> 在對象轉換為原始值之后，如果至少有一個操作數不是字符串，則兩個操作數都將通過Number()轉型函數轉換成數字進行數值比較 注：如果一個值是null，另一個值是undefined，則返回true; console.log(null == undefined);//true 如果一個值是null，另一個值是0，則返回tfalse; console.log(null == 0);//false 空字符串或空格字符串會轉成0 console.log(null == []);//false console.log(null == '');//false console.log([] == ' ');//false，相當於'' == ' ' console.log([] == '');//true，相當於'' == '' console.log(0 == '');//true
數字和字符串比較： 1> 如果操作值是對象，則這個對象將先使用valueOf()轉換成原始值，如果結果還不是原始值，則再使用toString()方法轉換 2> 在對象轉換為原始值之后，如果兩個操作數都是字符串，則按照unicode字符的索引順序對兩個字符串進行比較 3> 在對象轉換為原始值之后，如果至少有一個操作數不是字符串，則兩個操作數都轉換成數字進行比較 console.log('B' > 'a');//false console.log('b' > 'a');//true console.log(9 > '2');//true
3. 邏輯運算符
| ! 非（兩個!!表示Boolean()轉型函數） |
返回一個布爾值 |
| && 與 | 兩個操作都為true時返回true，否則返回false（返回值不一定是布爾值），可以多個連用（..&&..&&..） |
| || 或 | 兩個操作都是false時返回false，否則返回true（返回值不一定是布爾值），可以多個連用（..||..||..） |
//七個假值：
console.log(!!undefined);//false
console.log(!!null);//false
console.log(!!0);//false
console.log(!!-0);//false
console.log(!!NaN);//false
console.log(!!'');//false
console.log(!!false);//false
console.log(!!{});//true
console.log(!![]);//true
1> 取代if語句 //前面條件成立則運行后面操作 (a == b) && dosomething(); 2> 用於回調函數 //若沒有給參數a傳值，則a默認為undefined假值，所以不執行a()。 function fn(a){ a && a(); }
1> 變量設置為默認值 //如果沒有向參數a傳入任何參數，則將該參數設置為空對象 function func(a){ a = a || {}; }
數據類型
特殊值：
- null 表示一個空對象指針，常用來描述"空值"；
- undefined 表示變量未定義。
1、數字（Number）
JavaScript中不區分整數和浮點數，所有數字均用浮點數值表示。
轉換：
- parseInt(..) 將某值轉換成整數，不成功則NaN
- parseFloat(..) 將某值轉換成浮點數，不成功則NaN
特殊值：
- NaN，非數字。可以使用 isNaN(num) 來判斷。
- Infinity，無窮大。可以使用 isFinite(num) 來判斷。
| Number | 對數字的支持 |
| Number.MAX_VALUE | 最大數值 |
| Number.MIN_VALUE | 最小數值 |
| Number.NaN | 非數字 |
| Number.NEGATIVE_INFINITY | 負無窮大 |
| Number.POSITIVE_INFINITY | 正無窮大 |
| Number.toExponential( ) | 返回四舍五入的科學計數法，加參數為保留幾位 |
| Number.toFixed( ) | 小數點后面的數字四舍五入，加參數為保留幾位 |
| Number.toPrecision( ) | 四舍五入，自動調用toFixed()或toExponential() |
| Number.toLocaleString( ) | 把數字轉換成本地格式的字符串 |
| Number.toString( ) | 將數字轉換成字符串 |
| Number.valueOf( ) | 返回原始數值 |
2、字符串（String）
| String.length | 字符串的長度 |
| String.trim() | 移除空白 |
| String.trimLeft() | 移除左側空白 |
| String.trimRight() | 移除右側空白 |
| String.concat(value, ...) | 拼接 |
| String.slice(start, end) | 切片 |
| String.split( ) | 分割 |
| String.search( ) | 從頭開始匹配，返回匹配成功的第一個位置(g無效) |
| String.match( ) | 全局搜索，如果正則中有g表示找到全部，否則只找到第一個 |
| String.replace( ) | 替換，正則中有g則替換所有，否則只替換第一個匹配項；
$數字：匹配的第n個組內容；
$&：當前匹配的內容；
$`：位於匹配子串左側的文本；
$'：位於匹配子串右側的文本
$$：直接量$符號
|
| String.charAt( ) | 返回字符串中的第n個字符 |
| String.charCodeAt( ) | 返回字符串中的第n個字符的代碼 |
| String.fromCharCode( ) | 從字符編碼創建—個字符串 |
| String.indexOf( ) | 查找子字符串位置 |
| String.lastIndexOf( ) | 查找子字符串位置 |
| String.localeCompare( ) | 用本地特定的順序來比較兩個字符串 |
| String.substr( ) | 抽取一個子串 |
| String.substring( ) | 返回字符串的一個子串 |
| String.toLocaleLowerCase( ) | 把字符串轉換小寫(針對地區，在不知道程序在哪個語言環境中運行時用) |
| String.toLocaleUpperCase( ) | 將字符串轉換成大寫(針對地區) |
| String.toLowerCase( ) | 小寫 |
| String.toUpperCase( ) | 大寫 |
| String.toString( ) | 返回原始字符串值 |
| String.toString() | 返回原始字符串值 |
| String.valueOf( ) | 返回原始字符串值 |
\0 空字節 \n 換行 \t 制表 \b 空格 \r 回車 \f 進紙 \\ 斜杠 \' 單引號 \" 雙引號
3、布爾類型（Boolean）
true（真）和false（假）
| toString() | 返回Boolean的字符串值('true'或'false') |
| toLocaleString() | 返回Boolean的字符串值('true'或'false') |
| valueOf() | 返回Boolean的原始布爾值(true或false) |
4、數組（Array）
var name = Array("nick","jenny");
var name = ["nick","jenny"];
| Array.length | 數組的大小 |
| Array.push() | 尾部添加元素 |
| Array.pop() | 刪除並返回數組的最后一個元素 |
| Array.unshift() | 在數組頭部插入一個元素 |
| Array.shift( ) | 在數組頭部移除一個元素 |
| Array.slice( ) | 切片 |
| Array.reverse( ) | 反轉 |
| Array.join( ) | 將數組元素連接起來以構建一個字符串 |
| Array.concat( ) | 拼接 |
| Array.sort( ) | 排序 |
| Array | 對數組的內部支持 |
| Array.splice( start, deleteCount, value, ...) | 插入、刪除或替換數組的元素 obj.splice(n,
0
,val) 指定位置插入元素
obj.splice(n,
1
,val) 指定位置替換元素
obj.splice(n,
1
) 指定位置刪除元素
|
| Array.toLocaleString( ) | 把數組轉換成局部字符串 |
| Array.toString( ) | 將數組轉換成一個字符串 |
5. Math
Math對象是一個靜態對象，而不是構造函數。實際上，Math只是一個由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( ) 計算正切值。
語句
1、條件語句
JavaScript中支持兩個條件語句，分別是：if 和 switch。
if 語句：
//if語句
if(條件){
}else if(條件){
}else{
}
Switch 語句：
//switch語句，name等於nick是執行第一個case,等於第二個執行第二個case,其它執行default.
switch(name){
case 'nick':
age = 18;
break;
case 'jenny':
age = 21;
break;
default :
age = 0;
}
2、循環語句
JavaScript中支持四種循環語句，分別是：for、for in、while、do-while
for 循環：
var names = ["nick", "jenny"];
for(var i=0;i<names.length;i++){
console.log(i); //索引
console.log(names[i]);
}
for in 循環：
var names = ["nick", "jenny"];
for(var index in names){
console.log(index);
console.log(names[index]);
}
while 循環：
while(條件){
// break;
// continue;
}
do-while 循環：
//循環的代碼至少執行一次，結果為1
var num = 0;
do {
num++;
}while (num>10);
3. label語句
label 語句可以理解為跳出任意循環
//輸出結果為95 <script> var num = 0; for (var i=0;i<10;i++) { for (var j=0;j<10;j++) { if (i==5 && j==5) { break; } num++; } } console.log(num); </script>
//輸出結果為55 //i和j都循環為到5時，跳出了兩層循環 <script> var num = 0; outPoint: for (var i=0;i<10;i++) { for (var j=0;j<10;j++) { if (i==5 && j==5) { break outPoint; } num++; } } console.log(num); </script>
4. 異常處理
主動跑出異常 throw Error('xxxx')
try {
//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
// 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
//e是一個局部變量，用來指向Error對象或者其他拋出的對象
}
finally {
//無論上述代碼怎么，finally代碼塊始終會執行
}
函數Function
函數定義的三種方式：
// 普通函數
function func(arg){
return true;
}
// 匿名函數
var func = function(arg){
return "nick";
}
// 自執行函數
(function(arg){
console.log(arg);
})('nick')
函數參數：
函數傳參的個數可以小於實際需傳參的個數，沒傳參的默認為undefined
參數傳多默認不起作用
function man(name,age) {
console.log(name,age);
}
man("nick",18); //nick 18
man("nick"); //nick undefined
man("nick",18,19); //nick 18
arguments 可接收所有參數，返回一個數組
function man() {
console.log(arguments);
}
man("nick",18); //["nick", 18]
man("nick"); //["nick"]
man("nick",18,19); //["nick", 18, 19]
函數的作用域與作用域鏈：
JavaScript中沒有塊級作用域
var name = 'nick';
(function Main(){
console.log(name);//undefined
if(1){
var name = 'jenny';
}
console.log(name);//jenny
})();
console.log(name);//nick
//輸出結果第一個為undefined
//聲明需提前（Hoisting），在JavaScript引擎“預編譯”時進行，函數在被執行之前，會將其中的變量全部聲明，而不賦值
作用域鏈
每個構造函數都有一個內部對象指針，指向原型對象，而原型對象也包含一個指向構造函數的指針。如此層層遞進，形成作用域鏈條
var name = 'nick';
function Main() {
function F1(){
var name = 'jenny';
console.log(name);//jenny
}
function F2() {
console.log(name);//nick
}
F1();
F2();
}
Main();
// 從內到外的優先級尋找
// F2() 的作用域鏈為 F2()-->Main()
閉包：
閉包就是能夠讀取其他函數內部變量的函數。
function f1(){
var n=1;
Add=function(){
n++;
};
function f2(){
console.log(n);
}
return f2;
}
var result=f1();
result(); //1
Add();
result(); //2
//result就是閉包f2函數
//函數f1中的局部變量n一直保存在內存中，並沒有在f1調用后被自動清除
閉包使函數中的變量都被保存在內存中，內存消耗大，所以少用閉包，否則會造成網頁的性能低，在IE中可能導致內存泄露。
所以在退出函數之前，將不使用的局部變量全部刪除。
面向對象
面向對象的三大特性:
封裝：隱藏代碼實現的細節，實現代碼的模塊化
繼承：擴展已經存在的代碼模塊，實現代碼重用
多態：接口的不同實現方式，實現接口重用
關鍵字：
this 代指此時的對象
new 創建對象時必須使用
構造函數模式：
function Foo (name,age) {
this.Name = name;
this.age = age;
this.Func = function () {
return this.Name + this.age
}
}
var obj = new Foo("nick",18);
var ret = obj.Func();
console.log(ret);
var obj2 = new Foo("jenny",21);
上述模式把同樣的函數封裝到了不同對象，造成了內存浪費。
原型模式（prototype）：
function Foo(name,age) {
this.Name = name;
this.Age = age;
}
Foo.prototype = {
GetInfo: function () {
var str = " is good";
return this.Name + str;
},
Func: function () {
return this.Name + this.Age;
}
};
var obj = new Foo("nick",18);
console.log(obj.Name);//nick
console.log(obj.Age);//18
var ret = obj.GetInfo();
console.log(ret);//nick is good
var ret2 = obj.Func();
console.log(ret2);//nick18
var obj2 = new Foo("nick",18);
所有的構造函數的prototype屬性都指向另一個對象（同一塊內存地址），這個對象的所有屬性和方法，都會被構造函數的實例繼承。
Prototype模式的驗證方法
1. isPrototypeOf()
用來判斷一個對象是否存在於另一個對象的原型鏈中
Foo.prototype.isPrototypeOf(obj) true Foo.prototype.isPrototypeOf(obj2) true
2. hasOwnProperty()
用來判斷某一個對象(不包括原型鏈)是否具有指定屬性。
obj.hasOwnProperty('Name')
true
obj.hasOwnProperty('Age')
true
3. in運算符
判斷某個實例是否具有某個屬性
'Name' in obj true 'Age' in obj true
其它
1、序列化
- JSON.stringify(obj) 序列化
- JSON.parse(str) 反序列化
2、轉義
- decodeURI( ) URl中未轉義的字符
- decodeURIComponent( ) URI組件中的未轉義字符
- encodeURI( ) URI中的轉義字符
- encodeURIComponent( ) 轉義URI組件中的字符
- escape( ) 對字符串轉義
- unescape( ) 給轉義字符串解碼
- URIError 由URl的編碼和解碼方法拋出
3、eval
JavaScript中的eval既可以運行代碼也可以獲取返回值
a = eval('1+1');
console.log(a); //2
- eval()
- EvalError 執行字符串中的JavaScript代碼
4、正則表達式
var p = /nick/g;
console.log(p.test('nickjennynick')); // true
console.log(p.exec('nickjennynick')); // ["nick", index: 0, input: "nickjennynick"]
JavaScript中支持正則表達式，其主要提供了兩個功能：
- test(string) 用於檢測正則是否匹配
- exec(string) 用於獲取正則匹配的內容
匹配模式：
g:表示全局(global)模式，匹配所有字符串，不會匹配到第一項時停止
i:表示不區分大小寫(case-insensitive)模式
m:表示多行(multiline)模式，到達一行文本末尾時還會繼續查找下一行中是否存在匹配的項
括號分組：
console.log(/(n)(i)ck/.exec('nickjenny')); // console.log(/(n)(i)ck/.exec('nickjenny'))
console.log(/(n)(i)ck{2}/.exec('nickkjenny')); // ["nickk", "n", "i", index: 0, input: "nickkjenny"]
元字符 名稱 匹配對象 . 點號 單個任意字符(除回車\r、換行\n、行分隔符\u2028和段分隔符\u2029外) [] 字符組 列出的單個任意字符 [^] 排除型字符組 未列出的單個任意字符 ? 問號 匹配0次或1次 * 星號 匹配0交或多次 + 加號 匹配1次或多次 {min,max} 區間量詞 匹配至少min次，最多max次 ^ 脫字符 行的起始位置 $ 美元符 行的結束位置 | 豎線 分隔兩邊的任意一個表達式 () 括號 限制多選結構的范圍，標注量詞作用的元素，為反向引用捕獲文本 \1,\2... 反向引用 匹配之前的第一、第二...組括號內的表達式匹配的文本
\d 數字，等同於[0-9] \D 非數字，等同於[^0-9] \s 空白字符 \S 非空白字符 \w 字母、數字、下划線，等同於[0-9A-Za-z_](漢字不屬於\w) \W 非字母、數字、下划線，等同於[^0-9A-Za-z_]
5、時間處理
時間操作中有兩種時間：
- 時間統一時間
- 本地時間（東8區）
Date 操作日期和時間的對象 Date.getDate( ) 返回一個月中的某一天 Date.getDay( ) 返回一周中的某一天 Date.getFullYear( ) 返回Date對象的年份字段 Date.getHours( ) 返回Date對象的小時字段 Date.getMilliseconds( ) 返回Date對象的毫秒字段 Date.getMinutes( ) 返回Date對象的分鍾字段 Date.getMonth( ) 返回Date對象的月份字段 Date.getSeconds( ) 返回Date對象的秒字段 Date.getTime( ) 返回Date對象的毫秒表示 Date.getTimezoneOffset( ) 判斷與GMT的時間差 Date.getUTCDate( ) 返回該天是一個月的哪一天(世界時) Date.getUTCDay( ) 返回該天是星期幾(世界時) Date.getUTCFullYear( ) 返回年份(世界時) Date.getUTCHours( ) 返回Date對象的小時字段(世界時) Date.getUTCMilliseconds( ) 返回Date對象的毫秒字段(世界時) Date.getUTCMinutes( ) 返回Date對象的分鍾字段(世界時) Date.getUTCMonth( ) 返回Date對象的月份(世界時) Date.getUTCSeconds( ) 返回Date對象的秒字段(世界時) Date.getYear( ) 返回Date對象的年份字段(世界時) Date.parse( ) 解析日期/時間字符串 Date.setDate( ) 設置一個月的某一天 Date.setFullYear( ) 設置年份，也可以設置月份和天 Date.setHours( ) 設置Date對象的小時字段、分鍾字段、秒字段和毫秒字段 Date.setMilliseconds( ) 設置Date對象的毫秒字段 Date.setMinutes( ) 設置Date對象的分鍾字段和秒字段 Date.setMonth( ) 設置Date對象的月份字段和天字段 Date.setSeconds( ) 設置Date對象的秒字段和毫秒字段 Date.setTime( ) 以毫秒設置Date對象 Date.setUTCDate( ) 設置一個月中的某一天(世界時) Date.setUTCFullYear( ) 設置年份、月份和天(世界時) Date.setUTCHours( ) 設置Date對象的小時字段、分鍾字段、秒字段和毫秒字段(世界時) Date.setUTCMilliseconds( ) 設置Date對象的毫秒字段(世界時) Date.setUTCMinutes( ) 設置Date對象的分鍾字段和秒字段(世界時) Date.setUTCMonth( ) 設置Date對象的月份字段和天數字段(世界時) Date.setUTCSeconds( ) 設置Date對象的秒字段和毫秒字段(世界時) Date.setYear( ) 設置Date對象的年份字段 Date.toDateString( ) 返回Date對象日期部分作為字符串 Date.toGMTString( ) 將Date轉換為世界時字符串 Date.toLocaleDateString( ) 回Date對象的日期部分作為本地已格式化的字符串 Date.toLocaleString( ) 將Date轉換為本地已格式化的字符串 Date.toLocaleTimeString( ) 返回Date對象的時間部分作為本地已格式化的字符串 Date.toString( ) 將Date轉換為字符串 Date.toTimeString( ) 返回Date對象日期部分作為字符串 Date.toUTCString( ) 將Date轉換為字符串(世界時) Date.UTC( ) 將Date規范轉換成毫秒數 Date.valueOf( ) 將Date轉換成毫秒表示