Javascript內置對象詳解

一、導入

對象是包含相關屬性和方法的集合體。對象是包含相關屬性和方法的集合體。JavaScript支持3種對象：內置對象，瀏覽器對象，自定義對象。

二、知識要點

1．數組對象 Array

定義方法：

1、 使用關鍵字 new（可以省略）

var 變量名= new Array(); //創建了一個空數組
var 變量名= new Array(10);//創建一個包含 10 個元素的數組
var 變量名= new Array('致遠',40,'新樂');//創建一個數組并分配好了元素

2、使用字面量的方式

var 變量名= [];//創建一個空的數組
var 變量名= ['致遠',40,'新樂']; //創建包含元素的數組
var box = [1,2,];//禁止這么做，IE 會識別 3 個元素
var box = [,,,,,];//同樣，IE 的會有識別問題

數組的長度：變量名.length;

訪問數組元素：變量名[數組下標];

遍歷數組：

var arr=[1,44,55,7];
//方法1：用for語句
for(var i=0;i<arr.length;i++){
    document.write(arr[i]);
}
//方法2：用for...in語句
for(i in arr){
    document.write(arr[i]);
}

關聯數組：

arr['name']='致遠建站';
arr['age']=40;
arr['height']=168;
arr['weight']=55;
document.write(arr.length+'<br>');//輸出 0.length 無法獲取關聯數組的長度
//遍歷關聯數組只能用 for...in
for(name in arr){
    document.write(arr[name]+'<br>');
}

arr['name']='致遠建站';
arr['age']=40;
arr['height']=168;
arr['weight']=55;
document.write(arr.length+'<br>');//輸出 0.length 無法獲取關聯數組的長度
//遍歷關聯數組只能用 for...in
for(name in arr){
    document.write(arr[name]+'<br>');
}

多維數組：

var myClass=[];//保存全班同學的信息，包括姓名、性別、年齡
myClass[0]=['張三','男',20];
myClass[1]=['李四','女',19];
myClass[2]=['王五','男',21];
for(i=0;i<myClass.length;i++){
    document.write(i+1+'.姓名：'+myClass[i][0]+',性別：'+myClass[i][1]+',年齡：'+myClass[i][2]+'<br>');
}

數組的方法：

concat() 連接兩個或更多的數組，并返回結果。該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。

var arr =["致遠建站", "百度"],
    arr2=["專業","專注","致力"],
    arr3=["做企業網站","為企業服務"];

join() 把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。

var arr=["George","John","Thomas"];
document.write(arr.join());//輸出 George,John,Thomas
document.write(arr.join("."));//輸出 George.John.Thomas

引申：str.split(separator) 把字符串 str 分割成字符串數組。

pop() 刪除并返回數組的最后一個元素。如果數組已經為空，則 pop() 不改變數組，并返回 undefined 值。deled=arr.pop();

shift() 刪除并返回數組的第一個元素。如果數組是空的，那么 shift() 方法將不進行任何操作，返回 undefined 值。deled=arr.shift();

push() 向 數 組 的 末 尾 添 加 一 個 或 更 多 元 素 ， 并 返 回 新 的 長 度 。arr.push(element1,element2,...);

unshift() 向 數 組 的 開 頭 添 加 一 個 或 更 多 元 素 ， 并 返 回 新 的 長 度 。arr.unshift(element1,element2,...);

reverse() 顛倒數組中元素的順序。該方法會改變原來的數組，而不會創建新的數組。arr.reverse()

slice() 從某個已有的數組返回選定的元素。arr.slice(startIndex,endIndex);返回一個包含從 start 到 end （不包括 end）的新數組。

startIndex 必選，如果是負數，即從數組尾部開始算起的。也就是說，-1 指最后一個元素，-2 指倒數第二個元素，以此類推。endIndex 可選，如果沒有指定，即從 start 到數組結束的所有元素。如果是負數，那么它是從數組尾部開始算起的元素。

sort() 對數組的元素進行排序（按照字符編碼的順序進行排序）如果要對數字進行排序，需要使用一個排序函數。如下：

arr.sort(function(a,b){
    return b-a;
})//從大到小排序
arr.sort(function(a,b){
    return a-b;
})//從小到大排序

splice() 向/從數組中添加/刪除/修改項目，然后返回被刪除的項目。

刪除元素：arr.splice(startIndex,num);//從 start 開始刪除 num 個元素
添加元素：arr.splice(startIndex,0,item1,item2,...);//在 startIndex 處插入 n 個元素
替換元素：arr.splice(startIndex,num,item1,item2,...)//從 startIndex 開始替換 num個元素，需要注意后面跟定的元素需要和 num 數量一致，否則就不是替換了。

toSource() 返回該對象的源代碼。

toString() 把數組轉換為字符串，并返回結果。

toLocaleString() 把數組轉換為本地數組，并返回結果。

valueOf() 返回數組對象的原始值

示例：圖片時鐘

var pics=[0,1,2,3,4,5,6,7,8,9]; pics[y[0]]+pics[y[1]]+pics[y[2]]+pics[y[3]]

2．日期時間對象 Date

定義方法：

var d = new Date();//自動獲取當前的時間和日期。
var d = new Date(milliseconds);//距離1970.1.1 0:0:0參數毫秒數之后的時間和日期
var d = new Date(dateString);//如'2016-12-13 22:01:32'、 'Oct 1, 2015'
var d = new Date(year, month-1, day, hours, minutes, seconds, milliseconds);

常用方法：

getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。

getDay() 從 Date 對象返回一周中的某一天 (0 ~ 6)。

getMonth() 從 Date 對象返回月份 (0 ~ 11)。

getFullYear() 從 Date 對象以四位數字返回年份。

getHours() 返回 Date 對象的小時 (0 ~ 23)。

getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。

getSeconds() 返回 Date 對象的秒數 (0 ~ 59)。

getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。

getTime() 返回 1970 年 1 月 1 日至今的毫秒數。

示例：

1、動起來的時間 refresh+iframe、oInput.value、setInterval()

2、倒計時

擴展知識：

1、定時器

setTimeout:多長時間之后執行某個操作，只執行 1 次

setInterval:每隔多長時間執行一次操作，執行 N 次

setTimeout(函數名,毫秒數);

setInterval(函數名,毫秒數);

2、獲取頁面元素。

a) 獲取表單元素 document.表單名.表單項的名稱;

b) 按 id 獲取 document.getElementById('id 名稱');

c) .按標簽獲取元素 document.getElementsByTagName('html 標簽名');

d) .按類名獲取元素 document.getElementsByClassName('類名');

3、獲取或修改元素內容，innerHTML。

4、window.onload

3．數學對象

定義：數學對象不用定義，直接使用 Math 即可，也就是對象的名稱就是 Math。

屬性：1、E，歐拉常數 2、PI，圓周率

方法：

1、abs(x) 返回數的絕對值。

2、acos(x) 返回數的反余弦值。

3、asin(x) 返回數的反正弦值。

4、atan(x) 以介于 -PI/2 與 PI/2 弧度之間的數值來返回 x 的反正切值。

5、atan2(y,x) 返回從 x 軸到點 (x,y) 的角度（介于 -PI/2 與 PI/2 弧度之間）。

6、ceil(x) 對數進行上舍入。

7、cos(x) 返回數的余弦。

8、exp(x) 返回 e 的指數。

9、floor(x) 對數進行下舍入。

10、log(x) 返回數的自然對數（底為 e）。

11、max(x,y) 返回 x 和 y 中的最高值。

12、min(x,y) 返回 x 和 y 中的最低值。

13、pow(x,y) 返回 x 的 y 次冪。

14、random() 返回 0 ~ 1 之間的隨機數。

15、round(x) 把數四舍五入為最接近的整數。

16、sin(x) 返回數的正弦。

17、sqrt(x) 返回數的平方根。

18、tan(x) 返回角的正切。

示例：

1、四舍五入保留 n 位小數 var dot=Math.pow(10,dot);num=num*dot;

2、隨機顯示圖片，自動切換

3、格式化容量單位，不足 1kb 顯示 x k，不足 1Mb 顯示 x Kb，不足 1Gb 顯示 x Mb，不足 1Tb 顯示 x Gb。

4．字符串對象

定義：所有的字符串，就是一個字符串對象。也可以定義如下：

var 對象名=new String(參數);//創建一個值為參數的字符串對象

屬性

length：返回字符串的長度

方法

1、charAt() 返回在指定位置的字符。

2、charCodeAt() 返回在指定的位置的字符的 Unicode 編碼。

3、concat() 連接字符串。

4、fromCharCode() 從字符編碼創建一個字符串。

5、indexOf() 檢索字符串。str[index]

6、lastIndexOf() 從后向前搜索字符串。

7、match() 可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。

查找指定字符：

var str="Hello world!"
document.write(str.match("world") + "<br />")//輸出 world
document.write(str.match("World") + "<br />")//輸出 null
document.write(str.match("worlld") + "<br />")//輸出 null
document.write(str.match("world!"))//輸出 world!

按正則查找

var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))//輸出 1，2，3

8、replace() 用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

var str="Welcome to microsoft 123! "
str=str + "We are 4564444 proud to announce that Microsoft has "
str=str + "one of the Microsoft largest Web Developers sites in the world 789."

替換指定字符：區分大小寫，只能替換一次。

document.write(str.replace("Microsoft", "W3School"));

按正則替換字符：

document.write(str.replace(/Microsoft/, "W3School"));//同上
document.write(str.replace(/Microsoft/g, "W3School"));//全局查找，可替換多個
document.write(str.replace(/Microsoft/ ig, "W3School"));//全局查找，不區分大小寫
document.write(str.replace(/\d+/ig, "W3School"));//替換所有數字，1 到任意多個
document.write(str.replace(/\d{3}/ig, "W3School"));//替換 3 位的數字，只能是三位數
document.write(str.replace(/\d{1,3}/ig, "W3School"));//替換 1 到 3 位的數字

9、search() 用于檢索字符串中指定的子字符串， 或檢索與正則表達式相匹配的子字符串。 返回字符串中第一個與 regexp 相匹配的子串的起始位置。如果沒有找到任何匹配的子串，則返回 -1。

10、slice() 提取字符串的片斷，并在新的字符串中返回被提取的部分。

str.slice(start,end)

start 要抽取的片斷的起始下標。 如果是負數， 則該參數規定的是從字符串的尾部開始算起的位置。也就是說，-1 指字符串的最后一個字符，-2 指倒數第二個字符，以此類推。

end 緊接著要抽取的片段的結尾的下標。 若未指定此參數， 則要提取的子串包括 start 到原字符串結尾的字符串。如果該參數是負數，那么它規定的是從字符串的尾部開始算起的位置。

11、split() 把字符串分割為字符串數組。

str.split(separator,howmany)

separator 必需。字符串或正則表達式，從該參數指定的地方分割 str。

howmany 可選。該參數可指定返回的數組的最大長度。如果設置了該參數，返回的子串不會多于這個參數指定的數組。 如果沒有設置該參數， 整個字符串都會被分割，不考慮它的長度。

12、substr() 從起始索引號提取字符串中指定數目的字符。

str.substr(start,length)

start 必需。要抽取的子串的起始下標。必須是數值。如果是負數，那么該參數聲明從字符串的尾部開始算起的位置。也就是說，-1 指字符串中最后一個字符，-2 指倒數第二個字符，以此類推。

length 可選。 子串中的字符數。 必須是數值。 如果省略了該參數， 那么返回從 str的開始位置到結尾的字串。

13、substring() 提取字符串中兩個指定的索引號之間的字符。

str.substring(start,stop)

start 必需。 一個非負的整數， 規定要提取的子串的第一個字符在 str 中的位置。

stop 可選。一個非負的整數，比要提取的子串的最后一個字符在 str 中的位置多 1。如果省略該參數，那么返回的子串會一直到字符串的結尾。

14、toLocaleLowerCase() 把字符串轉換為小寫。

15、toLocaleUpperCase() 把字符串轉換為大寫。

16、toLowerCase() 把字符串轉換為小寫。

17、toUpperCase() 把字符串轉換為大寫。

示例：

1、驗證碼

2、檢測用戶名是否合法，英文字母、數字、下劃線，6-16 位，不區分大小寫。

擴展知識：正則概覽

.任意字符，不包括換行符\w 字母 a-zA-Z_
\d 數字 0-9
reg=/.{6,16}/;
reg=/^[\u4e00-\u9fa5]{2,4}$/;
reg=/^0\d{2,3}-\d{7,8}$/;
reg = /^13\d{9}$|^15\d{9}$|^18\d{9}$/;
reg=/^[\d]{5,14}$/;
reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

目的與要求

通過本章的學習，讓同學們熟練使用Javascript中的內置對象的各種屬性及其方法，并能利用Javascript內置的這些對象進行編程。

課堂練習

數組對象

a)定義一個數組保存全班同學的姓名，遍歷（for...in/for）輸出每個同學的姓名。

b)彈出一個輸入框讓用戶輸入5個數字，每個數字之間用逗號分割，然后從大到小排序輸出。

日期時間對象

a)圖片時鐘

b)倒計時

數學對象

a)在固定DOM中，隨機顯示5張圖片，1秒切換一張。

b)編寫一個函數，傳人一個時間字符串，如果不到1分鐘，返回x秒前/后，如果不到1小時，返回x分鐘前/后，如果不到1天，返回x小時前/后，否則，返回x天前/后。

字符串對象

a)創建一個文本框，一個按鈕，文本框中只能使用英文字母、數字和下劃線，不區分大小寫，用戶輸入文字后點擊按鈕判斷輸入的內容是否合法。

三、總結

JS中內置了17個對象，常用的是Array對象、Date對象、正則表達式對象、string對象、Global對象，因為時間的關系沒能一一給大家講解，希望同學們課后能把相關知識補充完整，并能在項目實戰中合理利用以提高工作效率。

© 致遠 2020-02-20，原創內容，轉載請注明出錯：Javascript內置對象詳解