JavaScript進階 - 第7章 JavaScript內置對象

第7章 JavaScript內置對象

7-1 什麼是對象

JavaScript 中的全部事物都是對象,如:字符串、數值、數組、函數等,每一個對象帶有屬性方法javascript

對象的屬性:反映該對象某些特定的性質的,如:字符串的長度、圖像的長寬等;html

對象的方法:可以在對象上執行的動做。例如,表單的「提交」(Submit),時間的「獲取」(getYear)等;vue

JavaScript 提供多個內建對象,好比 String、Date、Array 等等,使用對象前先定義,以下使用數組對象:java

  var objectName =new Array();//使用new關鍵字定義對象
或者
  var objectName =[];

訪問對象屬性的語法:ios

objectName.propertyName

如使用 Array 對象的 length 屬性來得到數組的長度:web

var myarray=new Array(6);//定義數組對象
var myl=myarray.length;//訪問數組長度length屬性

以上代碼執行後,myl的值將是:6npm

訪問對象的方法:編程

objectName.methodName()

如使用string 對象的 toUpperCase() 方法來將文本轉換爲大寫:api

var mystr="Hello world!";//建立一個字符串
var request=mystr.toUpperCase(); //使用字符串對象方法

以上代碼執行後,request的值是:HELLO WORLD!數組

 
 

任務

補充右邊編輯器第5行,計算數組myarray的長度,並保存在變量mynum中,使代碼實現獲取數組長度並輸出結果。

1.計算數組的長度,使用length屬性。

2.var mynum=myarray.length;

7-2 Date 日期對象

日期對象能夠儲存任意一個日期,而且能夠精確到毫秒數(1/1000 秒)。

定義一個時間對象 :

var Udate=new Date(); 

注意:使用關鍵字new,Date()的首字母必須大寫。 

使 Udate 成爲日期對象,而且已有初始值:當前時間(當前電腦系統時間)

若是要自定義初始值,能夠用如下方法:

var d = new Date(2012, 10, 1);  //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日

咱們最好使用下面介紹的「方法」來嚴格定義時間。

訪問方法語法:「<日期對象>.<方法>」

Date對象中處理時間和日期的經常使用方法:

任務

此節沒有任務,快快進入下節,學習Date對象的方法。

?不會了怎麼辦

此節沒有任務,快快進入下節,學習Date對象的方法。

7-3 返回/設置年份方法

get/setFullYear() 返回/設置年份,用四位數表示。

var mydate=new Date();//當前時間2014年3月6日
document.write(mydate+"<br>");//輸出當前時間
document.write(mydate.getFullYear()+"<br>");//輸出當前年份
mydate.setFullYear(81); //設置年份
document.write(mydate+"<br>"); //輸出年份被設定爲 0081年。

注意:不一樣瀏覽器, mydate.setFullYear(81)結果不一樣,年份被設定爲 0081或81兩種狀況。

結果:

Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:57:47 GMT+0800

注意:

1.結果格式依次爲:星期、月、日、年、時、分、秒、時區。(火狐瀏覽器)

2. 不一樣瀏覽器,時間格式有差別。

任務

補充右邊編輯器第8行,使用getFullYear()得到年份,並輸出當前年份。

使用getFullYear()得到年份

var myyear= mydate.getFullYear();

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>得到年份 </title>
10 
11 <script type="text/javascript">
12 
13 var mydate=new Date();
14 
15 var myyear=mydate.getFullYear();
16 
17 document.write("年份:"+myyear);
18 
19 </script>
20 
21 </head>
22 
23 <body>
24 
25 </body>
26 
27 </html>
得到年份

 

7-4 返回星期方法

getDay() 返回星期,返回的是0-6的數字,0 表示星期天。若是要返回相對應「星期」,經過數組完成,代碼以下:

<script type="text/javascript">
  var mydate=new Date();//定義日期對象
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定義數組對象,給每一個數組項賦值
  var mynum=mydate.getDay();//返回值存儲在變量mynum中
  document.write(mydate.getDay());//輸出getDay()獲取值
  document.write("今天是:"+ weekday[mynum]);//輸出星期幾
</script>

注意:以上代碼是在2014年3月7日,星期五運行。

結果:

5

今天是:星期五

 

任務

補充右邊編輯器第9行,使用getDay()得到當前星期,並輸出。

使用getDay()得到星期

正確代碼:

document.write("今天是:" + weekday[mydate.getDay()];

代碼:

 1 <!DOCTYPE HTML>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>得到星期</title>
10 
11 <script type="text/javascript">
12 
13   var mydate=new Date();
14 
15   var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
16 
17   document.write("今天是:" +weekday[mydate.getDay()] );
18 
19 </script>
20 
21 </head>
22 
23 <body>
24 
25 </body>
26 
27 </html>
得到星期

 

7-5 返回/設置時間方法

get/setTime() 返回/設置時間,單位毫秒數,計算從 1970 年 1 月 1 日零時到日期對象所指的日期的毫秒數。

若是將目前日期對象的時間推遲1小時,代碼以下:

<script type="text/javascript">
  var mydate=new Date();
  document.write("當前時間:"+mydate+"<br>");
  mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
  document.write("推遲一小時時間:" + mydate);
</script>

結果:

當前時間:Thu Mar 6 11:46:27 UTC+0800 2014

推遲一小時時間:Thu Mar 6 12:46:27 UTC+0800 2014

注意:1. 一小時 60 分,一分 60 秒,一秒 1000 毫秒

      2. 時間推遲 1 小時,就是: 「x.setTime(x.getTime() + 60 * 60 * 1000);」

任務

補充右邊編輯器第9行,使用getTime()和setTime()方法,將時間推後2小時。

推後兩個小時: 2* 60 * 60 * 1000

mydate.getTime() + 2* 60 * 60 * 1000

正確代碼:

mydate.setTime(mydate.getTime() + 2* 60 * 60 * 1000);

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>日期對象 </title>
10 
11 <script type="text/javascript">
12 
13  var mydate=new Date();
14 
15   document.write("當前時間:"+mydate+"<br>");
16 
17   mydate.setTime(mydate.getTime() + 2* 60 * 60 * 1000);
18 
19   document.write("推遲二小時時間:" + mydate);
20 
21 </script>
22 
23 </head>
24 
25 <body>
26 
27 </body>
28 
29 </html>
日期對象

 

7-6 String 字符串對象

在以前的學習中已經使用字符串對象了,定義字符串的方法就是直接賦值。好比:

var mystr = "I love JavaScript!"

定義mystr字符串後,咱們就能夠訪問它的屬性和方法。

訪問字符串對象的屬性length:

stringObject.length; 返回該字符串的長度。

var mystr="Hello World!";
var myl=mystr.;length

以上代碼執行後,myl 的值將是:12

訪問字符串對象的方法:

使用 String 對象的 toUpperCase() 方法來將字符串小寫字母轉換爲大寫:

var mystr="Hello world!";
var mynum=mystr.toUpperCase();
以上代碼執行後,mynum 的值是:HELLO WORLD!

任務

1.補充右邊編輯器第8行,使用toLowerCase()方法,將字符串全部大寫字母都變成小寫的字符串。

2.字符串還有不少經常使用方法,快快進入下節學習字符串其它方法。

message.toLowerCase()

正確代碼:

var mychar=message.toLowerCase();

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>string對象 </title>
10 
11   <script type="text/javascript">
12 
13     var message="I love JavaScript!";
14 
15     var mychar=message.toLowerCase();
16 
17     document.write("字符串爲:"+mychar+"<br>");
18 
19 </script>
20 
21 </head>
22 
23 <body>
24 
25 </body>
26 
27 </html>
string對象

 

7-7 返回指定位置的字符

charAt() 方法可返回指定位置的字符。返回的字符是長度爲 1 的字符串。

語法:

stringObject.charAt(index)

參數說明:

注意:1.字符串中第一個字符的下標是 0。最後一個字符的下標爲字符串長度減一(string.length-1)。

2.若是參數 index 不在 0 與 string.length-1 之間,該方法將返回一個空字符串。

如:在字符串 "I love JavaScript!" 中,返回位置2的字符:

<script type="text/javascript">
  var mystr="I love JavaScript!"
  document.write(mystr.charAt(2));
</script>

注意:一個空格也算一個字符。

以上代碼的運行結果:

l

任務

補充右邊編輯器第8行,使用charAt()方法,返回最後一個字符。

mystr.charAt(mystr.length-1)

正確代碼:

document.write(mystr.charAt(mystr.length-1);

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>string對象 </title>
10 
11   <script type="text/javascript">
12 
13   var mystr="I love JavaScript!"
14 
15   document.write(mystr.charAt(mystr.length-1));
16 
17 </script>
18 
19 </head>
20 
21 <body>
22 
23 </body>
24 
25 </html>
string對象

 

7-8 返回指定的字符串首次出現的位置

indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。

語法

stringObject.indexOf(substring, startpos)

參數說明:

說明:

1.該方法將從頭至尾地檢索字符串 stringObject,看它是否含有子串 substring。

2.可選參數,從stringObject的startpos位置開始查找substring,若是沒有此參數將從stringObject的開始位置查找。

3.若是找到一個 substring,則返回 substring 的第一次出現的位置。stringObject 中的字符位置是從 0 開始的。

注意:1.indexOf() 方法區分大小寫。

2.若是要檢索的字符串值沒有出現,則該方法返回 -1。

例如: 對 "I love JavaScript!" 字符串內進行不一樣的檢索:

<script type="text/javascript">
  var str="I love JavaScript!"
  document.write(str.indexOf("I") + "<br />");
  document.write(str.indexOf("v") + "<br />");
  document.write(str.indexOf("v",8));
</script>

以上代碼的輸出:

0
4
9

任務

補充右邊編輯器第8行,使用indexOf()方法,檢索第二個字符o出現的位置。

mystr.indexof("o",6)

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>string對象 </title>
10 
11 <script type="text/javascript">
12 
13   var mystr="Hello World!"
14 
15   document.write(mystr.indexOf("o",6));
16 
17 </script>
18 
19 </head>
20 
21 <body>
22 
23 </body>
24 
25 </html>
string對象

 

7-9 字符串分割split()

知識講解:

split() 方法將字符串分割爲字符串數組,並返回此數組。

語法:

stringObject.split(separator,limit)

參數說明:

注意:若是把空字符串 ("") 用做 separator,那麼 stringObject 中的每一個字符之間都會被分割。

咱們將按照不一樣的方式來分割字符串:

使用指定符號分割字符串,代碼以下:

var mystr = "www.imooc.com";

document.write(mystr.split(".")+"<br>");

document.write(mystr.split(".", 2)+"<br>");

運行結果:

www,imooc,com

www,imooc

將字符串分割爲字符,代碼以下:

document.write(mystr.split("")+"<br>");

document.write(mystr.split("", 5));

運行結果:

w,w,w,.,i,m,o,o,c,.,c,o,m

w,w,w,.,i

任務

運用split()方法,完成如下任務,並輸出:

1. 補充右邊編輯器第8行,以字符"-"分隔字符串對象mystr。

2. 補充右邊編輯器第9行,將字符串對象mystr每一個字符分割。

3. 補充右邊編輯器第10行,將字符串對象mystr分割成字符,分割3次。

mystr.split("-")

mystr.split("")

mystr.split(" ",3)

代碼:

 1 <!DOCTYPE HTML>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 8 
 9 <title>字符串分割split()</title>
10 
11 <script type="text/javascript">
12 
13 var mystr="86-010-85468578";
14 
15 document.write(mystr.split("-") + "<br />");
16 
17 document.write(mystr.split("")+ "<br />");
18 
19 document.write(mystr.split("",3));
20 
21 </script>
22 
23 </head>
24 
25 <body>
26 
27 </body>
28 
29 </html>
字符串分割split()

 

7-10 提取字符串substring()

substring() 方法用於提取字符串中介於兩個指定下標之間的字符。

語法:

stringObject.substring(starPos,stopPos) 

參數說明:

注意:

1. 返回的內容是從 start開始(包含start位置的字符)到 stop-1 處的全部字符,其長度爲 stop 減start。

2. 若是參數 start 與 stop 相等,那麼該方法返回的就是一個空串(即長度爲 0 的字符串)。

3. 若是 start 比 stop 大,那麼該方法在提取子串以前會先交換這兩個參數。

使用 substring() 從字符串中提取字符串,代碼以下:

<script type="text/javascript">

  var mystr="I love JavaScript";

  document.write(mystr.substring(7));

  document.write(mystr.substring(2,6));

</script>

運行結果:

JavaScript

love

 

任務

運用substring()方法,完成子字符串的提取:
1.補充右邊編輯器第8行,從字符對象mystr中提取World!子字符串。

2. 補充右邊編輯器第9行,從字符對象mystr中提取Hello子字符串。

mystr.substring(6)

mystr.substring(0,5)

代碼:

 1 <!DOCTYPE HTML>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 8 
 9 <title>string對象</title>
10 
11 <script type="text/javascript">
12 
13 var mystr="Hello World!"
14 
15 document.write(mystr.substring(6)+ "<br />");
16 
17 document.write(mystr.substring(0,5));
18 
19 </script>
20 
21 </head>
22 
23 <body>
24 
25 </body>
26 
27 </html>
string對象

 

7-11 提取指定數目的字符substr()

substr() 方法從字符串中提取從 startPos位置開始的指定數目的字符串。

語法:

stringObject.substr(startPos,length)

參數說明:

注意:若是參數startPos是負數,從字符串的尾部開始算起的位置。也就是說,-1 指字符串中最後一個字符,-2 指倒數第二個字符,以此類推。

若是startPos爲負數且絕對值大於字符串長度,startPos爲0。

使用 substr() 從字符串中提取一些字符,代碼以下:

<script type="text/javascript">
  var mystr="I love JavaScript!";
  document.write(mystr.substr(7));
  document.write(mystr.substr(2,4));
</script>

運行結果:

JavaScript!
love

任務

運用substr()方法,完成如下任務:

1. 補充右邊編輯器第8行,提取字符world!。

2. 補充右邊編輯器第9行,提取字符Hello。

?不會了怎麼辦

1.字符串中第一個字符的位置爲0。

2.字符串中空格也佔一個位置。

3.  mystr.substr(6)

     mystr.substr(0,5)

代碼:

 1 <!DOCTYPE HTML>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 8 
 9 <title>提取指定數目的字符substr()</title>
10 
11 <script type="text/javascript">
12 
13 var mystr="Hello World!";
14 
15 document.write(mystr.substr(6) + "<br />");
16 
17 document.write(mystr.substr(0,5));
18 
19 </script>
20 
21 </head>
22 
23 <body>
24 
25 </body>
26 
27 </html>
提取指定數目的字符substr()

 

7-12 Math對象

Math對象,提供對數據的數學計算。

使用 Math 的屬性和方法,代碼以下:

<script type="text/javascript">
  var mypi=Math.PI; 
  var myabs=Math.abs(-15);
  document.write(mypi);
  document.write(myabs);
</script>

運行結果:

3.141592653589793
15

注意:Math 對象是一個固有的對象,無需建立它,直接把 Math 做爲對象使用就能夠調用其全部屬性和方法。這是它與Date,String對象的區別。

Math 對象屬性

Math 對象方法

7-13 向上取整ceil()

ceil() 方法可對一個數進行向上取整。

語法:

Math.ceil(x)

參數說明:

注意:它返回的是大於或等於x,而且與x最接近的整數。

咱們將把 ceil() 方法運用到不一樣的數字上,代碼以下:

<script type="text/javascript">
  document.write(Math.ceil(0.8) + "<br />")
  document.write(Math.ceil(6.3) + "<br />")
  document.write(Math.ceil(5) + "<br />")
  document.write(Math.ceil(3.5) + "<br />")
  document.write(Math.ceil(-5.1) + "<br />")
  document.write(Math.ceil(-5.9))
</script>

運行結果:

1
7
5
4
-5
-5

 

 

任務

在右邊編輯器中補充代碼,在script標籤內,使用ceil()方法,計算3.三、-0.一、-9.九、8.9值。

ceil()向上取整計算,它返回的是大於或等於的值

 

以上方法不作所有講解,只講解部分方法。此節沒有任務,快快進入下節學習。

任務

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>Math </title>
10 
11 <script type="text/javascript">
12 
13 document.write(Math.ceil(3.3)+"<br>");
14 
15 document.write(Math.ceil(-0.1)+"<br>");
16 
17 document.write(Math.ceil(-9.9)+"<br>");
18 
19 document.write(Math.ceil(8.9)+"<br>");
20 
21 </script>
22 
23 </head>
24 
25 <body>
26 
27 </body>
28 
29 </html>
Math

 

7-14 向下取整floor()

floor() 方法可對一個數進行向下取整。

語法:

Math.floor(x)

參數說明:

注意:返回的是小於或等於x,而且與x最接近的整數。

咱們將在不一樣的數字上使用 floor() 方法,代碼以下:

<script type="text/javascript">
  document.write(Math.floor(0.8)+ "<br>")
  document.write(Math.floor(6.3)+ "<br>")
  document.write(Math.floor(5)+ "<br>")
  document.write(Math.floor(3.5)+ "<br>")
  document.write(Math.floor(-5.1)+ "<br>")
  document.write(Math.floor(-5.9))
</script>

運行結果:

0
6
5
3
-6
-6

 

 

任務

補充右邊編輯器在script標籤內,使用floor()方法,計算3.三、-0.一、-9.九、8.9值。

floor()向下取整計算,它返回的是大於或等於的值

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>Math </title>
10 
11 <script type="text/javascript">
12 
13 document.write(Math.floor(3.3)+"<br>");
14 
15 document.write(Math.floor(-0.1)+"<br>");
16 
17 document.write(Math.floor(-9.9)+"<br>");
18 
19 document.write(Math.floor(8.9)+"<br>");
20 
21 </script>
22 
23 </head>
24 
25 <body>
26 
27 </body>
28 
29 </html>
Math

 

7-15 四捨五入round()

 

round() 方法可把一個數字四捨五入爲最接近的整數。

語法:

Math.round(x)

參數說明:

注意:

1. 返回與 x 最接近的整數。

2. 對於 0.5,該方法將進行上舍入。(5.5 將舍入爲 6)

3. 若是兩個整數同等接近 x,則結果是接近 +∞的數字值 。(如 -5.5 將舍入爲 -5; -5.52 將舍入爲 -6),以下圖:

把不一樣的數舍入爲最接近的整數,代碼以下:

<script type="text/javascript">
  document.write(+ "<br>");Math.round(1.6)
  document.write(+ "<br>");Math.round(2.5)
  document.write(+ "<br>");Math.round(0.49)
  document.write(+ "<br>");Math.round(-6.4)
  document.write();Math.round(-6.6)
</script>

運行結果:

2
3
0
-6
-7

任務

補充右邊編輯器代碼,在script標籤內,使用round()方法,計算3.三、-0.一、-9.九、8.9值。

對數值進行四捨五入,對於 0.5,該方法將進行上舍入

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>Math </title>
10 
11 <script type="text/javascript">
12 
13   document.write(Math.round(3.3)+ "<br>");
14 
15   document.write(Math.round(-0.1)+ "<br>");
16 
17   document.write(Math.round(-9.9)+ "<br>");
18 
19   document.write(Math.round(8.9));
20 
21 </script>
22 
23 </head>
24 
25 <body>
26 
27 </body>
28 
29 </html>
Math

 

7-16 隨機數 random()

random() 方法可返回介於 0 ~ 1(大於或等於 0 但小於 1 )之間的一個隨機數。

語法:

Math.random();

注意:返回一個大於或等於 0 但小於 1 的符號爲正的數字值。

咱們取得介於 0 到 1 之間的一個隨機數,代碼以下:

<script type="text/javascript">
  document.write(Math.random());
</script>

運行結果:

0.190305486195328  

注意:由於是隨機數,因此每次運行結果不同,可是0 ~ 1的數值。

得到0 ~ 10之間的隨機數,代碼以下:

<script type="text/javascript">
  document.write((Math.random())*10);
</script>

運行結果:

8.72153625893887

 

任務

補充右邊編輯器代碼,在script標籤內,使用random ()方法和round(),計算不大於10的整數。

使用random()隨機取得0-10之間的數值。使用round()對數值進行四捨五入。

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>Math </title>
10 
11 <script type="text/javascript">
12 
13  document.write(Math.random()*10);
14 
15 </script>
16 
17 </head>
18 
19 <body>
20 
21 </body>
22 
23 </html>
Math

 

7-17 Array 數組對象

數組對象是一個對象的集合,裏邊的對象能夠是不一樣類型的。數組的每個成員對象都有一個「下標」,用來表示它在數組中的位置,是從零開始的

數組定義的方法:

1. 定義了一個空數組:

var  數組名= new Array();

2. 定義時指定有n個空元素的數組:

var 數組名 =new Array(n);

3.定義數組的時候,直接初始化數據:

var  數組名 = [<元素1>, <元素2>, <元素3>...];

咱們定義myArray數組,並賦值,代碼以下:

var myArray = [2, 8, 6]; 

說明:定義了一個數組 myArray,裏邊的元素是:myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。

數組元素使用:

數組名[下標] = 值;

注意: 數組的下標用方括號括起來,從0開始。

數組屬性:

length 用法:<數組對象>.length;返回:數組的長度,即數組裏有多少個元素。它等於數組裏最後一個元素的下標加一。

數組方法:

以上方法不作所有講解,只講解部分方法。此節沒有任務,快快進入下節學習。

 

7-18 數組鏈接concat()

concat() 方法用於鏈接兩個或多個數組。此方法返回一個新數組,不改變原來的數組。

語法

arrayObject.concat(array1,array2,...,arrayN)

參數說明:

 

注意:  該方法不會改變現有的數組,而僅僅會返回被鏈接數組的一個副本。

咱們建立一個數組,將把 concat() 中的參數鏈接到數組 myarr 中,代碼以下:

<script type="text/javascript">
  var mya = new Array(3);
  mya[0] = "1";
  mya[1] = "2";
  mya[2] = "3";
  document.write(mya.concat(4,5)+"<br>");
  document.write(mya); 
</script>

運行結果:

1,2,3,4,5
1,2,3

咱們建立了三個數組,而後使用 concat() 把它們鏈接起來,代碼以下:

<script type="text/javascript">
  var mya1= new Array("hello!")
  var mya2= new Array("I","love");
  var mya3= new Array("JavaScript","!");
  var mya4=mya1.concat(mya2,mya3);
  document.write(mya4);
</script>

運行結果:

hello!,I,love,JavaScript,!

任務

補充右邊編輯器第9行,使用concat()方法鏈接myarr1和myarr2兩個數組並輸出。

使用concat()完成數組鏈接

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>Array對象 </title>
10 
11 <script type="text/javascript">
12 
13     var myarr1= new Array("010")
14 
15     var myarr2= new Array("-","84697581");
16 
17     document.write(myarr1.concat(myarr2));
18 
19 </script>
20 
21 </head>
22 
23 <body>
24 
25 </body>
26 
27 </html>
Array對象

 

7-19 指定分隔符鏈接數組元素join()

join()方法用於把數組中的全部元素放入一個字符串。元素是經過指定的分隔符進行分隔的。

語法:

arrayObject.join(分隔符)

參數說明:

注意:返回一個字符串,該字符串把數組中的各個元素串起來,用<分隔符>置於元素與元素之間。這個方法不影響數組本來的內容。 咱們使用join()方法,將數組的全部元素放入一個字符串中,代碼以下:

<script type="text/javascript">
  var myarr = new Array(3);
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join());
</script>

運行結果:

I,love,JavaScript

咱們將使用分隔符來分隔數組中的元素,代碼以下:

<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join("."));
</script>

運行結果:

I.love.JavaScript

任務

補充右邊編輯器第10行,使用join()方法,用分隔符"-",將數組myarr3中元素鏈接,並輸出。

1. 使用join()完成數組分隔。
2. document.write(myarr3.join("-"));

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>Array對象 </title>
10 
11 <script type="text/javascript">
12 
13     var myarr1= new Array("86","010")
14 
15     var myarr2= new Array("84697581");
16 
17     var myarr3= myarr1.concat(myarr2);
18 
19     document.write(myarr3.join("-"));
20 
21 </script>
22 
23 </head>
24 
25 <body>
26 
27 </body>
28 
29 </html>
Array對象

 

7-20 顛倒數組元素順序reverse()

reverse() 方法用於顛倒數組中元素的順序。

語法:

arrayObject.reverse()

注意:該方法會改變原來的數組,而不會建立新的數組。

定義數組myarr並賦值,而後顛倒其元素的順序:

<script type="text/javascript">
  var arr = new Array(3)
  arr[0] = "1"
  arr[1] = "2"
  arr[2] = "3"
  document.write(myarr + "<br />")
  document.write(my)arr.reverse()
</script>

運行結果:

1,2,3
3,2,1

任務

補充右邊編輯器第8行,使用reverse()方法,將數組myarr1順序顛倒,並輸出。

使用reverse()顛倒數組順序

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>reverse() </title>
10 
11 <script type="text/javascript">
12 
13    var myarr1= ["","",""];
14 
15    document.write(myarr1.reverse());
16 
17 </script>
18 
19 </head>
20 
21 <body>
22 
23 </body>
24 
25 </html>
reverse()

 

7-21選定元素slice()

slice() 方法可從已有的數組中返回選定的元素。

語法

arrayObject.slice(start,end)

參數說明:

1.返回一個新的數組,包含從 start 到 end (不包括該元素)的 arrayObject 中的元素。

2. 該方法並不會修改數組,而是返回一個子數組。

注意:

1. 可以使用負值從數組的尾部選取元素。

2.若是 end 未被規定,那麼 slice() 方法會選取從 start 到數組結尾的全部元素。

3. String.slice() 與 Array.slice() 類似。

咱們將建立一個新數組,而後從其中選取的元素,代碼以下:

<script type="text/javascript">
  var myarr = new Array(1,2,3,4,5,6);
  document.write(myarr + "<br>");
  document.write(myarr.slice(2,4) + "<br>");
  document.write(myarr);
</script>

運行結果:

1,2,3,4,5,6
3,4
1,2,3,4,5,6

任務

補充右邊編輯器第8行,將選定數組元素"愛","你",並輸出。

使用slice()選定數組元素

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>slice() </title>
10 
11 <script type="text/javascript">
12 
13    var myarr1= ["","",""];
14 
15    document.write(myarr1.slice(1,3));
16 
17 </script>
18 
19 </head>
20 
21 <body>
22 
23 </body>
24 
25 </html>
slice()

 

7-22 數組排序sort()

sort()方法使數組中的元素按照必定的順序排列。

語法:

arrayObject.sort(方法函數)

參數說明:

 

1.若是不指定<方法函數>,則按unicode碼順序排列。

2.若是指定<方法函數>,則按<方法函數>所指定的排序方法排序。

myArray.sort(sortMethod);

使用sort()將數組進行排序,代碼以下:

<script type="text/javascript">
  var myarr1 = new Array("Hello","John","love","JavaScript"); 
  var myarr2 = new Array("80","16","50","6","100","1");
  document.write(myarr1.sort()+"<br>");
  document.write(myarr2.sort());
</script>

運行結果:

Hello,JavaScript,John,love
1,100,16,50,6,80

注意:上面的代碼沒有按照數值的大小對數字進行排序。

如要實現這一點,就必須使用一個排序函數,代碼以下:

<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序,如降序,把「a - b」該成「b - a」
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>

運行結果:

80,16,50,6,100,1
1,6,16,50,80,100

任務

1. 補充右邊編輯器第8行,完成降序排列函數。

2. 補充右邊編輯器第11行,使用sort()方法,進行數組降序列排列,並輸出。

1.排序函數,降序 return b - a;

2. document.write(myarr.sort(sortNum));

代碼:

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>數組排序sort()</title>
10 
11 <script type="text/javascript">
12 
13    function sortNum(a,b) {
14 
15    return b-a;
16 
17    }
18 
19 var myarr = new Array("80","16","50","6","100","1");
20 
21 document.write(myarr.sort(sortNum));
22 
23 </script>
24 
25 </head>
26 
27 <body>
28 
29 </body>
30 
31 </html>
數組排序sort()

 

7-23 編程練習

某班的成績出來了,如今老師要把班級的成績打印出來。

效果圖:

2014年5月9日 星期六--班級總分爲:81

格式要求:

一、顯示打印的日期。 格式爲相似「2014年03月21日 星期三」 的當前的時間。

二、計算出該班級的平均分(保留整數)。

同窗成績數據以下:

"小明:87; 小花:81; 小紅:97; 小天:76;小張:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76"

任務

第一步:可經過javascript的日期對象來獲得當前的日期。

提示:使用Date()日期對象,注意星期返回值爲0-6,因此要轉成文字"星期X"

第二步:一長竄的字符串很差弄,找規律後分割放到數組裏更好操做哦。

第三步:分割字符串獲得分數,而後求和取整。

提示:parseInt() 字符串類型轉成整型。

代碼:

 1 <!DOCTYPE  HTML>
 2 
 3 <html >
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>7-23 編程練習</title>
10 
11  
12 
13 <script type="text/javascript">
14 
15  
16 
17   //經過javascript的日期對象來獲得當前的日期,並輸出。
18 
19   var date=new Date();
20 
21   var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
22 
23   document.write(date.getFullYear()+""+date.getMonth()+""+date.getDate()+""+weekday[date.getDay()]+"<br />");
24 
25  
26 
27  
28 
29  
30 
31   //成績是一長竄的字符串很差處理,找規律後分割放到數組裏更好操做哦
32 
33   var sorceStr = "小明:87;小花:81;小紅:97;小天:76;小張:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
34 
35  var sn=sorceStr.split(";");
36 
37  //var s1=sn[1].split(":");
38 
39  //document.write(s1[1]+"  ");
40 
41  var sum=0;
42 
43  for (var i=0;i<sn.length;i++){
44 
45      var s1=sn[i].split(":");
46 
47  
48 
49      var s2=parseInt(s1[1]);
50 
51      sum=s2+sum;
52 
53      }
54 
55  document.write(sum+"  ");
56 
57   //從數組中將成績撮出來,而後求和取整,並輸出。
58 
59 
60 </script>
61 
62 </head>
63 
64 <body>
65 
66 </body>
67 
68 </html>
7-23 編程練習
相關文章
相關標籤/搜索