《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