首頁 > 開發者 > JavaScript
第2章，在html中使用JavaScript
Html引入外部js指令碼
<script type="text/javascript" src="test.js">兩個</script>之間不應放指令碼，因為並不會被執行</script>
<script>標籤有一個defer屬性可以延遲指令碼執行，但是並不保證會按指令碼排列順序執行
建議：將指令碼引入放在<body>標籤的所有內容之後，而不放在<head>標籤中進行引入，加快頁面響應
<noscript></noscript>標籤中的內容會在瀏覽器不支援指令碼或指令碼被禁用的時候輸出，啟用了指令碼的瀏覽器將不會看到標籤中的
內容
第3章，基本概念
標識符
第一個字元必須是字母，底線（_）或貨幣符號（$），有效命名為字母、數字、底線和貨幣符號構成的
採用駝峰命名法：第一個字母小寫，後面的每個單字首大寫
單行注釋：
//這是單行注釋
多行注釋：
/*這是
多行
注釋
*/
typeof 操作符
typeof – 判斷給定變數的資料類型
返回：
“undefined” – 未定義的資料類型
“boolean” – 布爾值
“string” – 字串
“number” – 數值
“object” – 對象或者NULL
“function” – 函數
註：函數在js中是對象，不是資料類型，因此使用typeof區分函數和對象是有必要的
typeof在有些時候會返回令人迷惑但技術上確是正確的值，例如，null和對象，兩者都會返回“object”
null與undefined是相等的，null == undefined 將返回true
進行算術計算時，所有的八進位和十六進位都將轉換成十進位
Infinity 無窮大，有正負無窮大，可以使用isFinite()判斷是否無窮大
Number.MAX_VALUE，Number.MIN_VALUE分別儲存著數實值型別的最大值和最小值
Number.NEGATIVE_INFINITY和Number.POSITIVE_INFINITY分別儲存著負和正無窮大
NaN 非數值，可以使用isNaN判斷一個變數是否非數值
數值轉換
強制轉換Number()，但是結果並不合理，建議使用parseInt()函數，並帶入需要轉換的基數
例：
parseInt(“10”,2); //以二進位解析parseInt(“10”,8); //以八進位解析
不帶入基數意味著讓parseInt自己決定如何解析字串，這會在某些時候造成錯誤
parseFloat()與parseInt()基本相同，將字串解析成浮點數，始終忽略前置字元為零，只解析十進位值，十六進位將被解析成0，因此
他沒有第二個參數
字串類型
字串類型變數是不可變，亦即字串變數是為一個常量，可以使用單引號（'），也可以使用雙引號（”）定義字串變數，但必須匹配，如果需要混用，建議加上逸出字元（\）
使用toString()函數將一個值轉換為字串，數值則可以使用基數值進行轉換
例：
var num = 10;num.toString(“2”); //”1010”num.toString(“8”); //”12”
也可以使用String()進行強制轉換
Object類型
constructor：建構函式
hasOwnProperty(propertyName)：檢查給定的屬性在當前對象中是否存在
isPrototypeOf(object)：檢查傳入的對象是否是傳入對象的原型
propertyIsEnumerable(propertyName)：檢查給定的屬性是否能夠使用for-in語句來枚舉，與hasOwnProperty一樣，給定的屬性名稱必須以字串的形式指定
toLocalString()：返回對象的字串表示，與執行環境的地區對應
toString()：返回對象的字串表示
valueOf()：返回對象的字串、數值或布爾值表示。通常與toString返回相同
操作符
按位非：~，按位與：&，按位或：|，按位異或：^，左移：<<，有符號右移：>>（以符號位填充），無符號右移：>>>（以零填充），邏輯非：!，邏輯與：&&，邏輯或：||
關係操作符：<，>，<=，>=
相等和不相等：==，!=，先轉換再比較
全等和不全等：===，!==，只比較，不轉換，類型不同則不同
條件操作符：? :，三目運算子
逗號操作符：（,），返回最後一個運算式的值：var num = (3,5,6,2)，num = 2
語句
if{}，do{}while();，while(){}，for(;;){}
for-in語句：
精準的迭代語句，可以用來枚舉對象的屬性
for(property in expression) statement
例：
for(var propName in window){document.write(propName);}
註：當對象的變數值為null或者為undefined時，for-in會發生錯誤，雖然ECMAScript5更改了這一錯誤，不過，為了最大限度的保證相容性，在使用for-in迴圈之前，先檢測該對象的值不是null或者undefined
label語句：標籤語句
start:for(var I = 0;i<count;i++){statement}
這個start標籤可以在之後的break和continue語句中使用，標籤語句一般與迴圈語句一起使用
with語句：
將代碼的範圍設定到一個特定的對象中
with(expression) statement;
strict 模式下不允許使用with語句，否則將被視為語法錯誤
大量使用with語句會導致效能下降以及代碼調試困難，建議大型應用程式的開發不使用with語句
switch語句
switch(expression){case selection:statement;break;……default:statement;break;}
函數
strict 模式對函數限制：
函數不能命名為eval和arguments
參數不能命名為eval和arguments
不能出現兩個具名引數同名的情況
理解函數參數
js中的函數並不介意傳進來多少個函數參數，即使與定義的情況不同，因為在函數接收到的永遠都是一個類似數組形式的參數，函數並不關心數組包含的參數。可以在函數體內通過arguments對象來訪問這個參數數組。
arguments只是與數組類似，因為可以使用方括弧來訪問它的元素，使用length來確定傳進來的參數個數。arguments中的參數順序與傳進來的參數順序一致，並且是同步改變的。
註：沒有傳遞值的具名引數，將會被賦值為undefined值。
strict 模式對arguments對象作出了一些限制：在函數中對arguments進行賦值將會變得無效，重寫arguments值將會導致語法錯誤
使用arguments對參數的類型和數量進行判斷，可以模仿重載
第4章，變數、範圍和記憶體問題
註：js中所有函數的參數都是按值傳遞的
檢測類型：instanceof
instanceof操作符，只能操作參考型別，即對象，對基礎資料型別 (Elementary Data Type)的測試始終返回true，因為基礎資料型別 (Elementary Data Type)不是對象
result = variable instanceof constructor
若變數是給定的參考型別，則返回true
例：
person instanceof Object; //person是Object類型嗎？
color instanceof Array; //color是Array類型嗎？
沒有塊級範圍
if(true){var j = “blue”;}alert(j);//將會得到輸出blue
如果在C/C++中將會出現錯誤，而js並不會出現錯誤，在塊裡面定義的變數將會添加到當前的花括弧之外的範圍中。
垃圾收集
標記清除
引用計數
第5章，參考型別
Object類型
兩種建立執行個體方式：
一、使用new操作符後跟Object建構函式
var obj = new Object();obj.name = “name”;obj.age = 23;
二、使用對象字面量（通過對象字面量定義對象時，實際上並不會調用Object建構函式）
var obj = {name : “name”;age : 23}
可以使用點標記法和方括弧標記法訪問對象的屬性
點標記法： 方括弧標記法：（必須以字串的形式表示要訪問的屬性名稱）
obj.name obj[“name”]
註：當屬性名稱包含會導致語法錯誤的字元，或屬性名稱使用的是關鍵字或保留字時，可以使用方括弧標記法，還可以通過變數訪問屬性
建議：除非必須使用變數訪問屬性，否則最好使用點標記法
Array類型
建立方式：
一、使用Array建構函式
var arr = new Array(); //建立一個空數組var arr = new Array(20); //建立一個包含20個項的數組var arr = new Array(“one”,”two”,”three”); //建立包含one，two，three三項的數組 還可以將new操作符省略
二、使用數組字面量標記法
var color = [“red”,”blue”]; //建立包含兩個項的數組var color = [“yellow”,”green”,]; //不要這樣建立數組，瀏覽器的解析不同，結果會不同
註：使用數組字面量建立數組時，也不會調用Array建構函式
arr.length，將會返回數組的項數，即將返回數組的大小
對arr.length進行賦值，將會動態改表數組大小，賦值大於原數組大小將擴大數組，新增項獲得undefined的值，小於原數組大小，將保留前面的數值，多的數值將被移除
數組檢測：
對於只有一個全域範圍而言，instanceof可以很方便的檢測某個變數是否是數組，但對於多個架構的網頁而言，則存在多個不同的版本的Array建構函式，instanceof將不能夠滿足要求，為此引入Array.isArray(value)方法，這個方法可以最終確定某個值是否是數組，而不管是哪個架構構造的。支援的瀏覽器為：IE9+，Firefox4+，Safari5+，Opera10.5+，chrome。
轉換方法：
調用數組的toString()方法，將會返回由數組中每個值的字串形式拼接而成的以逗號分隔的字串，valueOf()方法返回的還是數組，與toString()是一樣的結果
toLocaleString()返回的通常與toString()和valueOf()返回結果是一樣的，但並不總是如此，使用toLocaleString()方法，則會去調用數組中每一項的toLocaleString()方法，而不是toString()方法。
join方法
join方法接受一個參數，即作為分隔字元的字串
例：
var arr = [“one”,”two”];arr.join(“|”); //one|two
如果不給join傳遞參數，則返回以逗號作為分隔的字串
註：如果數組中某一項的值為null或者undefined，則調用join，toLocaleString()，toString()，valueOf()返回的結果則使用Null 字元串表示
數組的棧方法
var arr = new Array();
arr.push()，在數組末尾添加資料，可以傳入多個參數，並返回修改後的數組長度
arr.pop()，從數組末尾移除最後一個資料，減少數組的length值，並返回該項的值
數組的隊列方法
var arr = new array();
arr.shift()，移除數組的第一項，減少數組的length值，並返回該項的值
arr.unshift()，在數組的前端添加任意個項，並返回修改後的數組長度
使用shift和push結合，可以類比隊列操作
使用unshift和pop結合，可以從相反方向類比隊列
重排序方法：
var arr = new Array();
arr.reverse()，翻轉數組的項，即首尾順序調轉
arr.sort()，預設情況下升序排列，註：排列順序是數組值轉換成字串之後的升序排列，通常不是所需要的排序
sort方法可以接受一個比較函數作為參數，實現所需的排序方法，方法返回負數則按升序排列，返回整數則按降序排列，註：可以適應大多數排序情況
操作方法：
var arr = new Array();
arr.concat()，進行數組串連，並返回串連後的數組，可傳入多個參數
arr.slice()，可以基於當前數組中的一個或多個值建立一個新數組返回，接受一個或兩個參數，即返回原數組的起始位置和結束位置之間的所有項，不包含結束位置的項，只有一個參數則返回從該參數指定位置到末尾的所有項。
註：如果參數是負數，則會將數組的長度加上這個負數得到的結果來確定位置。結束位置小於起始位置則返回空
splice()方法：
刪除：指定兩個參數，要刪除的起始位置和要刪除的項數，例：splice(0,2);
插入：指定三個參數，起始位置，要刪除的項數（0），要插入的項，插入的項可以是多個項
例：splice(2,0,”red”,”green”); //從位置2插入red，green
替換：與插入相同，第二個參數有變化，起始位置，要刪除的項數，要插入的項，插入的項數可以是多個項
位置方法：
indexOf()，lastIndexOf()，都接收兩個參數，要尋找的項和尋找起點位置索引indexOf從數組頭開始尋找，lastIndexOf從數組末尾開始尋找。若沒有找到則返回-1.
註：尋找時進行的比較使用的是全等操作符，就像使用“===”一樣
迭代方法：
ECMAScript5定義了5個迭代方法，全部接收兩個參數：每一項上啟動並執行函數，運行該函數的範圍對象—影響this的值。函數則接收三個參數：數組項的值，該項在數組中的位置，和數組對象本身
var arr = new Array();
every()，對數組中每一項運行給定函數，每一項都返回true，則返回true
filter()，對數組每一項運行給定函數，返回該執行函數返回true的項組成的數組
例：
var num = [1,2,3,4,5,4,3,2,1];var filter = num.filter(function(item,index,array){return item > 2;}); //[3,4,5,4,3]
forEach()，對數組中每一項運行給定函數，沒有傳回值，本質上與for迴圈迭代數組一致
map()，對數組中每一項運行給定函數，返回每次函數調用的結果組成的結果
some()，對數組中每一項運行給定函數，只要任一項的函數結果是true，則返回true
註：以上所有函數並不會對數組進行修改
例：
var num = [1,2,3,4,5,4,3,2,1];var mapResult = num.map(function(item,index,array(){return item * 2;});//以上代碼返回數組每一項都乘2以後的數組
歸併方法：
reduce()和reduceRight()
兩個函數都會迭代數組的所有項，然後構建一個最終返回的值，其中reduce從數組第一項開始，reduceRight從數組最後一項開始
這兩個方法都接收2個參數：一個在每一項上都調用的函數和（可選的）作為歸併基礎的初始值。傳遞的函數需要接收4個參數：前一個值，當前值，項的索引和數組對象。這個函數的傳回值會作為第一個參數傳遞給下一項，第一次迭代發生在數組的第二項上，因此第一個參數是數組的第一項，第二個參數是數組的第二項。
例：
var value = [1,2,3,4,5];var sum = value.reduce(function(prev,cur,index,array){return prev + cur;}); //sum = 15
//第一次執行回呼函數，prev = 1,cur = 2,第二次，prev = 3（第一次函數返回結果1+2），cur = 3（當前數組項）。這個過程會把數組每一項都訪問一遍。
reduceRight除了方向不一樣，其他都一樣。
Date類型
Date類型使用自UTC1970.1.1午夜零時開始經過的毫秒數來儲存日期，可以將日期精確到1970.1.1之前或之後100 000 000（一億）年。
使用Date建構函式而不傳參數，新對象會獲得當前日期和時間，要建立特定日期時間，必須傳入表示該日期的毫秒數，ECMAScript提供了兩個方法Date.parse和Date.UTC方法來簡化操作。
Date.parse方法接收一個表示日期的字串參數。這個方法因實現而異，而且通常因地區而異。美國地區的瀏覽器支援以下格式：
月/日/年，如6/13/2004
英文月名 日，年，如January 12,2004
英文名星期幾 英文月名 日 年 時：分：秒 時區，如Tue May 25 2004 00:00:00 GMT-0700
ISO 8601擴充格式YYYY-MM-DDTHH:mm:ss.sssZ，如2004-05-25T00:00:00，只有支援js5的實現支援這種格式
Date.UTC也同樣返回表示日期毫秒數，參數分別為：年份、基於0的月份（一月份是0）、月中哪一天（1-31）、小時數（0-23）、分鐘、秒及毫秒數，其中只有前兩個參數是必須的。
例：
var someDate = new Date(Date.UTC(2000,0)); //2000年1月1日0時0分0秒var someDate = new Date(Date.UTC (2000,0,1,15,23,23)); //2000年1月1日15時23分23秒
Date建構函式會模仿Date.parse和Date.UTC函數。
Date.now方法返回調用這個函數時的日期和時間毫秒數。在不支援的瀏覽器上面，可以使用+操作符擷取Date對象時間戳記
var start = +new Date();var stop = +new Date();
日格式化方法
toDateString—以特定於實現的格式顯示星期幾、月、日、年
toTimeString—以特定於實現的格式顯示時、分、秒和時區
toLocaleDateString—以特定於地區的格式顯示星期幾、月、日、年
toLocaleTimeString—以特定於實現的格式顯示時、分、秒
toUTCString—以特定於實現的格式完整的UTC時間
與toLocaleString和toString一樣，以上方法沒有一個能夠用來在使用者介面中顯示一致的日期資訊。
RegExp類型，正則
文法：類似於Perl文法
var expression = / pattern /flags;
模式（pattern）部分可以是簡單或複雜的Regex，每個運算式可以使用一個或多個標識符，支援以下3個標識符
g:全域模式，將被應用於所有字串，而不是在匹配到第一個字串後就停止，
i:表示不區分大小寫，
m:表示多行模式，即達到一行文本末尾時，會繼續尋找下一行
註：模式中所有元字元都需要轉義
元字元：( [ { \ ^ $ | } ? * + . ] )
以上方法是以字面量模式建立Regex
使用RegExp構造Regex
var partten = new RegExp(“bat”,”I”);
註：使用RegExp建構函式，所有元字元必須雙重轉義
例：/\[bc\]at/ ===> “\\[bc\\]at”
RegExp執行個體屬性
global：布爾值，表示是否設定了g標誌
ignoreCase：布爾值，表示是否設定了i標誌
lastIndex：整數，表示開始搜尋的下一個匹配項的字元位置，從0算起
multiline：布爾值，表示是否設定了m標誌
source：Regex的字串表示，按照字面量形式，而非傳入建構函式中的字串模式返回
RegExp對象的主要方法是exec()，exec()接收一個參數，即要應用模式的字串，返回一個匹配項（即使設定了g標誌），有沒有設定g標誌的差別在於，沒有設定則總是返回同一個結果，設定了則返回下一個匹配
test方法，接收一個字串，只返回是否匹配，不返回結果
Function類型
函數是對象，函數名是指標
定義方法：
//函式宣告的形式function sum(num1,num2){return num1 + num2;}//函數運算式的形式var sum = function(num1,num2){return num2 + num2;}var sum = new Function(“num2”,”num2”,”return num1 + num2”); //不建議，效能渣，但能更好的理解函數是對象的思想。 function add(num){return num + 100;}function add(num1,num2){return num + 200;}//實際如同下面的代碼function add(num){return num + 100;}add = function(num){return num + 200;}
所以函數沒有重載。
函數內部屬性
函數內部有兩個特殊對象，arguments和this
arguments有一個屬性callee，指向擁有這個arguments的函數
定義遞迴函式時，最好使用arguments.callee()來代替函數名，降低耦合，減少問題的出現
例：
function factorial(num){if(num<1)return 1;elsereturn num * factorial(num – 1);}function factorial(num){if(num<1)return 1;elsereturn num * arguments.callee(num – 1);}
this對象
函數的this對象引用的是函資料以執行的環境對象
ECMAScript5規範定義了另一個函數對象的屬性：caller，儲存著調用當前函數的函數的引用
函數包含了兩個屬性：length（希望接收的函數個數）和prototype，prototype不可枚舉，所以for-in無法發現他。prototype是所有參考型別儲存其所有執行個體方法的真正所在
包含兩個非繼承而來的方法：apply和call
apply方法接收兩個參數：一個是在其中運行函數的範圍，也就是this對象，一個是參數數組，可以是Array執行個體，也可以是arguments對象
call與apply基本相同，區別在於，使用call函數，參數必須逐個列舉出來
傳遞參數並非apply和call真正用武之地，真正強大的地方在於能夠擴充函數的範圍
例：
window.color = “red”;var o = {color:”blue”};function sayColor(){alert(this.color);}sayColor(); //redsayColor.call(this); //redsayColor.call(window); //redsayColor.call(o); //blue
不需要再將sayColor函數放到o對象中，就可以使o對象能夠使用sayColor函數
ECMAScript5還定義了另一個方法：bind，這個方法會建立一個函數執行個體，其this值會被綁定到傳給bind函數的值
window.color = “red”;var o = {color:”blue”};function sayColor(){alert(this.color);}var objSayColor = sayColor.bind(o);objSayColor(); //blue
toLocaleString和toString始終返回函數代碼，但由於瀏覽器差異，並沒有辦法根據返回結果實現任何重要功能，valueOf也只返回函數代碼
基本封裝類型
Boolean、Number、String
對基本封裝類型的執行個體調用typeof會返回object，而且所有的基本封裝類型的執行個體都會返回true，
Object建構函式也會像Factory 方法一樣，根據傳入的值的類型返迴響應的基本封裝類型的執行個體
例：
var obj = new Object(“some text”);alert(obj instanceof String); //true
使用new調用基本封裝類型和直接使用同名的轉型函數是不一樣的。例：
var value = “25”;var num = Number(value); //轉型函數alert(typeof num); //”number”var obj = new Number(value); //建構函式alert(typeof obj); //”object”
Number類型
另外提供的方法
toFixed();接收一個參數，表示要以幾位小數表示當前值，當前小數位過長則四捨五入，此方法可以表示帶有0到20個小數位的數值，這隻是標準實現範圍
toExponential();接收一個參數，返回指數形式表示，參數指定返回的結果中的小數位元
toPrecision();接收一個參數，表示所有數位位元，不包括指數部分
string類型
var str = “hello world”;str.charAt(1); //”e”，返回字元str.charCodeAt(1); //”101”，返回字元編碼str.concat();//連接字串，可以接收任意個字串 slice(),substring(),substr(),都接收一或兩個參數，接收的第一個參數均代表起始位置，slice(),substring()接收的第二個參數表示終止位置，substr()的第二個參數表示返回的字元個數，若不給第二個參數，則返回從起始位置到字串結束位置的字元
帶入負數表現不同：slice會將所有帶入的負數與字串長度相加，substr會將第一參數加上字串長度，第二個參數轉換為0，substring()將所有負值轉為0
indexOf，lastIndexOf方法都返回子字串的位置，indexOf從頭尋找，lastIndexOf從末尾尋找，沒有找到返回-1，兩個方法都可以接收第二個選擇性參數，表示字元從哪裡開始搜尋
trim()，返回源字串刪除前尾碼所有空格的結果
toLowerCase，toLocaleLowerCase，toUpperCase，toLocaleUpperCase，帶有Locale的方法是針對特定地區的實現。通常而言是沒有什麼差別，但少數語言會為Unicode大小寫轉換應用特殊規則，這就必須使用針對特定地區的實現
match(),search()這兩個方法均接收一個參數，字串或者RegExp對象指定的一個Regex
replace()方法，接收兩個參數，第一個參數可以是一個RegExp對象或字串（不會被轉換成Regex），第二個參數可以是一個字串或函數，若要替換所有字串，則必須使用Regex，並加全域（g）標誌
split()，接收一個參數作為字串的分隔字元，返回由分隔字元分隔得到的數組，可以接收第二個選擇性參數，作為返回結果的數組大小
localeCompare()，比較兩個字串，關於是否區分大小寫，視地區而定
1、源字串應排在參數字串之前，返回負數（具體視情況而定，通常為-1）
2、源字串與參數字串相同，返回0
3、源字串排在參數字串之後，返回整數（具體視情況而定，通常為1）
fromCharCode()，接收一個或多個字元編碼，轉換成字串，與charCodeAt()執行的是相反操作
URI（通用資源標識符）
方法：encodeURI，encodeURIComponent，decodeURI，decodeURIComponent，編碼和解碼，解碼方法只能識別各自對應的編碼方法
eval()，將帶入的字串參數，轉換成可執行語句，並插入到當前位置
eval建立的任何變數和函數都不會被提升，strict 模式下，外部無法訪問eval建立的變數和函數
註：盡量不使用eval方法，僅屬於個人意見
Math對象
min(),max(),ceil()向上舍入，floor()向下舍入，round()標準舍入，即四捨五入，random()返回大於等於0小於1的隨機數
以上所述是小編給大家介紹的JavaScript進階程式設計（第三版）學習筆記1~5章 ，希望對大家有所協助！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
