文章目錄
- 【One】 JavaScript語言基礎
- 【Two】JavaScript基本語句
- 【Three】函數
- 一、函數的定義和調用
- 二、函數的參數——例子:輸出圖書的名稱和作者
- 三、函數的返回值——例子:計算購物車中商品總價
- 四、嵌套函數
- 五、遞歸函數
- 六、變量的作用域
- 七、內置函數
- 八、定義匿名函數
- 【Four】對象
- 【Five】數組
- 一、定義數組
- 二、操作數組元素
- 三、數組的屬性
- 四、數組的方法
- 【Six】String對象
- 【Seven】JavaScript 事件處理
- 【Eight】JavaScript 文檔對象
- 【Nine】JavaScript 圖像對象
- 【Ten】JavaScript 表單對象
- 【Eleven】JavaScript 文檔對象模型(DOM)
- 【Twelve】JavaScript Window窗口對象
- 【Thirteen】jQuery 選擇器
- 【Fourteen】jQuery 控制頁面
- 【Fifteen】jQuery 事件處理
- 【Sixteen】jQuery 動畫效果
開頭引言:我所使用的編譯環境是
WebStorm 2019.3.1 x64
【One】 JavaScript語言基礎
一、數據類型
JavaScript
的數據類型分爲基本數據類型和複合數據類型。
1、數值型
數值型(number)
是最基本的數據類型,和其他程序設計語言的不同之處在於,它不區分整形數值和浮點型數值,在JavaScript
中,所有的數值都是由浮點型
表示的。
數值型包括以下幾種類型:
十進制
:以10爲基數,由0~9組成的數字序列八進制
:以8爲基數、由0~7組成的序列十六進制
:以16爲基數、由0~9、a(A) ~ f(F)組成的序列浮點型數據
:可以具有小數點,它可以由傳統計數法(例如:1.234)和科學計數法(例如:6e+3)表示特殊值InfInity
:特殊的值Infinity(無窮大),如果一個數值超出了JavaScript
表示的最大或最小值表示的範爲,就會輸出Infinty
或-Infinty
特殊值NaN
:Not a Number,即非數字,在進行數值運算時,產生了未知的結果或錯誤,就會返回NaN
。
以下的代碼總結了以上幾種類型的使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數值型數據</title>
</head>
<body>
<script type="text/javascript">
document.write("RGB顏色的#6699FF的三種顏色的色值分別爲:");
document.write("<p>R:"+0x66);
document.write("<br>G:"+0x99);
document.write("<br>B:"+0xFF);
document.write("<hr>");
document.write("輸出房屋的單價、面積和總價:");
var dj=8500;var mj=80;
document.write("房屋單價:"+dj);
document.write("<br>房屋面積:"+mj);
document.write("<br>房屋總價:"+(dj*mj)+"元");
document.write("<hr>");
document.write("科學計數法表示的浮點數的輸出結果:");
document.write("<p>");
document.write(3e+6 + "<br>");
document.write(3.5e3 + "<br>");
document.write(1.236E-2);
document.write("<hr>");
document.write("特殊值Infinity<br>");
document.write(1/0);
document.write("<br>"+-1/0);
document.write("<hr>");
document.write("特殊值NaN<br>");
document.write(0/0);
</script>
</body>
</html>
大功告成!看一下效果:
2、字符串型
字符串(string)是由0個或多個字符組成的序列,它可以包含大小寫字母、數字、標點符號或其他字符,同時也可以包含漢字。字符型的數據包含在單引號或雙引號中,由單引號定界的字符串中可以含有雙引號,同樣由雙引號定界的字符串可以包含單引號。
有的時候,字符串中使用的引號會產生匹配混亂的問題,例如:
"字符串是包含在單引號'或雙引號"中的"
對於這種情況,必須使用轉義字符
,和C語言一樣,JavaScript中的轉義字符是\
,通過轉義字符可以在字符串中添加不可顯示的特殊字符,或者防止引號匹配混亂的問題。如上面的例子,可以這樣寫:
"字符串是包含在單引號\'或雙引號\"中的"
下表列出了JavaScript
中常用的轉義字符:
轉義字符 | 描述 | 轉義字符 | 描述 |
---|---|---|---|
\b |
退格 | \v |
垂直製表符 |
\n |
換行 | \r |
回車符 |
\t |
水平製表符,Tab空格 | \\ |
反斜槓 |
\f |
換頁 | \OOO |
八進制整數,範圍000~777 |
\' |
單引號 | \xHH |
十六進制整數 |
\" |
雙引號 | \uhhhh |
十六進制編碼的Unicode 字符 |
在alert
語句中使用轉義字符\n
的代碼如下:
alert("Web:\nHTML\nCSS\nJavaScript");
效果圖:
但是在document.write()
中使用轉義字符時,只有將其放在格式化文本塊中才會起作用,所以腳本必須放在<pre>
和</pre>
的標記內。例如:
document.write("<pre>Hello\nJavaScript</pre>");
效果如下:
3、布爾型
布爾型的值只有真
和假
,即true
和false
,它通常在JavaScript
程序中用來作爲比較後的所得的結果,通常用於控制結構,例如:
if(n==1) //如果這個值爲真,m加一
m = m+1;
else //否則,n加一
n = n+1;
二、常量和變量
每一種計算機語言都有自己的數據結構。在JavaScript
種,常量和變量時數據結構的重要組成部分。
1、常量
常量是指在程序運行過程種保持不變的數據
。例如,123是數值型常量,”JavaScript腳本“是字符串型常量。
2、變量——例子:輸出球員的信息
變量是指一個已經命名的存儲單元,它的作用就是爲數據操作提供存放信息的容器。變量的值可能會隨着程序的執行而改變。
變量有兩個基本特徵:變量名和變量值。變量名的命名規則是必須以字母或下劃線開頭,其他字符可以數字、字母或下劃線,不能與關鍵字重名,不能包含空格、加號或減號等其他字符。變量的名字嚴格區分大小寫。
JavaScript的變量可以任意命名,但在進行編程的時候,最好還是遵守匈利亞命名規範,起一個便於記憶,且有意義的變量名稱,增加程序的可讀性。
變量的聲明:
由關鍵字var
聲明,語法格式如下:
var name;
var a,b,c; //同時聲明a,b,c三個變量
變量的賦值:
var Blog = "學會JavaScript這一篇就夠了~"; //聲明變量並進行初始化賦值
注意:
- 如果只是聲明瞭變量,並未對其賦值,則其默認值爲
undefined
- 可以使用var語句重複聲明同一個變量,也可以在重複聲明變量時爲該變量賦一個新值,新值會覆蓋前一個賦的值
變量的類型:
變量的類型是指變量的值所屬的數據類型,它可以時數值型、字符串型或布爾型等,因爲JavaScript
是一種弱類型
的程序語言,所以可以把任意類型的數據賦值給變量。比如:
var num = 100 ; //定義數值型變量
num = "JavaScript這一篇就夠了~"; //定義字符串型變量
例子:輸出球員的信息
直接上代碼,將科比的信息都存儲在了變量裏面:
<h1 style="font-size: 24px;">科比·布萊恩特</h1>
<script type="text/javascript">
var alias="小飛俠"; //定義別名變量
var height = 198; //定義身高變量
var score = 33643; //定義總得分變量
var achievment="五屆NBA總冠軍"; //定義主要成就變量
var position="得分後衛/小前鋒"; //定義場上位置變量
document.write("別名:"+alias+"<br>"); //輸出
document.write("身高:"+height+"釐米<br>");
document.write("總得分:"+score+"分<br>");
document.write("主要成就:"+achievment+"<br>");
document.write("場上位置:"+position+"<br>");
</script>
大功告成,看一下效果:
三、運算符
運算符也稱爲操作符,它是完成一系列操作的符號。運算符用於將一個或幾個值進行計算而生成一個新的值,對齊進行計算的值稱爲操作數,操作數可以是常量或變量。
1、算術運算符——例子:將華氏度轉換爲攝氏度
算術運算符用於在程序種進行加、減、乘、除等運算,下標列出了JavaScript
常用的算術運算符:
運算符 | 描述 | 示例 |
---|---|---|
+ |
加法運算符 | 4+6 //返回值爲10 |
- |
減法運算符 | 7-2 //返回值爲5 |
* |
乘法運算符 | 7*3 //返回值爲21 |
/ |
除法運算符 | 12/3 //返回值爲4 |
% |
求模運算符 | 7%4 //返回值爲3 |
++ |
自增運算符 | x=1;y=x++;z=++x; // y的值爲1,z的值爲3,x的值爲4 |
-- |
自減運算符 | x=6;y=x–;y=–x; // y的值爲6,z的值爲4,x的值爲4 |
例子:將華氏度轉換爲攝氏度
直接上代碼:
<h2>西紅市當前氣溫</h2>
<script type="text/javascript">
var degreeF = 68; //定義表示華氏溫度
var degreeC = 0; //定義表示攝氏度
degreeC=5/9*(degreeF-32); //運算
document.write("華氏度:"+degreeF+"°F <br>");
document.write("攝氏度:"+degreeC+"°C");
</script>
大功告成,看一下效果:
2、字符串運算符——例子:顯示票房信息
字符串運算符是用於兩個字符串數據之前的運算符,它的作用是將兩個字符串拼接起來。如下表所示:
運算符 | 描述 | 示例 |
---|---|---|
+ |
連接兩個字符串 | "學會JavaScript"+"這一篇就夠了~" |
+= |
連接兩個字符串並將結果賦給第一個字符串 | var name="學會JavaScript"; name+="這一篇就夠了"; |
例子:顯示票房信息
<script type="text/javascript">
var movieName,director,type,actor,boxOffice; //聲明變量
movieName="美人魚";director="周星馳";
type="喜劇、愛情、科幻";actor="鄧超、林允";
boxOffice=33.9;
alert("影片名稱:"+movieName+"\n導演:"+director+"\n類型:"+
type+"\n主演:"+actor+"\n票房:"+boxOffice+"億");
</script>
大功告成,效果如下:
3、比較運算符——例子:比較兩個數值的大小
下表是JavaScript種常用的比較運算符:
運算符 | 描述 | 示例 |
---|---|---|
< |
小於 | 1<6 返回值爲false |
> |
大於 | 7>10 返回值爲false |
<= |
小於等於 | 10<=10 返回值爲true |
>= |
大於等於 | 3>=6 返回值爲false |
== |
等於。只根據表面值進行判斷,不涉及數據類型 | “17”==17 返回值爲true |
=== |
絕對等於。根據表面值和數據類型同時進行判斷 | “17”===17 返回值爲false |
!= |
不等於。只根據表面值進行判斷,不涉及數據類型 | “17”!=17 返回值爲false |
!== |
絕對不等於。根據表面值和數據類型同時進行判斷 | “17”!==17返回值爲true |
例子:比較兩個數值的大小
直接寫代碼:
<script type="text/javascript">
var age=25;
document.write("age變量的值爲:"+age+"<p>");
document.write("age>20:");
document.write(age>20);
document.write("<br> age<20:");
document.write(age<20);
document.write("<br>age==20:");
document.write(age==20);
</script>
大功告成!看一下效果:
4、賦值運算符
下表給出了賦值運算符:
運算符 | 描述 | 示例 |
---|---|---|
= |
將右邊表達式的值賦值給左邊的變量 | Name = “wzq” |
+= |
將運算符左邊的變量加上右邊表達式的變量賦值給左邊的變量 | a += b |
-= |
將運算符左邊的變量減去右邊表達式的變量賦值給左邊的變量 | a -= b |
*= |
將運算符左邊的變量乘上右邊表達式的變量賦值給左邊的變量 | a *= b |
/= |
將運算符左邊的變量除以右邊表達式的變量賦值給左邊的變量 | a /= b |
%= |
將運算符左邊的變量用右邊的表達式求模,並將結果賦給左邊的變量 | a %= b |
5、邏輯運算符
邏輯運算符用於對一個或多個布爾值進行邏輯運算,和C語言一樣,由與或非組成。
運算符 | 1 邏輯 1 | 1 邏輯 0 | 0 邏輯 1 | 0 邏輯 0 |
---|---|---|---|---|
&& |
true |
false |
false |
false |
|| |
true |
true |
true |
false |
關於非!
運算,非真即爲假,非假即爲真
6、條件運算符
即爲三目運算符,語法格式如下:
表達式?結果1:結果2;
例如:
var a=10,b=10;
alert(a==b?"相等":"不相等");
結果彈出對話框,輸出相等
7、其他運算符
逗號運算符: 逗號運算符用於將多個表達式排在一起,而整個表達式的值爲最後一個表達式的值。例如:
var a,b,c,d;
a=(b=3,c=5,d=6);
alert("a的值爲"+a);
輸出a的值爲6
typeof
運算符: 用於判斷一個操作數的數據類型,它可以返回一個字符串,該字符串的說明了操作數是什麼數據類型。這對於判斷一個變量是否已被定義特別關鍵。語法格式如下:
typeof 操作數
下表爲不同數據類型使用typeof
運算符的返回值
數據類型 | 返回值 | 數據類型 | 返回值 |
---|---|---|---|
數值 | number |
null | object |
字符串 | string |
對象 | object |
布爾值 | boolean |
函數 | object |
undefined | undefined |
new
運算符: 在JavaScript種有很多內置對象,通過new
運算符可以用來創建一個新的內置對象實例,語法如下:
對象實例名稱 = new 對象類型(參數)
對象實例名稱 = new 對象類型
8、運算符優先級
JavaScript運算符都有明確的優先級與結合性。優先級較高的運算符將先於優先級較低的運算符進行運算,下圖展示了運算符的優先級:
【Two】JavaScript基本語句
一、條件判斷語句
即if
、if…else
、if…else if
、switch
等語句,用於判斷
1、if 語句——例子:輸出考試等級
簡單if
語句, 格式如下:
if(表達式){
語句
}
執行流程圖:
if…else
語句 ,語法格式如下:
if(表達式){
語句1
}else{
語句2
}
執行過程流程圖如下:
if…else if
語句,語法格式如下:
if(表達式1){
語句1
}
else if(表達式2){
語句2
}
else{
語句3
}
執行過程流程圖如下:
例子:輸出考試成績對應的等級
比較簡單,直接上代碼:
<script type="text/javascript">
var grade="";
var score=85;
if(score>=90) grade="優秀";
else if(score>=75) grade="良好";
else if(score>=60) grade="及格";
else grade="不及格";
alert("周星星的考試成績"+grade);
</script>
效果如下:
2、switch語句——例子:輸出獎項及獎品
多路分支語句,其語法格式如下:
switch(表達式){
case 常量表達式1:
語句1;
break;
case 常量表達式2:
語句2;
break;
……
case 常量表達式n:
語句n;
break;
default:
語句n+1;
break;
}
執行過程流程圖如下:
例子:輸出獎項級別及獎品
過程簡單,直接上代碼:
<script type="text/javascript">
var grade="",prize="";
var code=3;
switch (code) {
case 1:
grade="一等獎";
prize="博主一人";
break;
case 2:
grade="二等獎";
prize="博主室友二人";
break;
case 3:
grade="三等獎";
prize="天然足球場西北風五斤";
break;
default:
grade="安慰獎";
prize="天然足球場西北風一斤";
break;
}
alert("該員工獲得了"+grade+"\n獎品是"+prize);
</script>
二、循環語句
即while
、do…while
、for
語句
1、循環基本語句while、do…while、for、循環的嵌套
while
語句 ,語法格式如下:
while(表達式){
語句
}
執行過程流程圖:
do…while
語句 ,語法格式如下:
do{
語句
}while(表達式);
執行過程流程圖如下圖所示:
for
語句,語法格式如下:
for(初始化表達式;條件表達式;迭代表達式){
語句
}
執行過程流程圖:
例子:計算100以內的所有奇數之和
過程簡單,直接上代碼:
<script type="text/javascript">
var i=0,sum=0;
for(i=1;i<100;i++)
if(i%2!=0)
sum+=i;
alert("100以內的所有奇數之和爲:"+sum);
</script>
效果如下:
當然,循環語句也可以進行嵌套,在一個循環裏面嵌套一個循環就實現了嵌套,下面通過輸出九九乘法口訣表展示嵌套的使用
過程簡單,代碼如下:
<h1>輸出乘法口訣表</h1>
<script type="text/javascript">
var i,j;
for(i=1;i<10;i++){
for(j=1;j<=i;j++)
document.write(j+"x"+i+"="+j*i+" ");
document.write("<br>");
}
</script>
效果如下:
2、循環控制語句break和continue
continue
語句用於跳過本次循環,並開始下一次循環,其語法格式如下:
continue;
例如,在for
語句中通過continue
語句輸出10以內不包括5的自然數的代碼如下:
var i;
for(i = 1 ; i <= 10 ; i ++ ){
if(i==5) continue;
document.write(i+"\n");
}
break
語句用與,跳出循環,並開始執行下一調語句,其語法格式如下:
break;
例如,在for
語句中通過break
語句找到第一個能被5和3整除的數字
var i;
for(i = 1 ; i <= 10 ; i ++ ){
if(i%3==0&&i%5==0)
break;
document.write("i="+i);
}
三、異常處理語句
JavaScript
的異常處理語句是從Java
移植過來的,用於處理程序中出現的莫名其妙的錯誤,增加了代碼的健壯性。
1、try…catch…finally語句
具體語法格式如下:
try{
somestatements;
}catch(exception){
somestatements;
}finally{
somestatements;
}
參數說明:
try
:嘗試執行代碼的關鍵字catch
:捕捉異常的關鍵字finally
:最終一定會被處理的代碼的關鍵字,該關鍵字和後面的大括號中的語句可以省略
例如, 當在程序中輸入了不正確的方法名charat時,將彈出catch區域中的異常提示信息,並且最終彈出finally區域中的信息提示。程序如下:
<script type="text/javascript">
var str="I like JavaScript";
try {
document.write(str.charat(5));
}catch (exception) {
alert("運行時有異常發生");
}finally {
alert("結束try…catch…finally語句");
}
</script>
2、Error對象
try…catch…finally
語句中的catch
通常捕捉的對象爲Error
對象,當運行JavaScript
代碼時,如果產生了錯誤或異常,JS
就會生成一個Error
對象的實例來描述錯誤,該實例中包含了一些特定的錯誤信息。
Error對象有以下兩個屬性:
name
:表示異常類型的字符串message
:實際的異常信息
例如:
<script type="text/javascript">
var str="I like JavaScript";
try {
document.write(str.charat(5));
}catch (exception) {
alert("實際的錯誤消息爲:"+exception.message+"\n錯誤的類型字符串爲:"+exception.name);
}finally {
alert("結束try…catch…finally語句");
}
</script>
如下圖所示:
3、使用throw語句拋出異常
有些JavaScript代碼並沒有語法上的錯誤,但存在邏輯錯誤。對於這種錯誤,JS不會拋出異常,這樣就需要創建一個Error
對象的實例,並使用throw
來拋出異常。在程序中使用throw
語句可以有目的地拋出異常。
語法格式如下:
throw new Error("somestatements");
例如,除數爲0時的情況:
程序如下:
<script type="text/javascript">
try{
var num=1/0;
if(num=="Infinity")
throw new Error("除數不可以爲0");
}catch (e) {
alert(e.message);
}
</script>
效果如下:
【Three】函數
函數就是可以作爲一個邏輯單元對待的一組JavaScript
代碼。使用函數可以使代碼更爲簡潔、提高重用性。
一、函數的定義和調用
1、函數的定義
在JavaScript
中,可以使用function
語句來定義一個函數。這種形式是由關鍵字function
、函數名加一組參數以及置於大括號中需要執行的一段代碼構成的。語法格式如下:
function 函數名([參數1,參數2,……]){
語句
[return 返回值]
}
參數說明:
函數名
:必選,函數名必須是唯一的,並且命名必須區分大小寫參數
:可選,用於指定參數列表,多個參數時候,中間必須用,
間隔,最多不可以超過255個參數語句
:必選,函數體的內容,用於實現函數的功能的語句。返回值
:可選,用於返回函數值。返回值可以是表達式、變量或常量
例如定義一個計算價格的函數:
function account(price,number){
var sum = price*number;
return sum;
}
2、函數的調用
函數需要調用纔會執行,要執行一個函數需要在特定的位置調用函數。
(1)函數的簡單調用
語法如下:
函數名(傳遞給函數的參數1,傳遞給函數的參數2,……);
函數的定義語句通常被放在
HTML
文件的<head>
段中,函數的調用可以放在HTML
文件中的任何一個位置。
例如定義一個函數OutputImage()
,這個函數的功能是在頁面中輸出一張圖片,然後通過函數的調用這個函數實現圖片的輸出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>調用函數輸出一張圖片</title>
<script type="text/javascript">
function OutputImage() {
document.write("<img src='1.jpg'>"); //圖片需要拖到項目文件夾內
}
</script>
</head>
<body>
<script type="text/javascript">
OutputImage();
</script>
</body>
</html>
效果如下:
(4)在事件響應中調用函數
當用戶單擊某個按鈕或某個複選框時都將觸發事件。
例如,當用戶單擊某個按鈕時執行相應的函數,可以使用如下單嗎實現該功能:
函數:
function test() {
alert("我喜歡JavaScript");
}
調用:
<form action="" method="post" name="form1">
<input type="button" value="提交" onclick="test()">
<!-- 在事件觸發時調用自定義函數-->
</form>
效果如下:
(3)通過連接調用函數
函數除了可以在響應事件中被調用之外,還可以在連接中被調用。在<a>
標記中的href
屬性中使用javascript: 函數名()
格式來調用函數,當用戶點擊這個連接時,相關函數會被執行。
格式:
<a href="javascript:test();">單擊連接</a>
二、函數的參數——例子:輸出圖書的名稱和作者
在定義函數時,將指定的參數稱爲形式參數,簡稱爲形參;而將調用函數時實際傳遞的值稱爲實際參數,簡稱實參。在JS
中定義函數參數的格式如下:
function 函數名(形參1,形參2,……){
函數體
}
調用的格式:
函數名(實參1,實參2,……);
例子:輸出圖書的名稱和作者
<head>
裏面代碼如下:
<script type="text/javascript">
function show(BookName,author) {
alert("圖書名稱:"+BookName+"\n圖書作者:"+author);
}
</script>
<body>
裏面:
<script type="text/javascript">
show("射鵰英雄傳","金庸");
</script>
效果如下:
三、函數的返回值——例子:計算購物車中商品總價
對於函數調用,既可以通過參數向函數傳遞數據,函數也可以返回數據,即返回值,語法格式如下:
return 表達式;
這條語句作用是結束函數,並把後面的表達式的值作爲函數的返回值。
例如:計算購物車中商品總價
<head>
標籤內:
<script type="text/javascript">
function price(unitPrice,number) {
var total = unitPrice*number;
return total;
}
</script>
<body>
標籤內:
<script type="text/javascript">
alert("總價:"+price(5000,2));
</script>
效果如下:
四、嵌套函數
嵌套函數就是指在一個函數的函數體中使用了其他的函數。嵌套函數的使用包括函數的嵌套定義和函數的嵌套調用。
1、函數的嵌套定義
函數的嵌套定義是指:在某個函數內,再定義別的函數,語法格式如下:
function outFun(){
function inFun(x,y){
alert(x+y);
}
inFun(1,5);
}
outFun();
如上面的例子,執行outFun()
函數,然後調用了嵌套的函數inFun(1,5)
傳遞了兩個參數,計算兩個數的和,最後把和彈到頁面上。
2、函數的嵌套調用——例子:獲取選手的平均分
在JS
中,允許在一個函數的函數體中對一個函數進行調用,這就是函數得遞歸調用,例如:
function a(){
alert("調用函數a");
}
function b(){
a();
}
b();
在函數b
中對函數a
調用最後輸出。
看一個例子——獲取選手的平均分。
過程簡單,直接上代碼:
<script type="text/javascript">
function getAver(score1,score2,score3) {
return (score1+score2+score3)/3;
}
function getRes(score1,score2,score3) {
document.write("3個評委給出的分數分別爲:"+score1+"分、"
+score2+"分、"+score3+"分<br>");
var res = getAver(score1,score2,score3);
document.write("周星星的最後得分爲:"+res+"分");
}
getRes(91,89,93);
</script>
效果如下:
五、遞歸函數
所謂遞歸
就是函數自己調用自己,一般的語法格式如下:
function 函數名(參數1){
if(終止條件) return 常量;
函數名(參數2);
}
遞歸的調用,最爲經典的例子,就是斐波那契數列的運用,也就是大家耳熟能詳的兔子繁殖問題。斐波那契數列的前兩項等於1,從第三項開始的值等於前兩項值的和。直接來看一下代碼:
<script type="text/javascript">
function f(n) {
if(n==1||n==2) return 1;
return f(n-1)+f(n-2);
}
var i;
for(i = 1 ; i <= 10 ; i ++ )
document.write("第"+i+"項斐波那契數列的值爲:"+f(i)+"<br>");
</script>
效果如下:
使用遞歸可以幫助我們做很多很多事情、比如用dfs(深度優先搜索)
走一個迷宮、TarJan算法
等等。但是遞歸必須包含一個結束遞歸
的條件,否則他會一直走一下,直到程序崩潰;還需要包含一個遞歸調用語句
,沒有遞歸的調用哪裏來的遞歸是不是。
六、變量的作用域
變量的作用域指的是變量在程序中的有效範圍,即在有效範圍內可以使用該變量。
1、全局變量和局部變量
所謂全局變量
指的是:定義在所有函數之外的變量,調用函數無需傳參即可使用。
局部變量
指的是:定義在函數體內的變量,只在函數外部起到了作用,函數之外不可調用。
比如下面的代碼:
var a="這是全局變量";
function send(){
var b="這是局部變量";
document.write(a+"<br>"+b);
}
send();
上述代碼中,局部變量b
只在函數send
內起作用,全局變量a
在全局都起作用,都可以調用。
2、變量的優先級
如果上面的代碼,變量a
在函數內又被定義了一次,那麼優先執行函數體內的變量。比如:
var a = "這是全局變量";
function send(){
var a = "這是局部變量";
document.write(a);
}
send();
最後輸出這是局部變量
。
七、內置函數
在JS
中,除了可以自定義函數之外,還可以使用JS
的內置函數,這些內置函數是由JS
自身提供的函數,下面來一些主要的內置函數吧~
1、數值的處理函數
下表列出了主要的常用的一些數值處理函數:
函數 | 說明 |
---|---|
parseInt() |
將字符型轉換爲整型 |
parseFloat() |
將字符型轉換爲浮點型 |
isNaN() |
判斷一個數值是否爲NaN |
isFinite() |
判斷一個數值是否有限 |
接下來逐個看一下這些內置函數:
(1)parseInt()函數
該函數用於將首位爲數字的字符串轉換成數字,如果該字符串不是以數字開頭,那麼將返回NaN
,語法格式如下:
parseInt(string,[n]);
參數說明:
string
:需要轉換爲整形的字符串n
:用於指出字符串中的數據是幾進制
數據。這個參數可以不加。
例如:
var str1 = "123abc"; document.write(parseInt(str1)+"<br>");
var str2 = "abc123"; document.write(parseInt(str1,8)+"<br>");
document.write(parseInt(str2));
最後輸出的結果爲:
123
83
NaN
(2)parseFloat()函數
該函數主要將首位爲數字的字符串轉換爲浮點型數字,如果字符串不是以數字開頭,那麼將返回NaN。 語法如下:
parseFloat(string);
參數說明:
string
:需要轉換爲浮點型的字符串。
例如:
var str1 = "123.456abc"; document.write(parseFloat(str1)+"<br>");
var str2 = "abc123.456"; document.write(parseFloat(str2));
以上代碼運行結果爲:
123.456
NaN
(3)isNaN()函數
該函數主要用於校驗某個值是否NaN
,語法格式如下:
isNaN(num);
參數說明:
num
:需要驗證的數字。
比如:
var num1=123;document.write(isNaN(num1));
var num2="123abc";document.write(isNaN(num2));
運行結果爲:
false
true
(4)isFinite()函數
主要用於判斷其參數是否有限,語法如下:
isFinite(num);
比如:
document.write(isFinite(123)+"<br>");
document.write(isFinite(123abc)+"<br>");
document.write(isFinite(1/0));
運行結果如下:
true
false
false
2、字符串處理函數
來看一下,一些主要的字符串處理函數:
函數 | 說明 |
---|---|
eval() |
求字符串中表達式的值 |
encodeURI() |
將URI字符串進行編碼 |
decodeURI() |
對已編碼的URI字符串進行解碼 |
解釋一下什麼是
URI
:URI和URL都可以表示網絡資源的地址,URI比URL表示範圍更加廣泛,但在一般情況下,URI與URL是可以等同的。
(1)eval()函數
該函數的功能是計算字符串表達式的值,並執行其中的JS
代碼。語法格式如下:
eval(string);
參數說明:
string
:需要計算的字符串,其中含有要計算的表達式或要執行的語句。
比如:
document.write(eval("3+6")+"<br>");
eval("x=5;y=6;document.write(x*y)");
運行結果爲:
9
30
(2)encodeURI()函數
將URI字符串進行編碼,語法格式如下:
encodeURI(url);
比如:
var uri = "http://127.0.0.1/save.html?name=測試";
document.write(encodeURI(uri));
解碼之後輸出:
http://127.0.0.1/save.html?name=%E6%B5%8B%E8%AF%95
(4)decodeURI()函數
該函數主要用於對已編碼的URI字符串進行解碼。語法如下:
decodeURI(url);
比如上面的例子:
var uri = "http://127.0.0.1/save.html?name=%E6%B5%8B%E8%AF%95";
document.write(decodeURI(uri));
解碼之後輸出:
http://127.0.0.1/save.html?name=測試
八、定義匿名函數
除了使用基本的function
語句外,還可以使用另外兩種方式來定義函數。
1、在表達式中定義函數
在表達式中直接定義函數,它的語法和function
語句非常相似。語法格式如下:
var 變量名 = function(參數1,參數2,……){
函數體
}
通過一個例子來說明表達式中定義函數是如何使用的,編寫一個帶有一個參數的匿名函數,用於輸出金字塔狀的圖案
。
過程簡單,就是循環一下就好了,外層大循環控制層數、裏面的第一個循環控制輸出空格,第二個循環控制輸出*
:
<script type="text/javascript">
var star=function (n) {
for(var i=1;i<=n;i++){
for(var j=1;j<=n-i;j++)
document.write(" ");
for(var j=1;j<=i;j++)
document.write("* ");
document.write("<br>");
}
}
star(6);
</script>
效果如下:
2、使用Function()構造函數
什麼是構造函數?學過其他高級程序設計語言的想必都知道,構造函數的作用就是用來創建函數時初始化變量的方法。在JS
中,這種方式可以動態的創建函數。Function()
構造函數的語法格式如下:
var 變量名 = new Function("參數1","參數2",……,"函數體");
例如使用Function
構造函數定義一個計算兩個數字之和的函數,代碼如下:
var sum = new Function("x","y","alert(x+y)");
sum(10,20);
執行上面的代碼到最後會彈出結果30
【Four】對象
在說對象
以前,看看什麼是對象!對象就是你的男朋友或女朋友呀!!
emmmmmmm,此對象非彼對象。編程上的對象
可以說是一種數據類型、一種複合的數據類型,他將多種數據類型集中在一個數據單元中,並允許通過對象來存取這些數據的值。
一、對象的屬性和方法
對象主要包含兩個要素——那就是屬性
和方法
。通過訪問或設置對象的屬性,並且調用對象的方法,就可以對對象進行各種操作,從而實現需要的功能。
1、對象的屬性
包含在對象內部的變量稱爲對象的屬性,他是用來描述對象特性的一組數據。語法格式如下:
對象名.屬性名
以對象用戶
爲例,該對象有用戶名和密碼兩個屬性,以下代碼可以分別獲取這兩個值:
var name = 用戶.用戶名
var pwd = 用戶.密碼
也可以通過以下代碼來設置對象“用戶”的這兩個屬性值:
用戶.用戶名 = "wzq";
用戶.用戶名 = "wzq";
2、對象的方法
包含在對象內部的函數稱爲對象的方法,它可以用來實現某個功能。 語法格式如下:
對象名.方法名(參數)
與函數一樣,它可以有多個或單個參數甚至沒有參數。以對象用戶爲例
,以下帶啊嗎可以分別調用該對象的兩個方法:
用戶.註冊();
用戶.登錄();
對象就是屬性和方法的集合。這些屬性和方法也叫做對象的成員。方法是作爲對象成員的函數,表面對象所具有的行爲;而屬性是作爲對象成員的變量,表面對象的狀態。
在JS
中可以使用3種對象,即自定義對象
、內置對象
、和瀏覽器對象
。後面的兩個對象又稱爲預定義對象
。
二、自定義對象的創建
創建自定義對象有三種方式,分別是:直接創建
、通過自定義構造函數創建對象
、通過object創建對象
,下面進行介紹…………
1、直接創建自定義對象
直接創建自定義對象的格式如下:
var 對象名 = {屬性名:屬性值1,屬性名2:屬性值2,……}
直接創建自定義對象是,所有的屬性都放在大括號種,屬性之間用,
隔開。例如,創建一個學生對象Student
,並設置三個屬性name、sex、age,可以這樣寫:
var Student = {
name:"wzq",
sex:"男",
age:25
}
可以使用直接調用值輸出:
document.write(Student.name + "<br>" + Student.sex + "<br>" + Student.age);
也可以使用數組的方式對屬性進行輸出:
document.write(Student['name']+"<br>" + Student['sex'] + "<br>" + Student['age']);
2、通過自定義構造函數創建對象
雖然直接創建自定義對象很直觀,但是如果要創建多個相同的對象,使用這種方法就會很繁瑣。在JS
中,可以自定義構造函數,然後調用對象必須使用new
關鍵字實例一個對象。
比如,要創建一個學生student
,看一下構造函數
function Student(name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
}
怎麼用呢?這樣實例化:
var stu1 = new Student("wzq","男",20);
對象不僅可以擁有屬性,還可以擁有方法。在定義構造函數的時候,也可以對象的方法,比如在student
對象中加一個方法,顯示該學生的name、sex、age
,可以這樣寫:
function Student(name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
this.show = show; //這個就是函數
//可以寫在裏面,比如:
this.show=function(){
document.write(name + "<br>" + sex + "<br>" + age);
}
}
//也可以放在外面:
function show(){
document.write(name + "<br>" + sex + "<br>" + age);
}
//裏面寫和外面寫,只能寫一個
看一個例子好了,輸出學生的平均分:
套用格式,很簡單,代碼如下:
script type="text/javascript">
function Student(mmath,english,history) {
this.mmath=mmath;
this.english=english;
this.history=history;
this.Aver=function () {
document.write("數學:"+mmath+"<br>英語:"+english+"<br>歷史:"+history);
document.write("<br>平均分:"+(mmath+english+history)/3);
}
}
var stu1 = new Student(100,85,75);
stu1.Aver();
</script>
效果如下:
如果在構造函數中定義了多個屬性和方法,那麼在每次創建對象實例時都會爲該對象分配相同的屬性和方法,這樣會增加對內存的需求,這時可以通過prototype
屬性來解決這個問題。 語法如下:
object.prototype.name = value;
參數說明:
object
:構造函數名稱name
:要添加的屬性名或方法名value
:添加屬性的值或執行方法的函數
例如在上面的那個student
對象中,添加一個方法:
function Student(name,sex,age){
this.name=name;
this.sex=sex;
this.age=age;
}
Student.prototype.show=function(){
alert(this.name+"\n"+this.sex+"\n"+this.age);
}
var stu1 = new Student("wzq","男",20);
stu1.show();
結束~~~~就是這麼簡單。
3、通過Object對象創建創建自定義對象
Object對象
是JS
中的內部對象,它提供了對象最基本的功能,這些功能也構成了所有其他對象的基礎。它提供了常見自定義最簡單的方式,在使用這種方式時不需要在定義構造函數。既可以在程序運行時爲JS
對象隨意添加屬性。 語法如下:
obj = new Object([value])
參數說明:
obj
:必選項,要賦值爲Object
對象的變量名value
:可選項,任意一種基本數據類型(Number、Boolean或String
)
還拿Student對象
來當例子:
var Student = new Object();
Student.name = "wzq";
Student.sex = "男";
Student.age = 20;
Student.show = function(){
alert(Student.name+"\n"+Student.sex+"\n"+Student.age);
}
Student.show();
最後輸出:
三、對象訪問語句
1、for…in語句
它與C++、C_sharp、Java、python
中的foreach
幾乎一模一樣,用來遍歷對象的每一個屬性,且每次都將屬性名作爲字符串保存在變量裏面。 格式如下:
for(變量 in 對象){
語句
}
例如,直接創建一個對象,然後遍歷他:
代碼如下:
var object={name:"wzq",sex:"男",age:20};
for(var e in object){
document.write("屬性:"+e+"="+object[e]+"<br>");
}
效果如下:
2、with語句
with
語句用於在訪問員一個對象的屬性或方法時,避免重複引用指定對象名。例如with
語句可以簡化對象屬性調用的層次。 語法如下:
with(對象名稱){
語句
}
在一個連續的JS
代碼中如果要多次使用某個對象的屬性或方法,那麼只需要在with
關鍵字的後面的{}
中寫出對象名稱,然後在之後的語句內,就可以不加對象名稱.
了。比如還是學生類:
function Student(name,sex,age) {
this.name=name;
this.sex=sex;
this.age=age;
}
var stu = new Student("wzq","男",20);
with(stu){
//下面不需要加 那個點點了
document.write(name+sex+age);
document.write(name+sex+age);
document.write(name+sex+age);
}
四、常用內部對象
1、Math對象
Math對象
提供了大量的數字常量和數學函數。在使用該對象時候,不需要使用new
關鍵字實例化一個對象。拿來即用。
(1)Math對象的屬性
Math對象
的屬性就是數學中常用的常量,下表列出了Math對象常用屬性
:
屬性 | 描述 | 屬性 | 描述 |
---|---|---|---|
E |
歐拉常量(2.7128……) | LOG2E |
以2 爲底數的e 的對數 |
LN2 |
2 的自然對數 |
LOG10E |
以10 爲底的e 的對數 |
LN10 |
10 的字然對數 |
PI |
圓周率 |
SQRT2 |
2 的平方根 |
SQRT1_2 |
0.5 的平方根 |
(2)Math對象的方法
Math
對象的方法有好多好多……在這裏,,我就不列出來了,需要的童鞋,請點我傳送到參考手冊!
在這裏就寫一下怎麼用就好了,比如,計算兩個數值中的較大值,可以通過Math對象
的max()
函數。代碼如下:
var lager = Math.max(value1,value2);
比如計算一個數字的10次方:
var res = Math.pow(value1,10);
比如四捨五入函數計算最相近的整數值:
var res = Math.round(value1);
(3)例子——生成指定位數的隨機數
應用Math對象
生成指定位數的隨機數功能。
首先編寫顯示表單
,在表單
中添加一個用於輸入的文本框用於“生成”的一個按鈕:
請輸入要生成隨機數的位數:<p>
<form name="form">
<input type="text" name="digit">
<input type="button" value="生成">
</form>
然後在<head>
標籤內編寫腳本:
<script type="text/javascript">
function ran(digit) {
var res="";
for(i=0;i<digit;i++)
res+=(Math.floor(Math.random()*10));
alert(res);
}
</script>
最後,響應一下這個方法:
<input type="button" value="生成" onclick="ran(form.digit.value)">
效果如下:
2、Date對象
使用Date
對象來實現對日期和時間的控制。
(1)創建Date對象
Date
對象是指一個對象數據類型進行求值,該對象主要負責處理與日期和時間有關的數據信息。在使用之前,首先要創建該對象;
dateObj = new Date();
dateObj = new Date(dateVal);
dateObj = new Date(year,month,date[,hours[,minutes[,seconds[,ms]]]]);
參數說明:
參數 | 說明 |
---|---|
dateObj |
必選項。要賦值爲Date對象的變量名 |
dateVal |
必選項。如果是數字值,dateVal表示指定日期與1970年1月1日午夜間全球標準時間的毫秒數 。如果是字符串,常用的格式爲“月 日 ,年 小時:分鐘:秒 ”,其中月份用英文表示,其餘用數字表示,時間部分可以省略;另外,還可以使用“年/月/日 小時:分鐘:秒 ”的格式。 |
year |
必選項。完整的年份,比如,1976 |
month |
必選項。表示的月份,從0 到11 之間的整數 |
date |
必選項。表示日期,從1 到31 之間的整數 |
hours |
可選項。如果提供了minutes 則必須給出。表示小時,從0 到23 之間的整數 |
minutes |
可選項。如果提供了seconds 則必須給出。表示分鐘,從0 到59 的整數 |
seconds |
可選項。如果提供了ms 則必須給出。表示秒鐘,從0 到59 的整數 |
ms |
可選項。表示毫秒,是從0 到999 的整數 |
下面的代碼涵蓋了一些創建日期對象的方法:
<script type="text/javascript">
var Date1 = new Date(); //創建當前日期對象
document.write(Date1); //輸出當前日期和時間
document.write("<br>");
var Date2 = new Date(2020,5,20); //創建指定時間的日期對象
document.write(Date2); //輸出指定時間的日期
document.write("<br>");
var Date3 = new Date(2020,5,20,13,14,1);
document.write(Date3);
document.write("<br>");
//字符串形式創建日期對象
var Date4 = new Date("Jun 20,2020 13:14:01");
document.write(Date4);
document.write("<br>");
//以另一種字符串的形式創建日期對象
var Date5 = new Date("2020/5/20 13:14:01");
document.write(Date5);
</script>
效果如下:
(2)Date對象的屬性
Date對象
的屬性有constructor
和prototype
兩個。
A、construcor屬性
這個屬性可以判斷一個對象的類型,該屬性引用的是對象的構造函數。語法如下:
object.constructor
其中object
是對象名,例如判斷當前對象是否爲日期對象:
var newDate = new Date();
if(newDate.constructor == Date)
document.write("日期型對象");
B、prototype屬性
該屬性可以爲Date對象
添加自定義的屬性和方法
Date.prototype.name = value;
參數說明:
name
:要添加的屬性名或方法名value
:添加屬性的值或執行方法的函數
例如:用自定義屬性來記錄當前年份:
var newDate = new Date();
Date.prototye.mark = newDate.getFullYear(); //向日期對象中添加屬性
documet.write(newDate.mark);
(3)Date對象的方法
它的方法實在太多太多太多了!!!!!!!
(4)例子——輸出當前的日期和時間
調用方法就好了……
<script type="text/javascript">
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var day = now.getDay();
var week="";
switch(day){
case 1:
week="星期一";
break;
case 2:
week="星期二";
break;
case 3:
week="星期三";
break;
case 4:
week="星期四";
break;
case 5:
week="星期五";
break;
case 6:
week="星期六";
break;
default:
week="星期日";
}
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//爲字體設置樣式
document.write("<span style='font-size: 24px;font-family: 楷體;color: #FF9900'>");
document.write("今天是"+year+"年"+month+"月"+date+"日 "+week+"<br>");
document.write("現在是:"+hour+":"+minute+":"+second+"</span>");
</script>
效果如下:
【Five】數組
啥是數組?數組數組一組數鴨!!數組是JS
中的一種複合數據類型,是一組數據的集合。因爲JS
是一種弱類型的語言,所以在數組中每個元素的類型可以是不同的。數組裏的值可以是任何數據類型的。和其他高級程序設計語言一樣,數組的第一個索引從0開始
一、定義數組
1、定義空數組
使用不帶參數的構造函數可以定義一個空數組,格式如下:
arrayObject = new Array();
其中arrObject
是創建的數組的對象名。
2、指定數組長度
只需要在Array()
的括號()
裏面加上數組的個數就可以了,格式如下:
arrayObject = new Array(size);
其中size
設置數組的長度。
3、指定數組元素
在定義數組的時候,可以直接給出數組元素的值。此時數組的長度就是在括號中給出的數組元素的個數,格式如下:
arrayObject = new Array(element1,element2,element3,……)
其中elememt
是存入數組中的元素,使用該語法必須有一個以上的元素。
4、直接定義數組
還有一種方式,比較直接,不需要使用構造函數,語法如下:
arrayObject = [element1,element2,element3,……]
例如,直接定義一個含有3
個元素的數組:
var arr = [123,"JavaScript",true];
二、操作數組元素
1、數組元素的輸入和輸出
輸入即爲數組中的元素進行賦值;數組元素的輸出即獲取數組中元素的值並輸出。
(1)數組元素的輸入
在定義數組時直接輸入數組元素
var arr = new Array(1,2,3,4);
利用數組對象元素的下標向其輸入數組元素
var arr = new Array();
arr[3] = 'a';
arr[4] = 'b';
利用for語句
向數組對象中輸入數組元素
var n = 7;
var arr = new Array();
for(var i = 0 ; i < n ; i ++ )
arr[i] = i;
(2)數組元素的輸出
通過下標獲取指定元素值
var arr = new Array(1,2,3,4,5,6,7);
var third = arr[2];
document.write(third);
用for語句
獲取數組中的元素值
var str = 0;
var arr = new Array('a','b','c','d');
for(var i = 0 ; i < 4 ; i ++ )
str += arr[i];
document.write(str);
用數組對象名輸出所有元素值
var arr = new Array('a','b','c','d');
documet.write(arr);
2、數組元素的添加
誒,歇會兒…我腿好疼背好疼……
添加數組元素的方法非常簡單,只要對新的數組元素進行賦值就可以了,比如:
var arr = new Array("JavaScript","C/C++");
arr[2] = "CSharp";
arr[3] = "Python";
document.write(arr);
當然也可以對已經存在的數組元素進行重新賦值,比如arr[0]="oh!my god!"
3、數組元素的刪除
使用delete
運算符可以刪除數組元素的值,但是隻能將該元素恢復爲未賦值狀態,即undefined
。例如:
var arr = new Array(1,2,3,4,5,6,7);
delete arr[1]
document.write(arr);
運行結果爲:
1,3,4,5,6,7
應用
delete
運算符刪除數組元素之前和刪除數組元素之後,元素的個數並沒有改變,改變的只是被刪除的數組的元素的值,該值變爲undefined
三、數組的屬性
1、length屬性——返回數組對象長度
語法如下:
arrayObject.length
例如:
var arr = new Array(1,2,3,4);
document.write(arr.length);
運行結果爲4
- 當用new Array()創建數組時,並不對其進行賦值,length屬性的返回值爲0
- 數組的長度由數組的最大下標決定
例子:輸出省份、省會以及旅遊景點,利用JS
將信息放在表單裏面
代碼如下:
<table cellspacing="1" bgcolor="#CC00FF">
<tr height="30" bgcolor="#FFFFFF">
<td align="center" width="50">序號</td>
<td align="center" width="100">省份</td>
<td align="center" width="100">省會</td>
<td align="center" width="260">旅遊景點</td>
</tr>
<script type="text/javascript">
var province = new Array("河南省","吉林省","遼寧省");
var city = new Array("鄭州市","長春市","瀋陽市");
var tourist = new Array("二七紀念塔 玉米塔 黃河溼地公園",
"淨月潭 長影世紀城 動植物公園","瀋陽故宮 瀋陽北陵 張氏帥府");
for(var i = 0 ; i < province.length ; i ++ ){
document.write("<tr height='26' bgcolor='#FFFFFF'>");
document.write("<td align='center'>"+(i+1)+"</td>>");
document.write("<td align='center'>"+province[i]+"</td>>");
document.write("<td align='center'>"+city[i]+"</td>");
document.write("<td align='center'>"+tourist[i]+"</td>");
document.write("</tr>");
}
</script>
</table>
效果如下:
2、prototype屬性——爲數組添加自定義的屬性或方法
語法如下:
Array.prototype.name = value;
其中name
時要添加的屬性名或者方法名;value
添加的屬性的值或執行方法的函數。
例如:利用prototype
添加一個方法,用於顯示數組中最後一個元素,代碼如下:
Array.prototype.outLast=function(){
document.write(this[this.length-1]);
}
var arr = new Array(1,2,3,4,5,6);
arr.outLast();
輸出6
四、數組的方法
使用數組的方法可以更加方便的操作數組中的數據。
因爲方法的調用很簡單,只在第一個方法後添加了一個例子,後面的都一樣,就不再寫了
1、添加和刪除
(1)push()方法——向數組末尾添加一個或多個元素,並返回添加後的數組長度
語法如下:
arrayObject.concat(arratX,arrayX,……,arrayX)
其中arratX
可以是具體的值,也可以是數組對象
例如,向數組的末尾添加兩個數組元素,並輸出原數組,添加元素後的長度和新數組。
代碼如下:
<script type="text/javascript">
var arr = new Array(1,2,3);
document.write("原數組:"+arr);
document.write("<br>添加元素後的數組長度:"+arr.push(4,5)+"<br>");
document.write("添加後:"+arr);
</script>**
效果如下:
(2)unshift()方法——向數組開頭添加一個或多個元素
語法如下:
arrayObject.unshift(newElement1,……,newElementX)
(3)pop()方法——用於把數組中最後一個元素從數組中刪除,並返回刪除元素的值
語法如下:
arrayObject.pop()
(4)shift()方法——用於把數組中的第一個元素從數組中刪除,並返回刪除元素的值
語法如下:
arrayObject.shift()
(5)splice()方法——可以刪除數組中指定位置的元素,還可以向數組中的指定位置添加新元素
語法如下:
arrayObject.splice(start,length,element1,element2,……)
(6)concat()方法——連接數組到當前數組的末尾
語法如下:
arrayObject.concat(arratX,arrayX,……,arrayX)
例如,在數組尾部添加其他數組。代碼如下:
var arr1 = new Array('a','b','c');
var arr2 = new Array(1,2,3);
document.write(arr1.concat(arr2));
運行結果爲:a,b,c,1,2,3
2、設置數組的排列順序
(1)reverse()方法——反轉數組
語法如下:
arrayObject.reverse()
(2)sort()方法——排序
語法如下:
arrayObject.sort()
如果想要將數組元素按照其他方法進行排序,就需要指定sort()方法的參數。該參數通常是一個比較函數
,該函數應該有兩個參數,(a和b)。在對元素進行排序時,每次比較兩個元素時都會執行比較函數
,並將這兩個元素作爲參數傳遞給比較函數。其返回值由以下兩種情況:
- 如果返回值大於0,則交換位置
- 如果返回值小於等於0,則不進行操作。
例如,定義一個包含4個元素的數組,將數組中的元素按從小到大的順序進行輸出:
var arr = new Array(9,6,10,5);
document.write("原數組:"+arr);
function ascOrder(x,y){
if(x>y) return 1;
else return -1;
}
arr.sort(ascOrder);
document.write("排序後的數組:"+arr);
3、獲取某段數組元素——slice()方法
語法如下:
arrayObject.slice(start,end)
4、數組轉換成字符串
(1)toString()方法——轉換爲字符串,並返回結果
語法如下:
arrayObject.toString()
(2)toLocaleString()方法——將數組轉換成本地字符串
語法如下:
arrayObject.toLacaleString()
(3)join()方法——將數組中的所有元素放入一個字符串中
語法如下:
arrayObject.join(separator)
其中separatoe
指定要使用的分隔符。如果省略則使用逗號作爲分隔符
【Six】String對象
它是動態對象,可以這樣創建,語法如下:
var newstr = new String(StringText)
一、String對象的屬性
1、length屬性——返回長度
語法如下:
stringObject.length
2、constructor屬性——相當於構造函數的引用
語法如下:
stringObject.constructor
例如:
var newStr = new String("JavaScript");
if(newStr.constructor==String)
document.write("這是一個字符串");
3、prototype屬性——添加自定義的屬性或方法
同上,跟上面的一模一樣,語法如下:
String.prototype.name = value
二、String對象的方法
1、查找字符串
(1)charAt()方法——返回字符串中指定位置的字符
語法如下:
stringObject.charAt(index)
其中index
表示字符串某個位置的數組,即在字符串中的下標
(2)indexOf()方法——返回某個子字符串在字符串中首次出現的位置
語法如下:
stringObject.indexOf(substring,startindex)
其中substring
表示要查找的子字符串,startindex
表示開始查找的位置
(3)lastIndexOf()方法——最後出現的位置
語法如下:
stringObject.lastIndexOf(substring,startindex)
2、截取字符串
(1)slice()方法——提取字符串的片段,並在新的字符串中返回被提取的部分
語法如下:
stringObject.slice(startindex,endindex)
(2)substr()方法——從指定位置開始提取指定長度的子字符串
語法如下:
stringObject.substr(startindex,length)
3、大小寫轉換
(1)toLowerCase()方法——轉換爲小寫
語法:
stringObject.toLowerCase()
(2)toUpperCase()方法——轉換爲大寫
語法:
stringObject.toUpperCase()
4、連接和拆分
(1)concat()方法——用於連接兩個或多個字符串
語法:
stringObject.concat(stringX,stringX,……)
(2)split()方法——用於把一個字符串分割成字符串數組
語法:
stringObject.split(separator,limit)
5、格式化字符串
給一個表格吧~