天天看點

JavaScript面向對象(四)

js面向對象基礎

函數就是對象,對象就是函數。

方法直接調用為函數,用new調用為對象。

javascript中沒有類的文法,是用函數閉包(closure)模拟出來的,下面講解的時候還是用c#中的類、構造函數的概念,javascript中string、date等“類”都被叫做“對象”,挺怪,友善初學者了解,不嚴謹。javascript中聲明類(類不是類,是對象)。example(寫一個person對象):function person()  {   }   //ok,就這麼簡單。如何使用perosn對象?

var p=new person();// “var p”  不是   “person p”。

p.name=‘張三’;//動态語言,是以可以直接寫。

p.age=30;

p.sayhello=function() { alert(‘hi~’); }

alert(p.name);

alert(p[‘age’]);//另外一種動态通路屬性的方式。

注:

閉包:簡單的了解就是在函數(“外部函數”)中又定義了函數(“内部函數”),并且可以在“外部函數”之外,使用“内部函數”。

javascript中沒有類的文法,是用函數閉包(closure)模拟出來的,下面講解的時候還是用c#中的類、構造函數的概念,javascript中string、date等“類”都被叫做“對象”,挺怪,友善初學者了解,不嚴謹。javascript中聲明類(類不是類,是對象)。

javascript同樣支援this關鍵字

建構一個帶參數的person對象。通過this關鍵字為對象的屬性指派。

function person(name, age) {

            this.name = name;

            this.age = age;

            this.showinfo = function() {

            alert('大家好,我叫' + this.name + ',今年' + this.age + '歲了。');     }}

var zjl = new person('周傑倫', 20);

zjl.showinfo();

function person(name,age)可以看做是聲明構造函數,name、age這些屬性也是使用者動态添加了。【var p1 = person(“周傑倫", 20);//不要丢了new,否則就變成調用函數了,p1為undefined。】new 相當于建立了函數的一個執行個體。

string對象(*)

length屬性:擷取字元串的字元個數。(無論中文字元還是英文字元都算1個字元。)

charat(index)方法:擷取指定索引位置的字元。(索引從0開始)

indexof(‘字元串’,startindex)方法:擷取指定字元串第一次出現的位置。startindex表示從第幾個開始搜尋。

split(‘分隔符’,limit);//根據分隔符将一個字元串傳回為一個數組。limit表示要傳回的數組的最大長度(可自定義)。多個分隔符使用正規表達式:var msg = 'a★b★c☆d☆e#f';var vals = msg.split(/☆|★|#/);alert(vals);

substr(startindex,len)//從startindex開始,截取len個字元。

substring(startindex,stopindex)//從startindex開始,截取到stopindex位置(不包括stopindex所在的字元)。

touppercase()//轉換大寫、tolowercase();//轉換小寫

match()、replace()、search()方法,正規表達式相關

舉例:

var uname = new string('a我不h是美女haha10086');

1、charat用法      

        alert(uname.length);

         alert(uname.charat(6)); //傳回女,不是美,索引從0開始。

         alert(uname.indexof('h', 5)); //從索引為5的字元開始搜尋h,如果在索引為3的字元前有h,也不予理會。

              2、match用法

var reg = /\w+/g;      

        //當采用全局模式g,的時候直接把所有比對的元素傳回到一個數組當中

        var result = uname.match(reg);

        alert(result.length);

        for (var i = 0; i < result.length; i++) {

        alert(result[i]);

        }//結果:3 a h haha10086

        3、replace

           //不要忽略這裡的全局模式g,否則隻能比對第一個符合的元素

        //加上g以後,可以吧所有比對正規表達式的元素都替換

        var result = uname.replace(/a/g, 'x');

        alert(result);//結果:x我不h是美女hxhx10086

4、match和search方法

//search()方法與indexof()方法都是傳回找到字元串的第一次出現的索引,

//隻是search()方法可以用正規表達式,而indexof()隻能寫字元串。

        var result = uname.search(/\d{5}/);

        var resultindexof = uname.indexof('10086');

        alert(result);//結果:11

            alert(resultindexof);//結果:11

5、split()用法:

   //第一個參數是分隔符,第二個參數是要傳回的最大元素個數。

        var result = uname.split(',', 3);

        alert(result.length);//結果:1

        }//結果:a我不h是美女haha10086

6、substr()用法:

  //從索引為2的字元開始,截取3個字元,索引是從零開始的。

        var result1 = uname.substr(2, 3);

        alert(result1);//結果:不h是

7、substring()用法:

//從第2個索引開始截取,截取到第3個索引之前。(不包括第3個索引的字元)

        var result2 = uname.substring(2, 3);

        alert(result2);

array對象

javascript中的array對象就是數組,首先是一個動态數組,而且是一個像c#中數組、arraylist、hashtable等的超強綜合體。

數組的使用方式:

var names = new array();//無需初始化長度,動态

names[0] = "tom";

names[1] = "jerry";

names[2] = "lily";

注:在javascript中數組時稀疏的。這意味着數組的一下标必須落在一個連續的數組範圍内,隻有那些真正存儲在數組中的元素才能夠有javascript解釋器隻給數組下标為0和1000的元素配置設定記憶體,而并不給下标在0和1000之間的元素配置設定記憶體。

 a[0]=1;

 a[1000]=”this is element 1000”;

循環周遊數組(for循環):

for (var i = 0; i < names.length; i++) {

    alert(names[i]);

}

當然這是假定數組時連續的,而且從0開始的。如果情況不是這樣的,就要重新檢測一下,看看每個元素是否被定義了。例:

for(var i=0;i<names.length;i++)

{

       if (names[i])

              alert(names[i])

循環周遊數組(forin循環):類似于c#中的foreach.

for (var i in names) {

  alert(names[i]);//如果直接輸出i是什麼?

使用forin循環可以周遊對象的所有屬性。【示範:周遊window對象】

forin循環其實周遊的還是key.

數組的其他幾種聲明方式:

new array();

new array(size);

new array(element0, element0, ..., elementn);

var arr = [‘china’, 2008, true, ‘hello’];(推薦。)

arr[0]à'china'

arr[1]à2008

删除數組元素

delete運算符把一個數組設定為undefined值,但是元素本身還繼續存在。

要删除一個元素的方法:

 array.shift()方法删除數組的第一個元素,array.pop()方法删除掉最後一個元素。array.splice()方法從數中删除一個連續範圍内的元素。

================array的其他方法========================

array.join(“連接配接字元串”)//将數組中的元素通過指定的“連接配接字元串”連接配接起來,傳回一個字元串。

       var a={1,2,3};

       var s=a.join();//s=”1,2,3”;

array.reverse();//将數組中的元素反轉。

array.sort();//排序

在原數組上對數組進行排序,傳回排序後的數組,如果調用sort()時,不傳遞給它參數,那麼它将按照字母順序對數組進行排序。

  var a = new array("banana", "chery", "apple");

        a.sort();

        var s = a.join('|');

        alert(s); //結果:apple | banana | chery

如果将數組按照别的順序,必須将一個比較函數作為參數傳遞給sort().該函數确定他的兩個參數在排序數組中哪個在前,哪個在後。

sortbyasc(a,b){

return a-b;

array.sort(sortbyasc);

例:

  var a = new array("banana", "chery", "apple","dfg");

        a.sort(function(a, b) {

            if (a > b) {

                return -1;

            }

            else {

                return 1;

        });

        alert(s); //結果:dfg|chery|banana|apple

              concat()方法

                     能建立并傳回一個數組,這個數組包含了調用concat()的原始數組元素,其後跟随的是concat()的參數。如果其中有些參數是數組,那麼它将被展開,但是注意concat()方法并不能遞歸展開一個元素為數組的數組。

       var a = [1, 2, 3];

        var b = a.concat(4, 5);//結果:1,2,3,4,5

        var c = a.concat([4, 5]);//結果:1,2,3,4,5

        var d = a.concat([4, 5], [6, 7]);//結果:1,2,3,4,5,6,7

        var e = a.concat(4, 5, [6, [7, 8, 9]]);//結果:,1,2,3,4,5,6,[7,8,9]

        for (var i in b)

        {

            alert(b[i])

        }

       slice()方法:傳回指定數組的一個片段。

       他的參數指定了要傳回的片段的起止點。傳回數組包含有第一個參數指定的元素和從那個元素開始到第二個參數制定的元素位置的元素,但是并不包含第二個參數所指定的元素。如果參數中隻有一個參數,那麼傳回的數組将包含從起始位置到原數組結束處的所有元素。如果是負數則是從最後一個元素而言。

              var a = [1, 2, 3, 4, 5, 6];

        var b = a.slice(0, 3);//結果:1,2,3

        var c = a.slice(3);//結果:4,5,6

        var d = a.slice(1, -1);//結果:2,3,4,5,

        var e = a.slice(-3, -2);//結果:4

      splice()方法是插入或删除數組元素的通用方法。

              splice() 的第一個參數指定了要插入或删除的元素在數組中的位置。第二個元素指定了要從數組中删除的元素的個數。如果第二個參數被省略了,那麼将删除從開始元素到數組結尾處的所有元素。splice()傳回的是删除元素後的數組,如果沒有删除任何元素,将傳回一個空數組。

        var a = [1, 2, 3, 4, 5, 6, 7, 8, 9];

        a.splice(4);//結果:a=[1,2,3,4];

        a.splice(1, 2);//結果:a=[1,4];

        a.splice(1, 1);//結果:a=[1];

splice() 的前面連個參數指定了删除的數組。這兩個參數之後還可以有任意多個參數,他們指定的是要從第二個參數制定的位置處開始插入的元素。

              var a=[1,2,3,4,5];

              a.splice(2, 0, 'a', 'b');//結果:a=[1,2,a,b,3,4,5]

a.splice(2, 2, [1, 2], 3);//結果:删除a,b a=[1,2,[1,2],3,3,4,5]

dictionary

js中的array是一個寶貝,不僅是一個數組,還是一個dictionary,還是一個stack(棧集合,不能是dictionary)。

var pinyins = new array();

pinyins["人"] = "ren";

pinyins["口"] = "kou";

pinyins["手"] = "shou";

alert(pinyins["人"]);

alert(pinyins.人);

字典風格的簡化建立方式:

var arr = {“人”:”ren”,“口”:”kou”};//json格式。

像hashtable、dictionary那樣用,而且像它們一樣效率高。

不能直接用for循環周遊,需要用forin循環。

dictionary風格數組的length為0。是以不能用for周遊。

隻要有了array你就同時擁有了數組、list、hashtable。

 var arr = new array();

 arr[0] = "tom";

 arr[1] = "jim";

 for (var i in arr) {//列印出來的是0、1、2……證明了數組用法是dictionary用法的一個特例而已。

alert(i+arr[i]);

 }

json對象

對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”(左括号)開始,“}”(右括号)結束。每個“名稱”後跟一個“:”(冒号);“‘名稱/值’ 對”之間使用“,”(逗号)分隔。

JavaScript面向對象(四)

數組是值(value)的有序集合。一個數組以“[”(左中括号)開始,“]”(右中括号)結束。值之間使用“,”(逗号)分隔。

JavaScript面向對象(四)

值(value)可以是雙引号括起來的字元串(string)、數值(number)、true、false、 null、對象(object)或者數組(array)。這些結構可以嵌套。

JavaScript面向對象(四)

arr.name、arr.age、arr.email

var arr={“name”:”tom”,”age”:18,”email”:’[email protected]’};

json格式可以當做一個對象。

 var arr=[ {"name":"steve","age":18}, {"name":"steve","age":18}];//json對象數組。

在ajax中使用json格式傳輸資料非常友善。

====================json========================

1.

var personalinfo = { "name": "周傑倫", "age": 20, "address": { "city": "beijing", "country": "china"} };

        alert(personalinfo.name);

        alert(personalinfo.age);

        alert(personalinfo.address.city);

        alert(personalinfo.address.country);

2.

var students = [{ "id": "1001", "name": "james" }, { "id": "1002", "name": "bob"}];

        for (var i = 0; i < students.length; i++) {

            alert(students[i].id + "===>" + students[i].name);

擴充方法(*)

通過類對象的prototype設定擴充方法,下面為string對象增加quote(兩邊加字元)方法

        string.prototype.quote = function(quotestr) {

            if (!quotestr) {

                quotestr = "\"";

            return quotestr + this + quotestr;

        };

       alert("abc".quote());        alert("abc".quote("|"));

擴充方法的聲明要在使用擴充方法之前執行。js的函數沒有專門的函數預設值的文法,但是可以不給參數傳值,不傳值的參數值就是undefined,自己做判斷來給預設值。

繼續閱讀