JavaScript內建物件

1.什麼是物件

JavaScript 中的所有事物都是物件，如:字串、數值、陣列、函式等，每個物件帶有屬性和方法。

物件的屬性：反映該物件某些特定的性質的，如：字串的長度、影像的長寬等；

物件的方法：能夠在物件上執行的動作。例如，表單的“提交”(Submit)，時間的“獲取”(getYear)等；

JavaScript 提供多個內建物件，比如 String、Date、Array 等等，使用物件前先定義，如下使用陣列物件：
var objectName =new Array();//使用new關鍵字定義物件
或者
var objectName =[];

訪問物件屬性的語法:
objectName.propertyName
如使用 Array 物件的 length 屬性來獲得陣列的長度：
var myarray=new Array(6);//定義陣列物件
var myl=myarray.length;//訪問陣列長度length屬性
以上程式碼執行後，myl的值將是：6

訪問物件的方法：
objectName.methodName()
如使用string 物件的 toUpperCase() 方法來將文字轉換為大寫：

var mystr=”Hello world!”;//建立一個字串
var request=mystr.toUpperCase(); //使用字串物件方法
以上程式碼執行後，request的值是：HELLO WORLD!

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物件中處理時間和日期的常用方法：

3.返回/設定年份方法

get/setFullYear()方法

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.不同瀏覽器，時間格式有差異。

4.返回星期方法

getDay()方法
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

今天是：星期五

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);”

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!

7.返回指定位置的字元

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

語法:

stringObject.charAt(index)
引數說明：

注意：
1.字串中第一個字元的下標是 0。最後一個字元的下標為字串長度減一（string.length-1）。

2.如果引數 index 不在 0 與 string.length-1 之間，該方法將返回一個空字串。

如:在字串 “I love JavaScript!” 中，返回位置2的字元：

var mystr="I love JavaScript!" document.write(mystr.charAt(2));

注意：一個空格也算一個字元。

以上程式碼的執行結果：

l

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

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

10.提取字串substring()

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

語法:
stringObject.substring(startPos,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

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

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 物件方法

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

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

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(Math.round(1.6)+ "<br>");
  document.write(Math.round(2.5)+ "<br>");
  document.write(Math.round(0.49)+ "<br>");
  document.write(Math.round(-6.4)+ "<br>");
  document.write(Math.round(-6.6));
</script>

執行結果：

2
3
0
-6
-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

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；返回：陣列的長度，即陣列裡有多少個元素。它等於陣列裡最後一個元素的下標加一。

陣列方法：

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,!

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

20.顛倒陣列元素順序reverse()

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

語法：

arrayObject.reverse()
注意：該方法會改變原來的陣列，而不會建立新的陣列。

定義陣列myarr並賦值，然後顛倒其元素的順序：

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

執行結果：

1,2,3
3,2,1

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

22.陣列排序sort()

sort()方法使陣列中的元素按照一定的順序排列。

語法:

arrayObject.sort(方法函式)
引數說明：

1.如果不指定<方法函式>，則按unicode碼順序排列。

2.如果指定<方法函式>，則按<方法函式>所指定的排序方法排序。

myArray.sort(sortMethod);
注意: 該函式要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字。比較函式應該具有兩個引數 a 和 b，其返回值如下：

若返回值<=-1，則表示 A 在排序後的序列中出現在 B 之前。
若返回值>-1 && <1，則表示 A 和 B 具有相同的排序順序。
若返回值>=1，則表示 A 在排序後的序列中出現在 B 之後。

1.使用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
注意:上面的程式碼沒有按照數值的大小對數字進行排序。

2.如要實現這一點，就必須使用一個排序函式，程式碼如下：

<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

23.程式設計練習

某班的成績出來了，現在老師要把班級的成績列印出來。

效果圖:

XXXX年XX月X日 星期X–班級總分為:81
格式要求：

1、顯示列印的日期。 格式為類似“XXXX年XX月XX日 星期X” 的當前的時間。

2、計算出該班級的平均分（保留整數）。

同學成績資料如下：

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

任務
第一步：可通過javascript的日期物件來得到當前的日期。

提示:使用Date()日期物件，注意星期返回值為0-6，所以要轉成文字”星期X”
第二步：一長竄的字串不好弄，找規律後分割放到陣列裡更好操作哦。

第三步：分割字串得到分數，然後求和取整。

提示：parseInt() 字串型別轉成整型。

<!DOCTYPE  HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>繫好安全帶,準備啟航</title>

<script type="text/javascript">
    var date1=new Date();
    var week1=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  //通過javascript的日期物件來得到當前的日期，並輸出。
    var year1=date1.getFullYear();
    var month1=date1.getMonth();
    var date2=date1.getDate();
    var week2=date1.getDay();
    var week3=week1[week2];
    document.write(year1+"年"+(month1+1)+"月"+date2+"日"+" "+week3);
  //成績是一長竄的字串不好處理，找規律後分割放到陣列裡更好操作哦
  var scoreStr = "小明:87;小花:81;小紅:97;小天:76;小張:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
  var score=scoreStr.split(";");
  var score1=0;
  for(var i=0;i<score.length;i++){
      score1+=parseInt(score[i].substring(3));
  }
  document.write("--班級總分為"+score1);
  document.write("--班級平均分為"+Math.floor(score1/score.length));

  //從陣列中將成績撮出來，然後求和取整，並輸出。



</script>
</head>
<body>
</body>
</html>