學會JavaScript這一篇就夠了~

文章目錄


開頭引言:我所使用的編譯環境是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、布爾型

布爾型的值只有,即truefalse,它通常在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+"&deg;F <br>");
    document.write("攝氏度:"+degreeC+"&deg;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基本語句

一、條件判斷語句

ifif…elseif…else ifswitch等語句,用於判斷

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>

在這裏插入圖片描述

二、循環語句

whiledo…whilefor語句

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+"&nbsp;&nbsp;");
        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("&nbsp;");
        for(var j=1;j<=i;j++)
            document.write("*&nbsp;");
        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 必選項。表示的月份,從011之間的整數
date 必選項。表示日期,從131之間的整數
hours 可選項。如果提供了minutes則必須給出。表示小時,從023之間的整數
minutes 可選項。如果提供了seconds則必須給出。表示分鐘,從059的整數
seconds 可選項。如果提供了ms則必須給出。表示秒鐘,從059的整數
ms 可選項。表示毫秒,是從0999的整數

下面的代碼涵蓋了一些創建日期對象的方法:

<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對象的屬性有constructorprototype兩個。

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對象的方法

它的方法實在太多太多太多了!!!!!!!

點我傳送到JavaScript 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、格式化字符串

給一個表格吧~

在這裏插入圖片描述


【Seven】JavaScript 事件處理

點我前往鏈接!!!


【Eight】JavaScript 文檔對象

點我前往鏈接!!!


【Nine】JavaScript 圖像對象

點我前往鏈接!!!


【Ten】JavaScript 表單對象

點我前往鏈接!!!

【Eleven】JavaScript 文檔對象模型(DOM)

點我前往鏈接!!!


【Twelve】JavaScript Window窗口對象

點我前往鏈接!!!


【Thirteen】jQuery 選擇器

點我前往鏈接!!!


【Fourteen】jQuery 控制頁面

點我前往鏈接!!!


【Fifteen】jQuery 事件處理

點我前往鏈接!!!


【Sixteen】jQuery 動畫效果

點我前往鏈接!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章