DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript高級程序設計(第三版)學習筆記1~5章
JavaScript高級程序設計(第三版)學習筆記1~5章
編輯:關於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;

嚴格模式下不允許使用with語句,否則將被視為語法錯誤

大量使用with語句會導致性能下降以及代碼調試困難,建議大型應用程序的開發不使用with語句

switch語句

switch(expression){
case selection:statement;
break;
……
default:statement;
break;
}

函數

嚴格模式對函數限制:

函數不能命名為eval和arguments

參數不能命名為eval和arguments

不能出現兩個命名參數同名的情況

理解函數參數

js中的函數並不介意傳進來多少個函數參數,即使與定義的情況不同,因為在函數接收到的永遠都是一個類似數組形式的參數,函數並不關心數組包含的參數。可以在函數體內通過arguments對象來訪問這個參數數組。

arguments只是與數組類似,因為可以使用方括號來訪問它的元素,使用length來確定傳進來的參數個數。arguments中的參數順序與傳進來的參數順序一致,並且是同步改變的。

注:沒有傳遞值的命名參數,將會被賦值為undefined值。

  嚴格模式對arguments對象作出了一些限制:在函數中對arguments進行賦值將會變得無效,重寫arguments值將會導致語法錯誤

  使用arguments對參數的類型和數量進行判斷,可以模仿重載

第4章,變量、作用域和內存問題

注:js中所有函數的參數都是按值傳遞的

檢測類型:instanceof

instanceof操作符,只能操作引用類型,即對象,對基本數據類型的測試始終返回true,因為基本數據類型不是對象

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()返回的結果則使用空字符串表示

數組的棧方法

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)部分可以是簡單或復雜的正則表達式,每個表達式可以使用一個或多個標識符,支持以下3個標識符

g:全局模式,將被應用於所有字符串,而不是在匹配到第一個字符串後就停止,

i:表示不區分大小寫,

m:表示多行模式,即達到一行文本末尾時,會繼續查找下一行

注:模式中所有元字符都需要轉義

元字符:( [ { \ ^ $ | } ? * + . ] )

以上方法是以字面量模式創建正則表達式

使用RegExp構造正則表達式

var partten = new RegExp(“bat”,”I”);

注:使用RegExp構造函數,所有元字符必須雙重轉義

例:/\[bc\]at/ ===> “\\[bc\\]at”

RegExp實例屬性

global:布爾值,表示是否設置了g標志

ignoreCase:布爾值,表示是否設置了i標志

lastIndex:整數,表示開始搜索的下一個匹配項的字符位置,從0算起

multiline:布爾值,表示是否設置了m標志

source:正則表達式的字符串表示,按照字面量形式,而非傳入構造函數中的字符串模式返回

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;
else
return num * factorial(num – 1);
}
function factorial(num){
if(num<1)
return 1;
else
return 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(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.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構造函數也會像工廠方法一樣,根據傳入的值的類型返回響應的基本包裝類型的實例

例:

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對象指定的一個正則表達式

replace()方法,接收兩個參數,第一個參數可以是一個RegExp對象或字符串(不會被轉換成正則表達式),第二個參數可以是一個字符串或函數,若要替換所有字符串,則必須使用正則表達式,並加全局(g)標志

split(),接收一個參數作為字符串的分隔符,返回由分隔符分隔得到的數組,可以接收第二個可選參數,作為返回結果的數組大小

localeCompare(),比較兩個字符串,關於是否區分大小寫,視地區而定

1、源字符串應排在參數字符串之前,返回負數(具體視情況而定,通常為-1)

2、源字符串與參數字符串相同,返回0

3、源字符串排在參數字符串之後,返回整數(具體視情況而定,通常為1)

fromCharCode(),接收一個或多個字符編碼,轉換成字符串,與charCodeAt()執行的是相反操作

URI(通用資源標識符)

方法:encodeURI,encodeURIComponent,decodeURI,decodeURIComponent,編碼和解碼,解碼方法只能識別各自對應的編碼方法

eval(),將帶入的字符串參數,轉換成可執行語句,並插入到當前位置

eval創建的任何變量和函數都不會被提升,嚴格模式下,外部無法訪問eval創建的變量和函數

注:盡量不使用eval方法,僅屬於個人意見

Math對象

min(),max(),ceil()向上捨入,floor()向下捨入,round()標准捨入,即四捨五入,random()返回大於等於0小於1的隨機數

以上所述是小編給大家介紹的JavaScript高級程序設計(第三版)學習筆記1~5章 ,希望對大家有所幫助!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved