DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 《JavaScript高級程序設計第五章--引用類型》之Object對象和array對象
《JavaScript高級程序設計第五章--引用類型》之Object對象和array對象
編輯:JavaScript基礎知識     

這一章主要就是介紹各種內置對象的用法,認識其經常用到的屬性和方法。

5.1Object類型

  創建objec的方式,一種是new Object(),一種是對象字面量(簡化創建包含大量屬性的對象的過程)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

var person = {
    name = "Nicholas";
    age = 27
};//最後一個屬性不必添加逗號,ie7等會導致錯誤
//在使用對象字面量語法時,屬性名也可以使用字符串。這裡的數值屬性會自動轉字符串。
var person = {
    "name" : "Nicholas";
    "age" : 27;
     5 : true
}
//var person ={} <=> new Object()

      一般來說訪問對象的屬性有點表示法和方括號表示法(將訪問的屬性以字符串的形式,優點是可以通過變量來訪問屬性)

 alert(person["name"]);
 alert(person.name);
 
 var propertyName = ”name";
 alert(person[propertyName]);
 
 /*如果屬性名中包含會導致語法錯誤的字符,或者使用屬性名為關鍵字保留字(不過誰會如此做呢!),也可以使用方括號表示法。通常我們使用點表示法,除非必須使用[]*/
 person["first name"]= "Nicholas";

5.2Array類型

  ECMAScript數組的每一項可以保存任何類型的數據。大小是可以動態調整的,可以隨著數據的添加自動增長以容納新數據,會自動更新length屬性。

/*第一種創建數組的方式*/
var colors = new Array(3);//參數是數值,創建一個包含3項的數組;
var names = new Araay("Greg");//參數是其他類型,創建一個包含1項的數組,這裡是一個字符串參數
//使用Array構造函數也可以省略new操作符。
/*第二種創建數組的方式字面量*/
var colors = ["red", "blue", "green"]; //creates an array with three strings
        var names = [];                        //creates an empty array
        var values = [1,2,];                   //AVOID! Creates an array with 2 or 3 items,
        var options = [,,,,,];                 //AVOID! creates an array with 5 or 6 items
        alert(colors.length);    //3
        alert(names.length);     //0
        alert(values.length);    //2 (FF, Safari, Opera) or 3 (IE)在ie8之前版本中包含3個項,數值分別1、2、undefined,
        alert(options.length);   //5 (FF, Safari, Opera) or 6 (IE)同上。所以最好別這麼做;

  (注:與對象一樣,使用數組字面量表示法時,也不會調用Array構造函數,Firefox 3及更早版本除外估計現在都沒這版本了吧)

  數組的length屬性很有特點--它不是只讀的。因此,這個屬性可以設置。可以從數組的末尾移除項或向數組中添加新項。

 var colors = ["red", "blue", "green"];    //creates an array with three strings
 colors.length = 2;
 alert(colors[2]);        //undefine移除
 var colors = ["red", "blue", "green"];    //creates an array with three strings
 colors.length = 4;
 alert(colors[3]);        //undefined添加

 在數組末尾添加新項

 var colors = ["red", "blue", "green"];    //creates an array with three strings
 colors[colors.length] = "black";          //add a color
 colors[colors.length] = "brown";          //add another color
 alert(colors.length);    //5
 alert(colors[3]);        //black
 alert(colors[4]);        //brown

 數組位置3-98實際上不存在,訪問他們返回undefined,數組最多可以包含42億多個,超過這個上限就會異常

 var colors = ["red", "blue", "green"];    //creates an array with three strings
 colors[99] = "black";                     //add a color (position 99)
 alert(colors.length);  //10

 5.2.1 檢測數組

  雖然可以用instanceof 操作符來檢測,但前提假定只有一個全局執行環境。如果,網頁中包含多個框架,那實際上就存在兩個以上不同的全局執行環境,從而存在兩個以上不同版本的Array構造函數。(怎麼解決?)

ES5新增了Array.isArray()方法,最終確定某個值到底是不是數組,而不管是來自哪個全局執行環境中創建的。(支持的浏覽器有ie9+,Firefox4+,Safari5+,Opera 10.5和Chrome),沒有實現的其他浏覽器版本,可自行谷歌解決辦法或參考《JavaScript高級程序設計22.1.1節》

5.2.2 轉換方法

  1)所有對象都有toLocaleString()toString()valueof()方法。其中調用數組的toString()方法會返回有數組中每一個值的字符串形式拼接而成的一個以都號分割的字符串。

 var colors = ["red", "blue", "green"];    //creates an array with three strings
 console.log(colors.toString());    //控制台輸出red,blue,green
 alert(colors.valueOf());     //red,blue,green
 alert(colors);               //red,blue,green由於alert()要接收字符串參數,所以它會在後台調用toString()方法,跟直接調用toString方法相同的結果
 onsole.log(colors);   //控制台輸出["red", "blue", "green"]

談一談toLocaleString()的不同之處,上面的例子console.log(colors.toLocaleString())輸出red,blue,green字符串,但它是為了取得每一項的值,調用的是每一項的toLocaleString()方法

        var person1 = {
            toLocaleString : function () {
                return "Nikolaos";
            },
            
            toString : function() {
                return "Nicholas";
            }
        };
        var person2 = {
            toLocaleString : function () {
                return "Grigorios";
            },    
            toString : function() {
                return "Greg";
            }
        };  
        var people = [person1, person2];
        alert(people);                      //Nicholas,Greg
        alert(people.toString());           //Nicholas,Greg
        alert(people.toLocaleString());     //Nikolaos,Grigorios
例子代碼折疊

  join()方法 ,把數組用特定的分隔符分割開輸出字符串;例如

 var colors = ["red","green","blue"];
 alert(color.join("||"));//輸出[red||green||blue];如果不傳入任何值,或者闖入undefined,則默認使用逗號分割;

(注意:如果數組中的某一項的值是null或者undefined),那麼該值在join(),toLocaleString(),toString()和valueOf()方法返回的結果中以空字符串表示。)

5.2.3 棧方法

  LIFO(後進先出)

  push():可以接收任意數量的參數,把它們逐個添加到數組末尾,並返回修改後數組的長度。pop():從數組末尾移除最後一項,減少數組的length值,然後返回移除的項。

         var colors = new Array();                      //create an array
         var count = colors.push("red", "green");       //push two items
         alert(count);  //2
         
         count = colors.push("black");                  //push another item on
         alert(count);  //3
         
         var item = colors.pop();                       //get the last item
         alert(item);   //"black"
         alert(colors.length);  //2

5.2.4 隊列方法

  FIFO(先進先出)

  shift():它能夠移除數組中的第一個項並返回該項,同時數組長度減1。unshift():它能在數組前端添加任意個項並返回新數組的長度。

5.2.5 重排序方法

  下面的兩函數返回值是經過排序後的數組。

  reverse():反轉數組項的順序。sort():默認按升序排列數組,會調用每個數組項的toString()轉型方法,然後比較得到的字符串,確定如何排序。但是有缺陷比如字符串"5"大於"15",實際數值不是這樣比。因此sort()方法可以接收一個比較函數作為參數。 

   比較函數接收兩個參數,arguments[0]>arguments[1]返回正數,相等返回0,arguments[0]<arguments[1]返回負數;如下代碼運用,如需降序更改返回值就行,或者再利用reverse()。

         function compare(value1, value2) {
             if (value1 < value2) {
                 return -1;
             } else if (value1 > value2) {
                 return 1;
             } else {
                 return 0;
             }
         }  
         var values = [0, 1, 5, 10, 15];
         values.sort(compare);
         alert(values);    //0,1,5,10,15 
13 //可以更簡單 function compare(value1,value2){ return value2-value1; }

(如需補充:使用什麼方式排序的,請添加至這裡:有冒泡排序...)

5.2.6 數組各種操作方法

  • concat()
         var colors = ["red", "green", "blue"];
         var colors2 = colors.concat("yellow", ["black", "brown"]);
         
         alert(colors);     //red,green,blue        
         alert(colors2);    //red,green,blue,yellow,black,brown 
  • slice()
        var colors = ["red", "green", "blue", "yellow", "purple"];
        var colors2 = colors.slice(1);
        var colors3 = colors.slice(1,4);
        
        alert(colors2);   //green,blue,yellow,purple
        alert(colors3);   //green,blue,yellow
//可以1個或兩個參數(起始{包含}和結束位置{不包含}),如果slice()方法的參數中有一個負數,則用數組長度加上該數來確定相應的位置。如果結束位置小於起始位置,則返回空數組;
  • splice()可以對數組元素進行刪除、插入、替換操作,該方法始終返回一個數組,包含從原始數組中刪除的項(如果沒有刪除任何項,則返回空數組。)而原數組也添加了一些項或刪除了一些。

  刪除:提供兩個參數,splice(要刪除的第一項的位置,要刪除的項數)。

  插入.替換:提供三個參數,splice(起始位置,要刪除的項數,要插入的項),如果要插入多個項可以再傳入任意多個項。splice(2,0,"red","green")。插入的項不必等於刪除的項。 

var colors = ["red","green","blue"];
var removed = colors.splice(0,1);
alert(colors);          //green,blue,原數組去掉了刪除的項
alert(removed);            //red

removed = colors.splice(1,0,"yellow","orange"); //從位置1開始插入兩項
alert(colors);     //green,yellow,orange,blue
alert(removed);  //返回的是一個空數組

removed = colors.splice(1,1,"red","pushs");
alert(colors);    //green,red,purple,orange,blue
alert(removed);   //yellow

 

5.2.7  位置方法

  ES5為數組實例添加了兩個方法 indexOf()、lastIndexOf()都接收兩個參數(要查找的項【可選】查找起始點),返回要查找項在數組中的位置。沒找到返回-1.(注意:在比較第一個參數與數組中的每一項時,會使用全等操作符===,同時支持這方法的浏覽器不包含ie8和以前的)。

 

5.2.8  迭代方法

  ES5為數組定義了5個迭代方法。每個方法都接收兩個參數:(要在每一項上運動的函數【可選】運行該函數的作用域對象--->影響this的值),傳入這些方法中的函數會接收三個參數(數組項的值該項在數組中的位置數組對象本身),根據方法的不同,這個函數的返回值也不盡相同;()

  • every():對數組中的每一項運行給定的函數,如果該函數對每一項都返回true,則返回true。
  • filter():對數組中的每一項運行給定的函數,返回該函數會返回true的項組成的數組。
  • foreEach :對數組中的每一項運行給定的函數。這個方法沒有返回值。
  • map():對數組中的每一項運行給定的函數,返回每次函數調用的結果組成的數組。
  • some():對數組中的每一項運行給定的函數,如果該函數對只要某一項返回true,就返回true.

  以上方法都不會修改數組中的包含的值。問題是它們主要用來干嘛!比如every()和some()可以用於查詢數組中的項是否滿足某個條件。every()每一項滿足,some()某一項滿足即可;

        var numbers = [1,2,3,4,5,4,3,2,1];
        var everyResult = numbers.every(function(item, index, array){
            return (item > 2);
        });
        alert(everyResult);       //false
        var someResult = numbers.some(function(item, index, array){
            return (item > 2);
        });
        alert(someResult);       //true
every 和 some示例代碼

  下面是filter()示例代碼

        var numbers = [1,2,3,4,5,4,3,2,1];
        var filterResult = numbers.filter(function(item, index, array){
            return (item > 2);
        });
        alert(filterResult);   //[3,4,5,4,3]
filter示例代碼

  下面是map()示例代碼:也返回一個數組,這個數組的每一項都是在原始數組中的對應項上運行傳入函數的結果。

        var numbers = [1,2,3,4,5,4,3,2,1];
        var mapResult = numbers.map(function(item, index, array){
            return item * 2;
        });
        alert(mapResult);   //[2,4,6,8,10,8,6,4,2]
map()示例代碼

(注意:支持這些迭代方法的浏覽器有IE9+、ie8版本和之前的不支持)

 5.2.9 歸並方法

  ES5還新增了連個歸並數組的方法:reduce()和reduceRight()。這兩個方法都會迭代數組的所有項,然後構建一個最終返回值。遍歷方向不同。接收兩個參數(一個在每一項上調用的函數,【可選】作為歸並基礎的初值),這個傳入的函數接收4個參數:(前一個值,當前值,項的索引,數組對象)。這個函數返回的任何值都會作為第一個參數自動傳給下一項。第一次迭代發生在數組的第二項上,因此第一個參數是數組的第一項,第二個參數就是數組的第二項。

        var values = [1,2,3,4,5];
        var sum = values.reduce(function(prev, cur, index, array){
            return prev + cur;
        });
        alert(sum); //15
//第一次執行回調函數,prev是1,cur是2,。第二次prev是3(1+2的結果),cur
是3(數組的第三項)

/*---------------------*/
    
         var values = [1,2,3,4,5];
        var sum = values.reduceRight(function(prev, cur, index, array){
            return prev + cur;
        });
        alert(sum); //15

//第一次執行回調函數,prev是5,cur是4,。第二次prev是9(5+4的結果),cur
是3(數組的倒第三項)

 
示例代碼

(注意:支持這些歸並方法的浏覽器有IE9+、ie8版本和之前的不支持)

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved