DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 《JavaScript高級編程》學習筆記之object和array引用類型
《JavaScript高級編程》學習筆記之object和array引用類型
編輯:關於JavaScript     

本文給大家分享我的javascript高級編程學習筆記之object和array引用類型,涉及到javascript引用類型相關知識,大家一起看看把。

1. Object類型

     大多數引用類型值都是Object類型的實例;而且Object也是ECMAScript中使用最多的一個類型。

     創建Object實例有如下兩種方式:

new操作符後跟Object構造函數:

   var person=new Object( );
   person.name="webb";
   person.age=25;

對象字面量表示法:

  var person={
     name:"webb",
     age:25
   };

2. Array類型

     除了Object之外,Array類型恐怕是ECMAScript中最常用的類型了。
     ECMAScript數組的每一項可以保存任何類型的數據(例如,第一個位置可存放字符串,第二個位置保存數值,第三個位置保存對象,以此類推)。而且ECMAScript數組的大小是可以動態調整的,即可以隨著數據的添加自動增長以容納新增數據。

     創建數組的基本方式有兩種,

使用Array構造函數:

var colors=new Array( );
     var colors=new Array(20);   //也可設置length屬性
     var colors=new Array("red","blue","green");   //包含3個字符串的數組
     var colors=Array(3);   //可省略new操作符

數組字面量表示法

 var colors=["red","blue","green"];
     alert(colors[0]);   //顯示第一項
     colors[2]="black";   //修改第三項
     colors[3]="brown";   //新增第四項

     注:數組的length屬性很有特點——它不是只讀的。因此通過設置這個屬性,可以從數組的末尾移除或添加項。例如,

     var colors=["red","blue","green"];
     colors.length=2;
     alert(colors[2]);   //undefined
     colors[colors.length]="black";   //在末尾添加項

     2.1 檢測數組

          對於一個網頁,或者一個全局作用域而言,使用instanceof操作符就能判斷某個對象是不是數組:

   if(value instanceof Array){
        //對數組執行某些操作
     }

          instanceof操作符的問題在於,它假定只有一個全局執行環境。如果網頁中包含多個框架,那實際上就存在兩個以上不同的全局執行環境,從而存在兩個以上不同版本的Array構造函數。如果你從一個框架向另一個框架傳入一個數組,那麼傳入的數組與在第二個框架中原生創建的數組分別具有各自不同的構造函數。

          為了解決這個問題,ECMAScript5新增了Array.isArray( )方法。這個方法的目的是最終確定某個值到底是不是數組,而不管它是在哪個全局執行環境中創建的,

if(Array.isArray(value)){
        //對數組執行某些操作
     }

支持該方法的浏覽器有IE9+、Firefox 4+、Safari 5+、Opera 10.5+和Chrome。

     2.2 轉換方法

          調用數組的toString( )方法會返回由數組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串。而調用valueOf( )返回的還是數組。實際上,為了創建這個字符串會調用數組每一項的toString( )方法。例如,

var colors=["red","blue","green"];
     alert(colors.toString());   //red,blue,green
     alert(colors.valueOf());   //red,blue,green
     alert(colors);   //red,blue,green

          另外,toLocaleString( )方法經常也會返回與toString( )和valueOf( )方法相同的值,但也不總是如此。當調用數組的toLocaleString( )方法時,它也會創建一個數組值的以逗號分隔的字符串。而與前兩個方法唯一的不同之處在於,這一次為了取得每一項的值,調用的是每一項的toLocaleString( )方法,而不是toString( )方法。

  var person1={
        toLocaleString:function(){
          return "webbxx";
        },
        toString:function(){
          return "webb";
        }
     };
     var person2={
        toLocaleString:function(){
          return "susanxx";
        },
        toString:function(){
          return "susan";
        }
     };
     var people=[person1,person2];
     alert(people);   //webb,susan
     alert(people.toString());   //webb,susan
     alert(people.toLocaleString());   //webbxx,susanxx
     使用join( )方法也可輸出數組,並可指定分隔符,默認為逗號:
          var colors=["red","blue","green"];
          alert(colors.join(","));   //red,blue,green
          alert(colors.join("||"));   //red||blue||green

     2.3 棧方法(LIFO)

          push( ):接受任意數量的參數,把它們逐個添加到數組末尾,並返回修改後數組的長度;
          pop( ):從數組末尾移除最後一項

  var colors=new Array();
        var count=colors.push("red","green");
        alert(count);   //2
        count=colors.push("black");
        alert(count);   //3
        var item=colors.pop();
        alert(item);   //"black"
        alert(colors.length);   //2

     2.4 隊列方法(FIFO)

          shift( ):移除數組的第一項並返回該項,同時數組長度減1;
          unshift( ):顧名思義,與shift( )用途相反,能在數組前端添加任意個項並返回數組的長度。

     2.5 重排序方法

          reverse( ):反轉數組項的順序;

          sort( ):默認按升序排列;為了實現排序,sort( )方法會調用每項的toString( )方法,然後比較得到的字符串,以確定如何排序。即使每一項都是數值,比較的也是字符串,如下所示。

   var values=[0,1,5,10,15];
        values.sort();
        alert(values);   //0,1,10,15,5

          這種排序方式在很多情況下都不是最佳方案。因此sort( )方法可以接受一個比較函數作為參數,以便指定哪個值位於哪個值的前面。

 function compare(value1,value2){
        if(value1<value2){
          return -1;   //value1在value2之前
        }else if(value1>value2){
          return 1;
        }else{
          return 0; 
        }
     }

          這個比較函數可以適用大多數據類型,只要將其作為參數傳遞給sort( )方法即可,如下,

             

 var values=[0,1,5,10,15];
        values.sort(compare);
        alert(values);   //0,1,5,10,15

     2.6 操作方法

          concat( ):基於當前數組中的所有項創建一個新數組。例如,

 var colors=["red","blue","green"];
        var colors2=colors.concat("yellow",["black","brown"]);
        alert(colors);   //red,blue,green
        alert(colors2);   //red,blue,green,yellow,black,brown

          slice( ):基於當前數組中的一個或多個項創建一個新數組。例如,

       var colors=["red","green","blue","yellow","purple"];
        var colors2=colors.slice(1);   //green,blue,yellow,purple
        var colors3=colors.slice(1,3);   //green,blue,yellow

          splice( ):這個方法恐怕是最強大的數組方法了,主要用途是向數組的中部插入項,但使用這種方法的方式則有如下2種。

刪除:可以刪除任意數量的項,只需指定2個參數:要刪除的第一項的位置和要刪除的項數。

插入:可以向指定位置插入任意數量的項,只需提供3個參數:起始位置、0(要刪除的項數)和要插入的項。如果要插入多個項,可以再傳第四、第五以至任意多個項;例如,splice(2,0,"red","green")會從當前數組的位置2開始插入字符串"red"和"green"。

               splice( )方法始終都會返回一個數組,包含從原始數組中刪除的項(如果沒有刪除任何項,則返回空數組)。

     2.7 位置方法

          indexOf( )和lastIndexOf( ):這兩個方法都接受兩個參數:要查找的項和(可選的)表示查找起點位置的索引。前者從開頭開始向後查找,後者從末尾向前查找

   2.8 迭代方法

          ECMAScript5為數組定義了5個迭代方法,每個方法都接受兩個參數:要在每一項上運行的函數和(可選的)運行該函數的作用域對象——影響this的值。傳入這些方法中的函數會接收三個參數:數組項的值、該項在數組中的位置和數組對象本身。

every( ):對數組中的每一項運行給定函數,如果該函數對每一項都返回true,則返回true。
filter( ):對數組中的每一項運行給定函數,返回該函數會返回true的項組成的數組。
forEach( ):對數組中的每一項運行給定函數,這個方法無返回值。
map( ):對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組。
some( ):對數組中的每一項運行給定函數,如果該函數對任一項返回true,則返回true。

         以上方法都不會修改數組中包含的值。例如,

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.every(function(item,index,array){
          return item>2;
        });
        alert(someResult);   //true
        var filterResult=numbers.every(function(item,index,array){
          return item>2;
        });
        alert(filterResult);   //[3,4,5,4,3]
        var mapResult=numbers.every(function(item,index,array){
          return item*2;
        });
        alert(mapResult);   //[2,4,6,8,10,8,6,4,2]

     2.9 歸並方法

          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

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