第一章 JavaScript概述
1.1 什么是JavaScript
JavaScript是一種具有面向?qū)ο竽芰Ω鸟谩⒔忉屝偷目蛻舳四_本設(shè)計語言岖常。JavaScript不需要再一個語言環(huán)境下運行,而只需要支持它的瀏覽器即可燎字。它的主要目的是驗證發(fā)往服務(wù)器的數(shù)據(jù)腥椒、增加Web互動、加強用戶體驗候衍。
1.2 JavaScript的特點
松散性
JavaScript語言核心與C笼蛛、C++、Java相似,比如條件判斷符匾、循環(huán)忌卤、運算符等喻括,但它卻是一種松散類型的語言惋戏,也就是說领追,它的變量不必具有一個明確的類型。
對象屬性
JavaScript中的對象把屬性名映射為任意的屬性值响逢,類似于哈希表或關(guān)聯(lián)數(shù)組绒窑。
繼承機制
JavaScript中的面向?qū)ο罄^承機制是基于原型的,這和C++以及Java中的集成大不相同舔亭。
1.3 JavaScript的歷史
1995年些膨,Netscape(網(wǎng)景)公司為解決類似于“向服務(wù)器提交數(shù)據(jù)之前驗證”的問題,與Sun公司聯(lián)手開發(fā)一個名為LiveScript的腳本語言钦铺,后期為了營銷便利订雾,更名為JavaScript。之后隨著互聯(lián)網(wǎng)的普及瀏覽器的發(fā)展矛洞,F(xiàn)irefox洼哎、Google Chrome、Safari等主流的瀏覽器對JavaScript的支持也達到了極致沼本,使得JavaScript得到了飛速的發(fā)展噩峦,如今JavaScript已是各種瀏覽器默認(rèn)支持的腳本語言。
第二章 JavaScript使用
JavaScript 必需嵌入到 HTML 文檔擅威,才能被瀏覽器解釋和執(zhí)行壕探。將 JavaScript 腳本嵌入到 HTML 文檔中有3種標(biāo)準(zhǔn)方法:
2.1 通過 <script> 標(biāo)簽嵌入
通過 <script> 標(biāo)簽嵌入JavaScript代碼時,必需將代碼放在 <script> 和 </script> 標(biāo)記對之間郊丛。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
document.write("這是通過<script>標(biāo)簽嵌入的代碼");
</script>
<body>
</body>
</html>
瀏覽器載入HTML文檔時李请,會識別 <script> 標(biāo)簽,執(zhí)行其中的 JavaScript 代碼厉熟,然后將結(jié)果返回并在瀏覽器窗口顯示导盅。
2.2 引入外部腳本
當(dāng)網(wǎng)頁功能比較復(fù)雜,或通用代碼(每個頁面都是用)較多時揍瑟,直接在 <script> 標(biāo)簽中嵌入 JavaScript 代碼會導(dǎo)致網(wǎng)頁雜亂白翻,不易管理。這時候绢片,我們希望能將JavaScript代碼保存在單獨的文件中滤馍,使用時再嵌入到 HTML 文檔。
可以通過 <script> 標(biāo)簽的 src 屬性可引入外部文件底循。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="../script/demo.js"></script>
<body>
</body>
</html>
引入外部腳本巢株,能夠很輕松的讓多個頁面使用相同的 JavaScript 代碼。外部腳本一般會被瀏覽器保存在緩存文件中熙涤,用戶再次訪問網(wǎng)頁時阁苞,無需重新載入困檩,加快了網(wǎng)頁打開速度。
2.3 在 HTML 屬性中直接嵌入
在 HTML 屬性中嵌入 JavaScript 代碼主要是針對 JavaScript 事件那槽。JavaScript 事件是指用戶對網(wǎng)頁進行操作時悼沿,網(wǎng)頁做出相應(yīng)的響應(yīng)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button onclick="alert('你點擊了按鈕骚灸!')">點擊我</button>
</body>
</html>
第三章 語法糟趾、關(guān)鍵保留字及變量
3.1 語法構(gòu)成
區(qū)分大小寫
JavaScript語言是區(qū)分大小寫的,text和Text表示不同的兩個變量逢唤。
標(biāo)識符
標(biāo)識符就是指變量拉讯、屬性的名字涤浇,或者函數(shù)的參數(shù)鳖藕。標(biāo)識符可以是可以格式規(guī)則組合起來的一個或多個字符。
- 第一個字符必須是一個字母只锭、下劃線或者$符
- 其他字符可以是字母著恩、下劃線、$符或者數(shù)字
- 不能把關(guān)鍵字蜻展、保留字喉誊、true、false和null作為標(biāo)識符
注釋
JavaScript使用C語言的注釋風(fēng)格纵顾,分為單行注釋和多行注釋伍茄。
單行注釋以 // 開頭
多行注釋以 /* 開始,以 */ 結(jié)尾
字面量
所謂字面量施逾,就是指程序中直接顯示出來的數(shù)據(jù)值敷矫。例如:
100 //數(shù)據(jù)字面量
“張強” //字符串字面量
false //布爾值字面量
null //對象字面量
{x:1, y:2} //對象字面量表達式
[1,2,3,4,5] //數(shù)組字面量表達式
3.2 關(guān)鍵字保留字
JavaScript描述了一組具有特定用途的關(guān)鍵字和保留字,一般用于控制語句的開始或結(jié)束汉额,或用于執(zhí)行特定的操作等曹仗,這些關(guān)鍵字和保留字不能用作標(biāo)識符。
3.3 變量
JavaScript變量是松散型的蠕搜,所謂松散類型就是用來保存任何數(shù)據(jù)的類型怎茫。定義變量時要使用var操作符(var是關(guān)鍵字),后面跟一個變量名(變量名是標(biāo)識符)妓灌。
var name;
alert(name); //undefined
var name = “Johnny”;
alert(name); //Johnny
變量是一個可以改變的標(biāo)識符轨蛤,聲明并賦值后,可以改變它的值虫埂。
第四章 數(shù)據(jù)類型
JavaScript有5種簡單的數(shù)據(jù)類型:Undefined祥山、Null、Boolean告丢、Number枪蘑、String损谦。還有一種復(fù)雜數(shù)據(jù)類型——object。JavaScript不支持任何創(chuàng)建自定義類型的機制岳颇。所有值都是以上6種數(shù)據(jù)類型之一照捡。
4.1 Typeof操作符
typeof操作符是用來檢測變量的數(shù)據(jù)類型,對于值或者變量使用typeof操作符會返回如下字符串:
變量定義 | typeof操作符 | 返回值 |
---|---|---|
var x; | typeof(x); | undefined |
var x = 1; | typeof(x); | number |
var x = true; | typeof(x); | boolean |
var x = “johnny”; | typeof(x); | string |
var x = new object(); | typeof(x); | object |
4.2 Undefined類型
Undefined是一種特殊的數(shù)據(jù)類型话侧,指的已聲明但沒有賦值的變量對應(yīng)的類型栗精。Undefined類型主要目的是為了作比較,引入Undefined類型是為了區(qū)分空對象與未初始化的變量瞻鹏,所以悲立,未初始化的變量與根據(jù)不存在的變量是不一樣的。
實例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
var sex;
document.write(sex);
document.write(college);
</script>
<body>
</body>
</html>
PS: 在實際項目中新博,聲明一個變量的時候薪夕,就必須初始化。
<script>
var customerName = ""; //字符串變量的初始值一般為空
var total = 0; //數(shù)字類型的初始值一般為0
var success = false; //布爾值類型的初始值一般的false
var car = null; //對象類型的初始值一般為null赫悄;
</script>
4.3 Null類型
Null類型是一個只有一個值的數(shù)據(jù)類型原献,即特殊值null,他表示一個空對象引用埂淮。當(dāng)時用typeof檢測null時姑隅,返回值為object。
如果定義的變量將來準(zhǔn)備用于保存對象倔撞,那么最好在定義變量的時候?qū)⑵涑跏蓟癁閚ull讲仰。這樣,當(dāng)檢查null值就知道變量是否已經(jīng)分配了對象引用了痪蝇。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
var car = null;
if(car != null){
document.write("對象已賦值");
}else{
document.write("對象尚未初始化");
}
</script>
<body>
</body>
</html>
4.4 Boolean類型
Boolean類型有兩個值:true和false鄙陡。它用于條件判斷時使用。
實例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
var success = true;
if(success){
document.write("submit success.");
}else{
document.write("submit failed.");
}
var x = 3;
var y = 3;
if(x === y){
document.write("x is equal to y.");
}else{
document.write("x is not equal to y.");
}
</script>
<body>
</body>
</html>
4.5 Number類型
Number類型包含兩中數(shù)值霹俺,整數(shù)和浮點數(shù)柔吼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
var total = 100;
var score = 90.5;
document.write(typeof(total));
document.write(typeof(score));
</script>
<body>
</body>
</html>
判斷是否為數(shù)字類型——isNaN
精確到小數(shù)點后幾位——toFixed()
轉(zhuǎn)為字符串類型——toString()
4.6 String類型
String類型用于表示由零或多個字符組成的字符序列,即字符串丙唧。字符串可以由雙引號("")或單引號('')表示愈魏。
var customerName = "Johnny";
var customerName = 'Johnny';
String類型包含了一些特殊的字符字面量,也叫轉(zhuǎn)義字符想际。
字面量 | 含義 |
---|---|
\n | 換行 |
\t | 制表 |
\b | 空格 |
\r | 回車 |
\f | 進紙 |
\ | 斜杠 |
' | 單引號 |
" | 雙引號 |
JavaScript中的字符串是不可改變的培漏,字符串一旦被創(chuàng)建,它的值就不能在被修改胡本。如果要修改一個字符串變量的值牌柄,首先要銷毀原來的字符串,然后再新創(chuàng)建一個字符串來填充該變量侧甫。
使用toString()方法可將數(shù)字類型的值轉(zhuǎn)為字符串類型珊佣。
4.7 Object類型
JavaScript中的對象其實就是一組數(shù)據(jù)和功能的集合蹋宦。對象可以通過執(zhí)行new操作符后跟要創(chuàng)建的對象類型的名稱來創(chuàng)建。在第八章中咒锻,我們會用專門的章節(jié)來介紹JavaScript的對象類型冷冗。
第五章 運算符
5.1 什么是表達式
表達式是JavaScript中的一個“短語”,解釋器會通過計算把它轉(zhuǎn)換成一個值惑艇。表達式分為簡單表達式和復(fù)雜表達式蒿辙,簡單表達式就是字面量或者變量名;復(fù)雜表達式是通過合并簡單的表達式來創(chuàng)建的一種表達式滨巴。
簡單表達式 | 說明 |
---|---|
5.96 | 數(shù)值字面量 |
'Lee' | 字符串字面量 |
True | 布爾值字面量 |
null | 空值字面量 |
{x:1, y:2} | 對象字面量思灌、對象表達式 |
[1,2,3] | 數(shù)組字面量、數(shù)組表達式 |
function(n) {return x+y;} | 函數(shù)字面量恭取、函數(shù)表達式 |
box | 變量 |
復(fù)雜表達式 | 說明 |
---|---|
box + 5.96 | 加法運算的表達式 |
typeof(box) | 查看數(shù)據(jù)類型的表達式 |
box > 8 | 邏輯運算表達式 |
通過上面的敘述泰偿,我們得知,單一的字面量和組合字面量的運算符都可稱為表達式秽荤。
5.2 一元運算符
只能操作一個值的運算符叫做一元運算符甜奄。
遞增++和遞減--
var count = 10;
count++; //相當(dāng)于count = count + 1;
count--; //相當(dāng)于count = count - 1;
前置和后置的區(qū)別
var count = 10;
++count; //相當(dāng)于count = count + 1;
--count; //相當(dāng)于count = count - 1;
var result1 = count++; //先賦值,后自增
var result2 = ++count; //先自增窃款,后賦值
前置和后置的區(qū)別
var count = 10;
5.3 算術(shù)運算符
JavaScript定義了5個算術(shù)運算符,加牍氛、減晨继、乘、除搬俊、求模(取余)紊扬。如果在算術(shù)運算的值不是數(shù)值,那么后臺會先使用Number()轉(zhuǎn)型函數(shù)將其轉(zhuǎn)換為數(shù)值(隱式轉(zhuǎn)換)唉擂。
(1) 加法
var x= 1 + 2;
(2) 減法
var x = 2 - 1;
(3) 乘法
var x = 2 * 1;
(4) 除法
var x = 6 / 3;
(5) 求模
var x = 6 % 3;
5.4 關(guān)系運算符
用于進行比較的運算符稱作為關(guān)系運算符餐屎,JavaScript中有8中關(guān)系運算符:小于(<)、大于(>)玩祟、小于等于(<=)腹缩、大于等于(>=)、相等(==)空扎、不等(!=)藏鹊、 恒等(===)、不恒等(!==)转锈。
和其他運算符一樣盘寡,當(dāng)關(guān)系運算符操作非數(shù)值時要遵循一下規(guī)則:
- 兩個操作數(shù)都是數(shù)值,則數(shù)值比較
- 兩個操作數(shù)都是字符串撮慨,則比較兩個字符串對應(yīng)的字符編碼值
- 兩個操作數(shù)有一個是數(shù)值竿痰,則將另一個轉(zhuǎn)換為數(shù)值脆粥,再進行數(shù)值比較
- 兩個操作數(shù)有一個是對象,則先調(diào)用valueOf()方法或toString()方法影涉,再用結(jié)果比較
相等(==)和恒等(===)的區(qū)別:
相等(==):值相等即可
恒等(===):值和類型必須都相同
不等(!=):值不相同即可
不恒等(!==):值或類型不相等
5.5 邏輯運算符
邏輯運算符通常用于布爾值的操作冠绢,一般和關(guān)系運算符配合使用,有三個邏輯運算符:邏輯與(&&)常潮、邏輯或(||)弟胀、邏輯非(!)。
(1) 邏輯與(&&)
var result = (5 > 4) && (4 > 3); //true喊式,兩邊都為true孵户,返回true
第一個操作數(shù) | 第二個操作數(shù) | 結(jié)果 |
---|---|---|
true | true | true |
true | false | false |
false | true | false |
false | false | false |
(2) 邏輯與 | ||
var box = (9 > 7) | (7 > 8); //true,兩邊只要有一邊是true岔留,返回true | |
第一個操作數(shù) | 第二個操作數(shù) | 結(jié)果 |
----------- | ----------- | ---- |
true | true | true |
true | false | true |
false | true | true |
false | false | false |
(3) 邏輯非(!)
邏輯非運算符可以用于任何值夏哭。無論這個值是什么數(shù)據(jù)類型,這個運算符都會返回一個布爾值献联。它的流程是:先將這個值轉(zhuǎn)換成布爾值竖配,然后取反,規(guī)則如下:
- 操作數(shù)是一個對象里逆,返回false进胯;
- 操作數(shù)是一個空字符串,返回true原押;
- 操作數(shù)是一個非空字符串胁镐,返回false;
- 操作數(shù)是數(shù)值0诸衔,返回true盯漂;
- 操作數(shù)是任意非0數(shù)值(包括Infinity),false笨农;
- 操作數(shù)是null就缆,返回true;
- 操作數(shù)是NaN谒亦,返回true竭宰;
- 操作數(shù)是undefined,返回true诊霹;
5.6 賦值運算符
賦值運算符用等于號(=)表示羞延,就是把右邊的值賦給左邊的變量。
var box = 100; //把100賦值給box變量
復(fù)合賦值運算符通過x=的形式表示脾还,x表示算術(shù)運算符伴箩。
var box = 100;
box = box +100; //200,自己本身再加100
這種情況可以改寫為:
var box = 100;
box += 100; //200鄙漏,+=代替box+100
除了這種+=加/賦運算符嗤谚,還有其他的幾種如下:
- 乘/賦(*=)
- 除/賦(/=)
- 模/賦(%=)
- 加/賦(+=)
- 減/賦(-=)
5.7 其他運算符
(1) 字符串運算符
字符串運算符只有一個棺蛛,即:"+"。它的作用是將兩個字符串相加巩步。
規(guī)則:至少一個操作數(shù)是字符串即可旁赊。
var x = '100' + '100'; //100100
var y = '100' + 100; //100100
var z = 100 + 100; //200
(2) 三元運算符
三元條件運算符其實就是后面將要學(xué)到的if語句的簡寫形式。
var x = 5 > 4 ? 'Y' : 'N';
第六章 流程控制
6.1 if語句
if 語句即條件判斷語句椅野,一共有三種格式:
(1) if (條件表達式) 語句;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
var age = 18;
if(age >= 18){
alert("成年人终畅。");
}
</script>
<body>
</body>
</html>
(2) if (條件表達式) {語句;} else {語句;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
var age = 18;
if(age >= 18){
alert("成年人。");
}else{
alert("未成年人竟闪。");
}
</script>
<body>
</body>
</html>
(3) if (條件表達式) {語句;} else if (條件表達式) {語句;} ... else {語句;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
var score = 90;
if(score >= 85){
alert("優(yōu)秀");
}else if(score >= 75){
alert("良好");
}else if(score >= 60){
alert("及格");
}else{
alert("不及格");
}
</script>
<body>
</body>
</html>
6.2 switch語句
switch語句是多重條件判斷离福,用于多個值相等的比較。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
var day = new Date().getDay();
switch(day){
case 0:
alert("Today is Sunday");
break;
case 1:
alert("Today is Monday");
break;
case 2:
alert("Today is Tuesday");
break;
case 3:
alert("Today is Wednesday");
break;
case 4:
alert("Today is Thursday");
break;
case 5:
alert("Today is Friday");
break;
case 6:
alert("Today is Saturday");
break;
default:
alert("error");
break;
}
</script>
<body>
</body>
</html>
6.3 do...while語句
do...while語句是一種先運行炼蛤,后判斷的循環(huán)語句妖爷。也就是說,不管條件是否滿足理朋,至少先運行一次循環(huán)體絮识。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
var x = 10;
do{
alert(x);
x++;
}while(x <= 5)
</script>
<body>
</body>
</html>
6.4 while語句
while語句是一種先判斷,后運行的循環(huán)語句嗽上。也就是說次舌,必須滿足條件了之后,方可運行循環(huán)體炸裆。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
var x = 10;
while(x <= 5){
alert("x");
x++;
}
</script>
<body>
</body>
</html>
6.5 for語句
for語句也是一種先判斷垃它,后運行的循環(huán)語句。但它具有在執(zhí)行循環(huán)之前初始變量和定義循環(huán)后要執(zhí)行代碼的能力烹看。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
for(var i=0; i<5; i++){
alert(i);
}
</script>
<body>
</body>
</html>
6.6 for...in語句
for...in語句是一種精準(zhǔn)的迭代語句,可以用來枚舉對象的屬性洛史。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
var car = {
"名稱": "奔馳",
"型號": "GLC300",
"顏色": "白色"
};
for(var p in car){
alert(p);
}
</script>
<body>
</body>
</html>
6.7 break和continue語句
break和continue語句用于在循環(huán)中精確地控制代碼的執(zhí)行惯殊。其中,break語句會立即退出循環(huán)也殖,強制繼續(xù)執(zhí)行循環(huán)體后面的語句土思。而continue語句退出當(dāng)前循環(huán),繼續(xù)后面的循環(huán)忆嗜。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
for(var i=0; i<10; i++){
document.write(i+"<br>");
if(i === 5){
document.write("退出循環(huán)"+"<br>");
break;
}
}
document.write("循環(huán)執(zhí)行完成");
</script>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
for(var i=0; i<10; i++){
if(i === 5){
document.write("跳過本次循環(huán)"+"<br>");
continue;
}
document.write(i+"<br>");
}
document.write("循環(huán)執(zhí)行完成");
</script>
<body>
</body>
</html>
第七章 函數(shù)
函數(shù)是定義一次但卻可以調(diào)用或執(zhí)行任意多次的一段JS代碼己儒。函數(shù)有時會有參數(shù),即函數(shù)被調(diào)用時指定了值的局部變量捆毫。函數(shù)常常使用這些參數(shù)來計算一個返回值闪湾,這個值也成為函數(shù)調(diào)用表達式的值。
7.1 函數(shù)聲明
函數(shù)對任何語言來說都是一個核心的概念绩卤。通過函數(shù)可以封裝任意多條語句途样,而且可以在任何地方江醇、任何時候調(diào)用執(zhí)行。JavaScript中的函數(shù)使用function關(guān)鍵字來聲明何暇,后跟一組參數(shù)以及函數(shù)體陶夜。
<script>
function showMessage(){
alert("shwo message function be called.");
}
showMessage();
</script>
<script>
function showMessage(name, age){
alert("Your name:" + name + ", age:" + age);
}
showMessage("Johnny",30);
</script>
7.2 return返回值
帶參數(shù)和不帶參數(shù)的函數(shù),都沒有定義返回值裆站,而是調(diào)用后直接執(zhí)行的条辟。實際上,任何函數(shù)都可以通過return語句跟后面的要返回的值來實現(xiàn)返回值宏胯。
<script>
function getMessage(){
return "shwo message function be called.";
}
var msg = getMessage();
alert(msg);
</script>
<script>
function getMessage(name, age){
return "Your name:" + name + ", age:" + age;
}
var msg = getMessage("Johnny",30);
alert(msg);
</script>
return語句還有一個功能就是退出當(dāng)前函數(shù)羽嫡,注意和break的區(qū)別(break用在循環(huán)和switch分支語句里)。
<script>
function getMessage(name, age){
if(name === "馬云"){
return "哇塞胳嘲,阿里巴巴創(chuàng)始人厂僧,首富啊了牛!"+ "年齡:" + age;
}
return "你的名字: " + name + ", 年齡: " + age;
}
var msg = getMessage("馬云",50);
alert(msg);
</script>
7.3 arguments對象
JavaScript函數(shù)可以不定義參數(shù)颜屠,可以在函數(shù)體內(nèi)可以通過arguments對象來接收傳遞進來的參數(shù)(不常用)。
<script>
function getMessage(){
if(arguments[0] === "馬云"){
return "哇塞鹰祸,阿里巴巴創(chuàng)始人甫窟,首富啊蛙婴!"+ "年齡:" + arguments[1];
}
return "你的名字: " + arguments[0] + ", 年齡: " + arguments[1];
}
var msg = getMessage("張強",30);
alert(msg);
</script>
第八章 對象和數(shù)組
JavaScript對象粗井,其實就是一種類型,即引用類型街图。而對象的值就是引用類型的實例浇衬。在JavaScript中引用類型是一種數(shù)據(jù)結(jié)構(gòu),用于將數(shù)據(jù)和功能組織在一起餐济。它也常被稱為類耘擂,但JavaScript中卻沒有這種東西。雖然JavaScript是一門面向?qū)ο蟮恼Z言絮姆,卻不具備傳統(tǒng)面向?qū)ο笳Z言所支持的類和接口等基本結(jié)構(gòu)醉冤。
JavaScript中所有的類型都是對象。
8.1 Object對象
到目前為止篙悯,我們使用的引用類型最多的可能就是Object類型了蚁阳。雖然Object的實例不具備多少功能,但對于在應(yīng)用程序中的存儲和傳輸數(shù)據(jù)而言鸽照,它確實是非常理想的選擇螺捐。JavaScript 中的所有事物都是對象:字符串、數(shù)值、數(shù)組归粉、函數(shù)等等椿疗,此外,JavaScript 允許自定義對象糠悼。
8.1.1 創(chuàng)建Object
創(chuàng)建Object類型有三種方式届榄。
(1) 使用new運算符創(chuàng)建Object
<script>
var car = new Object(); //使用new方式創(chuàng)建對象
car.name = "Mercedes Benz"; //創(chuàng)建屬性字段
car.model = "GLC 300"; //創(chuàng)建屬性字段
car.color = "White"; //創(chuàng)建屬性字段
</script>
(2) 使用字面量方式創(chuàng)建Object
<script>
var car = {
name: "Mercedes Benz",
model: "GLC 300",
color: "White"
};
</script>
<script>
var car = {
"name": "Mercedes Benz", //屬性字段也可以使用字符串形式
"model": "GLC 300",
"color": "White"
};
</script>
<script>
var car = {}; //使用字面量及傳統(tǒng)賦值方式,字面量聲明為空對象
car.name = "Mercedes Benz";
car.model = "GLC 300";
car.color = "White";
</script>
(3) 使用構(gòu)造函數(shù)方式
<script>
function car(name, model, color){
this.name = name;
this.model = model;
this.color = color;
}
</script>
8.1.2 定義Object屬性
JavaScript可以為對象定義三種類型的屬性:私有屬性倔喂、實例屬性和類屬性铝条。
(1) 私有屬性的定義
私有屬性只能在構(gòu)造函數(shù)內(nèi)部定義與使用。
<script>
function car(name, model, color){
this.name = name;
this.model = model;
this.color = color;
var msg = "品牌:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color;
}
var car = new car("Mercedes Benz", "GLC 300", "White");
alert("您的愛車:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color);
alert(car.showMsg()); //undefined
</script>
(2) 實例屬性的定義
實例屬性定義席噩,也存在兩種方式:prototype方式(原型方式)和this方式班缰。實例屬性必須通過對象的實例進行引用
prototype方式(原型方式):functionName.prototype.propertyName=value;
<script>
function car(name, model, color){
car.prototype.name = name;
car.prototype.model = model;
car.prototype.color = color;
}
var car = new car("Mercedes Benz", "GLC 300", "White");
alert("您的愛車:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color);
</script>
this方式:this.propertyName=value;
<script>
function car(name, model, color){
this.name = name;
this.model = model;
this.color = color;
}
var car = new car("Mercedes Benz", "GLC 300", "White");
alert("您的愛車:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color);
</script>
(3) 類屬性的定義
類屬性可以直接通過類名進行引用。
<script>
function car(){};
car.name = "Mercedes Benz";
car.model = "GLC 300";
car.color = "White";
alert("您的愛車:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color);
</script>
8.1.3 取得Object的屬性
取得Object屬性值也有兩種方式:
(1) 使用.運算符(常用)
<script>
var car = {}; //使用字面量及傳統(tǒng)賦值方式悼枢,字面量聲明為空對象
car.name = "Mercedes Benz";
car.model = "GLC 300";
car.color = "White";
alert("您的愛車:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color);
</script>
<script>
function car(name, model, color){
this.name = name;
this.model = model;
this.color = color;
}
var car = new car("Mercedes Benz", "GLC 300", "White");
alert("您的愛車:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color);
</script>
(2) 使用[ ]運算符
<script>
var car = {}; //使用字面量及傳統(tǒng)賦值方式埠忘,字面量聲明為空對象
car.name = "Mercedes Benz";
car.model = "GLC 300";
car.color = "White";
alert("您的愛車:" + car["name"] + "\n型號:" + car["model"] + "\n顏色:" + car["color"]);
</script>
8.1.4 創(chuàng)建Object的方法
JS中可以為對象定義三種類型的方法:私有方法、實例方法和類方法馒索,與Java類似:
? 私有方法只能在對象內(nèi)部使用
? 實例方法必須在對象實例化后才能使用
? 類方法可以直接通過類名去使用
(1) 私有方法
私有方法必須在構(gòu)造函數(shù)體內(nèi)定義莹妒,而且只能在構(gòu)造函數(shù)體內(nèi)使用。
<script>
function car(name, model, color){
this.name = name;
this.model = model;
this.color = color;
function getCar(){
return "品牌:" + name + "\n型號:" + model + "\n顏色:" + color;
}
this.carInfo = getCar();
}
var carObj = new car("Mercedes Benz", "GLC 300", "White");
alert(carObj.carInfo);
</script>
(2) 實例方法
實例方法必須在對象實例化后才能使用绰上。定義實例方法有兩種方式:prototype方式(原型方式)和this方式旨怠。
prototype方式(原型方式)
<script>
function car(name, model, color){
car.prototype.name = name;
car.prototype.model = model;
car.prototype.color = color;
car.prototype.getCarInfo = function(){
return "品牌:" + name + "\n型號:" + model + "\n顏色:" + color;
}
}
var car = new car("Mercedes Benz", "GLC 300", "White");
alert(car.getCarInfo());
</script>
this方式
<script>
function car(name, model, color){
this.name = name;
this.model = model;
this.color = color;
this.getCarInfo = function(){
return "品牌:" + name + "\n型號:" + model + "\n顏色:" + color;
}
}
var car = new car("Mercedes Benz", "GLC 300", "White");
alert(car.getCarInfo());
</script>
(3) 類方法
類方法需要在構(gòu)造函數(shù)外面定義,可以直接通過構(gòu)造函數(shù)名對其進行引用蜈块。
<script>
function car(){};
car.getCarInfo = function(name, model, color){
return "品牌:" + name + "\n型號:" + model + "\n顏色:" + color;
}
alert(car.getCarInfo("Mercedes Benz", "GLC 300", "White"));
</script>
8.2 Array數(shù)組
除了Object類型之外鉴腻,Array類型是JavaScript最常用的類型。而且JavaScript中的Array類型和其他語言中的數(shù)組有著很大的區(qū)別百揭。雖然數(shù)組都是有序排列爽哎,但JavaScript中的數(shù)組每個元素可以保存任何類型。JavaScript中數(shù)組的大小也是可以調(diào)整的器一。
8.2.1 創(chuàng)建數(shù)組
創(chuàng)建Array類型有兩種方式:第一種是new運算符倦青,第二種是字面量。
(1) 使用new關(guān)鍵字創(chuàng)建數(shù)組
<script>
var car = new Array(); //創(chuàng)建了一個數(shù)組
var car = new Array(10); //創(chuàng)建一個包含10個元素的數(shù)組
var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi"); //創(chuàng)建一個數(shù)組并分配好了元素
</script>
(2) 使用字面量創(chuàng)建數(shù)組
<script>
var car = []; //創(chuàng)建了一個數(shù)組
var car = ["Mercedes Benz","BMW","LAND ROVER","Audi"]; //創(chuàng)建一個數(shù)組并分配好了元素
</script>
8.2.2 讀取數(shù)組
讀取數(shù)組可使用索引下標(biāo)來讀取數(shù)組的值盹舞。
<script>
var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");
for(var i=0; i<car.length; i++){
document.write(car[i]+"<br/>");
}
</script>
8.2.3 數(shù)組中的方法
如上面所說,數(shù)組也是一種對象隘庄,所以也具有很多內(nèi)置的方法踢步。
(1) 棧方法
JavaScript數(shù)組提供了一種讓數(shù)組的行為類似于其他數(shù)據(jù)結(jié)構(gòu)的方法。也就是說丑掺,可以讓數(shù)組像棧一樣获印,可以限制插入和刪除項的數(shù)據(jù)結(jié)構(gòu)。棧是一種數(shù)據(jù)結(jié)構(gòu)(后進先出)街州,也就是說最新添加的元素最早被移除兼丰。而棧中元素的插入(或叫推入)和移除(或叫彈出)玻孟,只發(fā)生在一個位置——棧的頂部。JavaScript為數(shù)組專門提供了push()和pop()方法鳍征。
push()方法可以接收任意數(shù)量的參數(shù)黍翎,把它們逐個添加到數(shù)組的末尾,并返回修改后數(shù)組的長度艳丛。而pop()方法則從數(shù)組末尾移除最后一個元素匣掸,減少數(shù)組的length值,然后返回移除的元素氮双。
<script>
var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");
car.push("Ford");
alert(car.join('|'));
car.pop();
alert(car.join('|'));
</script>
(2) 隊列方法
棧方法是后進先出碰酝,而隊列方法是先進先出。隊列在數(shù)組的末端添加元素戴差,從數(shù)組的前端移除元素送爸。通過push()向數(shù)組末端添加一個元素,然后通過shift()方法從數(shù)組前端移除一個元素暖释。
<script>
var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");
car.push("Ford");
alert(car.join('|'));
car.shift();
alert(car.join('|'));
</script>
JavaScript還為數(shù)組提供了一個unshift()方法袭厂,它和shift()方法的功能完全相反。unshift()方法為數(shù)組的前端添加一個元素饭入。
<script>
var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");
car.unshift("Ford");
alert(car.join('|'));
car.shift();
</script>
注意:IE瀏覽器對unshift()方法總是返回undefined而不是數(shù)組的新長度
(3) 排序方法
<script>
var car = new Array(2,4,5,1,3,10);
alert(car.sort(function(a,b){
return a-b; //升序
}));
alert(car.sort(function(a,b){
return b-a; //降序
}));
</script>
第九章 Function類型
在JavaScript中嵌器,F(xiàn)unction(函數(shù))類型實際上是對象。每個函數(shù)都是Function類型的實例谐丢,而且都與其他引用類型一樣具有屬性和方法爽航。由于函數(shù)是對象,因此函數(shù)名實際上也是一個指向函數(shù)對象的指針乾忱。
9.1 函數(shù)的聲明
(1) 普通函數(shù)的聲明
<script>
function sum(num1, num2){
return num1 + num2;
}
</script>
(2) 使用變量初始化函數(shù)
<script>
var sum = function(num1, num2){
return num1 + num2;
}
</script>
9.2 作為值的函數(shù)
JavaScript中的函數(shù)名本身就是變量讥珍,所以函數(shù)也可以作為值來使用。也就是說窄瘟,不僅可以像傳遞參數(shù)一樣把一個函數(shù)傳遞給另一個函數(shù)衷佃,而且可以將一個函數(shù)作為另一個函數(shù)的結(jié)果返回。
<script>
function getResult(sum, num){
return sum(num);
}
function sum(num){
return num + 10;
}
var result = getResult(sum, 10); //將sum函數(shù)作為參數(shù)傳遞給getResult函數(shù)
alert(result);
</script>
9.3 函數(shù)內(nèi)部屬性
在函數(shù)內(nèi)部蹄葱,有兩個特殊的對象:arguments和this氏义。arguments是一個類數(shù)組對象,包含著傳入函數(shù)中的所有參數(shù)图云,主要用途是保存函數(shù)參數(shù)惯悠。但這個對象還有一個名叫callee的屬性,該屬性是一個指針竣况,指向擁有這個arguments對象的函數(shù)克婶。
<script>
function recursion(num) {
if (num <= 1) {
return 1;
} else {
return num * recursion(num-1); //一個簡單的遞歸
}
}
var result = recursion(5);
alert(result);
</script>
<script>
function recursion(num) {
if (num <= 1) {
return 1;
} else {
return num * arguments.callee(num-1);
}
}
var result = recursion(5);
alert(result);
</script>
function sum(num1, num2, num3){
alert(arguments.length);
return num1 + num2 + num3;
}
函數(shù)內(nèi)部另一個特殊對象是this,其行為與Java和C#中的this大致相似。換句話說情萤,this引用的是函數(shù)據(jù)以執(zhí)行操作的對象鸭蛙,或者說函數(shù)調(diào)用語句所處的那個作用域。PS:當(dāng)在全局作用域中調(diào)用函數(shù)時筋岛,this對象引用的就是window娶视。
<script>
window.color = "red";
var car = {
brand: "Mercedes Benz",
color: "white",
drive: function(){
alert(this.brand + " " + this.color + " is driving."); //這里的color引用的是具備的color
}
};
car.drive();
alert(this.color); //這個color屬性引用的是全局的color
</script>
<script>
window.color = "red";
window.brand = "BMW";
var car = {
brand: "Mercedes Benz",
color: "white"
};
function drive () {
alert(this.brand + " " + this.color + " is driving.");
}
drive(); //這里的color和brand屬性引用的是全局的color和brand
car.drive = drive;
car.drive(); //這里的color和brand屬性引用的是局部的color和brand
</script>