JavaScript之ECMA物件的學習
從傳統意義上來說,ECMAScript 並不真正具有類。事實上,除了說明不存在類,在 ECMA-262 中根本沒有出現“類”這個詞。ECMAScript 定義了“物件定義”,邏輯上等價於其他程式設計語言中的類。
var o = new Object();
1 物件的概念和分類
- 由ECMAScript定義的本地物件.獨立於宿主環境的 ECMAScript 實現提供的物件.(native object)
- ECMAScript 實現提供的、獨立於宿主環境的所有物件,在 ECMAScript 程式開始執行時出現.這意味著開發者不必明確例項化內建物件,它已被例項化了。ECMA-262 只定義了兩個內建物件,即 Global 和 Math (它們也是本地物件,根據定義,每個內建物件都是本地物件)。(built-in object)
- 所有非本地物件都是宿主物件(host object),即由 ECMAScript 實現的宿主環境提供的物件。所有 BOM 和 DOM 物件都是宿主物件。
object物件: ECMAScript 中的所有物件都由這個物件繼承而來; Object 物件中的所有屬性和方法都會出現在其他物件中
ToString() :返回物件的原始字串表示。 ValueOf(): 返回最適合該物件的原始值。對於許多物件,該方法返回的值都與 ToString() 的返回值相同。
11 種內建物件
包括: Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object
簡介:
在 JavaScript 中除了 null 和 undefined 以外其他的資料型別都被定義成了物件, 也可以用建立物件的方法定義變數, String 、 Math 、 Array 、 Date 、 RegExp 都是 JavaScript 中重要的內建物件, 在JavaScript程式大多數功能都是通過物件實現的
<script language="javascript"> var aa=Number.MAX_VALUE; //利用數字物件獲取可表示最大數 var bb=new String("hello JavaScript"); //建立字串物件 var cc=new Date(); //建立日期物件 var dd=new Array("星期一","星期二","星期三","星期四"); //陣列物件 </script>
2 String物件
2.1 自動建立字串物件
var str1="hello world"; alert(str1.length); alert(str1.substr(1,5));
呼叫字串的物件屬性或方法時自動建立物件,用完就丟棄
2.2 手工建立字串物件
<script> var str1 = new String("hello world"); alert(str1.length); alert(str1.substr(1,7)) </script>
採用 new 建立字串物件 str1 ,全域性有效,結果如下;
2.3 String物件的屬性
獲取字串長度 length var str1="String物件"; var str2=""; alert("str1長度 "+str1.length); alert("str2長度 "+str2.length);
2.4 練習 大小寫轉換
var str1="AbcdEfgh"; var str2=str1.toLowerCase(); var str3=str1.toUpperCase(); alert(str2); //結果為"abcdefgh" alert(str3); //結果為"ABCDEFGH"
2.5 練習 獲取指定字元
書寫格式 x.charAt(index) x.charCodeAt(index) 使用註解 x代表字串物件 index代表字元位置 index從0開始編號 charAt返回index位置的字元 charCodeAt返回index位置的Unicode編碼 ---------------------- var str1="welcome to the world of JS! 戰爭熱誠"; var str2=str1.charAt(28); var str3=str1.charCodeAt(28); alert(str2); console.log(str2); //結果為"戰" console.log(str3); //結果為25112
2.6 練習查詢字串
//書寫格式 // //x.indexOf(findstr,index) //x.lastIndexOf(findstr) //------------------------------------- var str1="welcome to the world of JS!"; var str2=str1.indexOf("l"); var str3=str1.lastIndexOf("l"); alert(str2); //結果為2 alert(str3); //結果為18 //-------*********************************************************------- //書寫格式 // //x.match(regexp) // //x.search(regexp) // //使用註解 // //x代表字串物件 // //regexp代表正則表示式或字串 // //match返回匹配字串的陣列,如果沒有匹配則返回null // //search返回匹配字串的首字元位置索引 //------------------------------------- var str1="welcome to the world of JS!"; var str2=str1.match("world"); var str3=str1.search("world"); alert(str2[0]); //結果為"world" alert(str3); //結果為15
2.7 子字串處理
//擷取子字串 // //書寫格式 // //x.substr(start, length) // //x.substring(start, end) // //使用註解 // //x代表字串物件 // //start表示開始位置 // //length表示擷取長度 // //end是結束位置加1 // //第一個字元位置為0 var str1="abcdefgh"; var str2=str1.substr(2,4); var str3=str1.substring(2,4); alert(str2); //結果為"cdef" alert(str3); //結果為"cd" //-------*********************************************************------- //x.slice(start, end) var str1="abcdefgh"; var str2=str1.slice(2,4); var str3=str1.slice(4); var str4=str1.slice(2,-1); var str5=str1.slice(-3,-1); alert(str2); //結果為"cd" alert(str3); //結果為"efgh" alert(str4); //結果為"cdefg" alert(str5); //結果為"fg"
替換字串
//x.replace(findstr,tostr) var str1="abcdefgh"; var str2=str1.replace("cd","aaa"); alert(str2); //結果為"abaaaefgh"
分割字串
var str1="一,二,三,四,五,六,日"; var strArray=str1.split(","); alert(strArray[1]); //結果為"二"
連線字串
//y=x.concat(addstr) // //使用註解 // //x代表字串物件 //addstr為新增字串 //返回x+addstr字串 var str1="abcd"; var str2=str1.concat("efgh"); alert(str2); //結果為"abcdefgh"
3 Array物件
3.1 建立陣列物件
Array 物件用於在單個的變數中儲存多個值。 語法: 建立方式1: var a=[1,2,3]; 建立方式2: new Array();//建立陣列時允許指定元素個數也可以不指定元素個數。 new Array(size);//if 1個引數且為數字,即代表size,not content 初始化陣列物件: var cnweek=new Array(7); cnweek[0]="星期日"; cnweek[1]="星期一"; ... cnweek[6]="星期六"; new Array(element0, element1, ..., elementn)//也可以直接在建立物件時初始化陣列元素,元素型別允許不同 var test=new Array(100,"a",true);
練習:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> // 建立方法一 var arr = [1,2,3,6]; // 建立方法二 var arr2 = new Array((1,2,3,4)); console.log(arr.length) console.log(arr2.length) </script> </body> </html>
結果:
Line"/>
3.2 建立二維陣列
var cnweek=new Array(7); for (var i=0;i<=6;i++){ cnweek[i]=new Array(2); } cnweek[0][0]="星期日"; cnweek[0][1]="Sunday"; cnweek[1][0]="星期一"; cnweek[1][1]="Monday"; ... cnweek[6][0]="星期六"; cnweek[6][1]="Saturday";
練習:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var arr = new Array(5,"hello",true,[1,4]); console.log(arr[3][1]); // 建立二維陣列 方法一數組裡面套陣列 var arr2= new Array([1,2,3],[1,2,4]) console.log(arr2) console.log(arr2.length) </script> </body> </html>
3.3 Array物件的屬性
獲取陣列元素的個數:length
var cnweek=new Array(7); cnweek[0]="星期日"; cnweek[1]="星期一"; cnweek[2]="星期二"; cnweek[3]="星期三"; cnweek[4]="星期四"; cnweek[5]="星期五"; cnweek[6]="星期六"; for (var i=0;i<cnweek.length;i++){ document.write(cnweek[i]+" | "); }
3.4 Array物件的方法
3.5 練習1
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> // 建立方法一 var arr = [1,2,3,6]; // 建立方法二 var arr2 = new Array((1,2,3,4)); console.log(arr.length); console.log(arr2.length); var arr3 = new Array(); var arr4 = new Array(4); // 如果採用初始化物件方式建立陣列,如果裡面只有一個值而且是一個數字 // 那麼陣列表示的是長度而不是內容 console.log(arr3) console.log(arr4) console.log(arr4[0]) console.log(arr4[1]) console.log(arr4[2]) console.log(arr4[3]) console.log(arr4[4]) // 陣列是可變長的 arr4[5] = 10 console.log(arr4) console.log(arr4.length) </script> </body> </html>
結果:
3.6 連線陣列join方法
//書寫格式 //x.join(bystr) //使用註解 // //x代表陣列物件 //bystr作為連線陣列中元素的字串 //返回連線後的字串 //與字串的split功能剛好相反 var arr1=[1, 2, 3, 4, 5, 6, 7]; var str1=arr1.join("-"); alert(str1); //結果為"1-2-3-4-5-6-7"
3.7 連線陣列concat方法
//連線陣列-concat方法 // //x.concat(value,...) var a = [1,2,3]; var a = new Array(1,2,3); var b=a.concat(4,5) ; alert(a.toString()); //返回結果為1,2,3 alert(b.toString()); //返回結果為1,2,3,4,
3.8 陣列排序reverse sort
//x.reverse() //x.sort() var arr1=[32, 12, 111, 444]; //var arr1=["a","d","f","c"]; arr1.reverse(); //顛倒陣列元素 alert(arr1.toString()); //結果為444,111,12,32 arr1.sort();//排序陣列元素 alert(arr1.toString()); //結果為111,12,32,444 //------------------------------ arr=[1,5,2,100]; //arr.sort(); //alert(arr); //如果就想按著數字比較呢? function intSort(a,b){ if (a>b){ return 1;//-1 } else if(a<b){ return -1;//1 } else { return 0 } } arr.sort(intSort); alert(arr); function IntSort(a,b){ return a-b; }
3.9 陣列切片 slice
//x.slice(start, end) // //使用註解 // //x代表陣列物件 //start表示開始位置索引 //end是結束位置下一陣列元素索引編號 //第一個陣列元素索引為0 //start、end可為負數,-1代表最後一個數組元素 //end省略則相當於從start位置擷取以後所有陣列元素 var arr1=['a','b','c','d','e','f','g','h']; var arr2=arr1.slice(2,4); var arr3=arr1.slice(4); var arr4=arr1.slice(2,-1); alert(arr2.toString()); //結果為"c,d" alert(arr3.toString()); //結果為"e,f,g,h" alert(arr4.toString()); //結果為"c,d,e,f,g"
3.10 刪除子陣列
//x. splice(start, deleteCount, value, ...) // //使用註解 // //x代表陣列物件 //splice的主要用途是對陣列指定位置進行刪除和插入 //start表示開始位置索引 //deleteCount刪除陣列元素的個數 //value表示在刪除位置插入的陣列元素 //value引數可以省略 var a = [1,2,3,4,5,6,7,8]; a.splice(1,2); //a變為 [1,4,5,6,7,8] alert(a.toString()); a.splice(1,1); //a變為[1,5,6,7,8] alert(a.toString()); a.splice(1,0,2,3); //a變為[1,2,3,5,6,7,8] alert(a.toString());
3.11 陣列的進出棧操作(1)
//push pop這兩個方法模擬的是一個棧操作 //x.push(value, ...)壓棧 //x.pop()彈棧 //使用註解 // //x代表陣列物件 //value可以為字串、數字、陣列等任何值 //push是將value值新增到陣列x的結尾 //pop是將陣列x的最後一個元素刪除 var arr1=[1,2,3]; arr1.push(4,5); alert(arr1); //結果為"1,2,3,4,5" arr1.push([6,7]); alert(arr1) //結果為"1,2,3,4,5,6,7" arr1.pop(); alert(arr1); //結果為"1,2,3,4,5"
3.12 陣列的進出棧操作(2)
// unshift shift //x.unshift(value,...) //x.shift() //使用註解 // //x代表陣列物件 //value可以為字串、數字、陣列等任何值 //unshift是將value值插入到陣列x的開始 //shift是將陣列x的第一個元素刪除 var arr1=[1,2,3]; arr1.unshift(4,5); alert(arr1); //結果為"4,5,1,2,3" arr1. unshift([6,7]); alert(arr1); //結果為"6,7,4,5,1,2,3" arr1.shift(); alert(arr1); //結果為"4,5,1,2,3"
3.13 總結js的陣列特性
//js中陣列的特性 //java中陣列的特性,規定是什麼型別的陣列,就只能裝什麼型別.只有一種型別. //js中的陣列特性1: js中的陣列可以裝任意型別,沒有任何限制. //js中的陣列特性2: js中的陣列,長度是隨著下標變化的.用到多長就有多長. var arr5 = ['abc',123,1.14,true,null,undefined,new String('1213'),new Function('a','b','alert(a+b)')]; /*alert(arr5.length);//8 arr5[10] = "hahaha"; alert(arr5.length); //11 alert(arr5[9]);// undefined */
4 Date物件
4.1 建立Date物件
//方法1:不指定引數 var nowd1=new Date(); alert(nowd1.toLocaleString( )); //方法2:引數為日期字串 var nowd2=new Date("2004/3/20 11:12"); alert(nowd2.toLocaleString( )); var nowd3=new Date("04/03/20 11:12"); alert(nowd3.toLocaleString( )); //方法3:引數為毫秒數 var nowd3=new Date(5000); alert(nowd3.toLocaleString( )); alert(nowd3.toUTCString()); //方法4:引數為年月日小時分鐘秒毫秒 var nowd4=new Date(2004,2,20,11,12,0,300); alert(nowd4.toLocaleString( )); //毫秒並不直接顯示
4.2 Date物件的方法——獲取日期和時間
獲取日期和時間 getDate()獲取日 getDay ()獲取星期 getMonth ()獲取月(0-11) getFullYear ()獲取完整年份 getYear ()獲取年 getHours ()獲取小時 getMinutes ()獲取分鐘 getSeconds ()獲取秒 getMilliseconds ()獲取毫秒 getTime ()返回累計毫秒數(從1970/1/1午夜)
4.3 練習例項
function getCurrentDate(){ //1. 建立Date物件 var date = new Date(); //沒有填入任何引數那麼就是當前時間 //2. 獲得當前年份 var year = date.getFullYear(); //3. 獲得當前月份 js中月份是從0到11. var month = date.getMonth()+1; //4. 獲得當前日 var day = date.getDate(); //5. 獲得當前小時 var hour = date.getHours(); //6. 獲得當前分鐘 var min = date.getMinutes(); //7. 獲得當前秒 var sec = date.getSeconds(); //8. 獲得當前星期 var week = date.getDay(); //沒有getWeek // 2014年06月18日 15:40:30 星期三 return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week); } alert(getCurrentDate()); //解決 自動補齊成兩位數字的方法 function changeNum(num){ if(num < 10){ return "0"+num; }else{ return num; } } //將數字 0~6 轉換成 星期日到星期六 function parseWeek(week){ var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; //0123 ............. return arr[week]; }
4.4 Date物件的方法——設定日期和時間
//設定日期和時間 //setDate(day_of_month)設定日 //setMonth (month)設定月 //setFullYear (year)設定年 //setHours (hour)設定小時 //setMinutes (minute)設定分鐘 //setSeconds (second)設定秒 //setMillliseconds (ms)設定毫秒(0-999) //setTime (allms)設定累計毫秒(從1970/1/1午夜) var x=new Date(); x.setFullYear (1997);//設定年1997 x.setMonth(7);//設定月7 x.setDate(1);//設定日1 x.setHours(5);//設定小時5 x.setMinutes(12);//設定分鐘12 x.setSeconds(54);//設定秒54 x.setMilliseconds(230);//設定毫秒230 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日5點12分54秒 x.setTime(870409430000); //設定累計毫秒數 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日12點23分50秒
4.5 Date物件的方法——日期和時間的轉換
日期和時間的轉換: getTimezoneOffset():8個時區×15度×4分/度=480; 返回本地時間與GMT的時間差,以分鐘為單位 toUTCString() 返回國際標準時間字串 toLocalString() 返回本地格式時間字串 Date.parse(x) 返回累計毫秒數(從1970/1/1午夜到本地時間) Date.UTC(x) 返回累計毫秒數(從1970/1/1午夜到國際時間)
5 RegExp物件
//RegExp物件 // 在表單驗證時使用該物件驗證使用者填入的字串是否符合規則. //建立正則物件方式1引數1 正則表示式引數2 驗證模式g global / i 忽略大小寫. //引數2一般填寫g就可以,也有“gi”. // 使用者名稱 首字母必須是英文, 除了第一位其他只能是英文數字和_ . 長度最短不能少於6位 最長不能超過12位 //----------------------------建立方式1 /* var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g"); // //驗證字串 var str = "bc123"; alert(reg1.test(str));// true //----------------------------建立方式2/填寫正則表示式/匹配模式; var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g; alert(reg2.test(str));// true */ //-------------------------------正則物件的方法------------------- //test方法==>測試一個字串是否複合 正則規則. 返回值是true 和false. //-------------------------String 中與正則結合的4個方法------------------. // macth search split replace var str = "hello world"; //alert(str.match(/o/g)); //查詢字串中 複合正則的 內容. //alert(str.search(/h/g));// 0查詢字串中符合正則表示式的內容位置 //alert(str.split(/o/g)); // 按照正則表示式對字串進行切割. 返回陣列; alert(str.replace(/o/g, "s")); // hells wsrld對字串按照正則進行替換.
6 Math物件
//Math物件 //該物件中的屬性方法 和數學有關. //Math是內建物件 , 與Global的不同之處是, 在呼叫時 需要打出 "Math."字首. //屬性學習: //alert(Math.PI); //方法學習: //alert(Math.random()); // 獲得隨機數 0~1 不包括1. //alert(Math.round(1.5)); // 四捨五入 //練習:獲取1-100的隨機整數,包括1和100 //var num=Math.random(); //num=num*10; //num=Math.round(num); // alert(num) //============maxmin========================= /* alert(Math.max(1,2));// 2 alert(Math.min(1,2));// 1 */ //-------------pow-------------------------------- alert(Math.pow(2,4));// pow 計算引數1 的引數2 次方. abs(x)返回數的絕對值。 exp(x)返回 e 的指數。 floor(x)對數進行下舍入。 log(x)返回數的自然對數(底為e)。 max(x,y)返回 x 和 y 中的最高值。 min(x,y)返回 x 和 y 中的最低值。 pow(x,y)返回 x 的 y 次冪。 random()返回 0 ~ 1 之間的隨機數。 round(x)把數四捨五入為最接近的整數。 sin(x)返回數的正弦。 sqrt(x)返回數的平方根。 tan(x)返回角的正切。