從頭開始學JavaScript (十二)——Array類型

一、數組的創建

注：ECMAscript數組的每一項都可以保存任何類型的數據

1.1Array構造函數

var colors = new Array();      

如果預先知道數組要保存的項目數量，也可以給構造函數傳遞該數量：

var colors = new Array(20);  

也可以向構造函數傳遞數組中應該包含的項：

var colors = new Array("red", "blue", "green");  

給構造函數傳遞一個值也可以創建數組：

如果傳遞的數值，則創建包含該數值個項的數組，

如果傳遞的是其他值，則創建包含這個值的只有一項的數組：

var colors = new Array(3);      
var names = new Array("Greg"); 

1.2字面量表示法

數組字面量由一對包含數組項的方括號表示，多個數組項之間以逗號隔開：

var colors = ["red", "blue", "green"]; //創建一個包含3個字符串的數組
var names = [];//創建一個空數組
var values = [1,2,]; //不要這樣，會創建一個2或3項的數組
var options = [,,,,,];//會創建一個5或6項的數組

二、數組的訪問

2.1訪問方法

在讀取和設置數組的值時，要用方括號並提供相應值的基於0的數字索引：

  var colors = ["red", "blue", "green"];    //定義一個字符串數組
        alert(colors[0]); //顯示第一項
        colors[2]="black";//修改第一項
        colors[3]="brown";//新增第一項

2.2length屬性

數組的項數保存在length屬性中，這個屬性始終返回0或者更大的值。

var colors = ["red", "blue", "green"];  
        var name=[];
        alert(colors.length);//3
        alert(name.length);//0

數組length屬性不是只讀的，通過設置這個屬性，可以從數組的末尾移除項或者向數組中添加新項。看下面的例子：

var colors = ["red", "blue", "green"]; 
        colors.length = 2;
        alert(colors[2]);//undefined

上述例子中末尾的一項被移除了。

 var colors = ["red", "blue", "green"]; 
  colors.length = 4;
   alert(colors[3]);//undefined

新增的一項獲得undefined值。

 var colors = ["red", "blue", "green"];    
        colors[colors.length] = "black";          //在位置3添加一種顏色
        colors[colors.length] = "brown";          //在位置4添加另一種顏色

        alert(colors.length);    //5
        alert(colors[3]);        //black
        alert(colors[4]);        //brown

三、轉換方法

valueOf()：返回數組

toString()：返回由數組每個值的字符串形式拼接而成的一個以逗號分隔的字符串。為了創建這個字符串會調用數組每一項的toString()方法

toLocaleString()：返回由數組每個值的字符串形式拼接而成的一個以逗號分隔的字符串。為了創建這個字符串會調用數組每一項的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];
        console.log(person1);
        console.log(people);
        alert(people);                      //Nicholas,Greg
        alert(people.toString());           //Nicholas,Greg
        alert(people.toLocaleString());     //Nikolaos,Grigorios

以上3種方法在默認情況下都會以逗號分隔的字符串形式返回數組項。join()方法，可以使用不同的分隔符來構建這個字符串。join()方法只接受一個參數，用作分隔符的字符串，然后返回包含所有數組項的字符串：

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

如果不給join方法傳入任何值，或者傳入undefined，則用逗號作為分隔符。

四、棧方法

棧：一種LIFO（Last-In—First-Out）后進先出的數據結構，新添加的項會被最早移除。而棧中項的推入（插入）和彈出（移除），只發生在棧的頂部。

利用push（）+pop()方法可以實現類似棧的行為。

push（）：接受任意數量的參數，把他們逐個添加到數組末尾，並返回修改后數組的長度。

pop():從數組末尾移除最后一項，減少數組的length值，然后返回移除的項。

棧案例：

       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

五、隊列方法

隊列：一種FIFO（First-In—First-Out）先進先出的數據結構。

shift（）：能夠移除數組中的第一個項並返回該項，同時將數組長度-1.

使用shift（）+push（）方法，可以像使用隊列一樣使用數組。

隊列案例：

        var colors = new Array();
        var count = colors.push("red", "green");       //推入兩個項
        alert(count);  //2
        
        count = colors.push("black");                  //再推入一個項
        alert(count);  //3
        
        var item = colors.shift();                     //獲取第一項
        alert(item);   //"red"
        alert(colors.length);  //2

unShift（）：能夠在數組前端添加任意個項並返回新數組的長度.

使用unShift（）和pop()方法能從反方向模擬隊列

案例：

var colors = new Array();                    
        var count = colors.unshift("red", "green");     //推入兩項
        alert(count);  //2
        
        count = colors.unshift("black");                   //再推入一項
        alert(count);  //3
        
        var item = colors.pop();                       //取得最后一項
        alert(item);   //"green"
        alert(colors.length);  //2

六、重排序方法

6.1reverse（）

反轉數組項的順序

  var values = [1, 2, 3, 4, 5];
        values.reverse();
        alert(values);       //5,4,3,2,1

6.2sort()

 sort() 方法用於對數組的元素進行排序。

語法：數組名稱.sort(參數)

參數：可選的，規定數組的排序方式。要么沒有參數，要么只能是函數作為參數

返回值：對數組的引用，數組在原數組上進行排序，不生成副本。

如果調用該方法時沒有使用參數，將按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（如有必要），以便進行比較。

例如：

var fruit = ['apples', 'bananas', 'Cherries'];
fruit.sort(); // ['Cherries', 'apples', 'bananas'];

大寫字母的編碼比小寫字母靠前。

如果想按照其他標准進行排序，就需要提供比較函數，該函數要比較兩個值，然后返回一個用於說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下：

• 若 a 小於 b，則返回一個小於 0 的值。
• 若 a 等於 b，則返回 0。
• 若 a 大於 b，則返回一個大於 0 的值。

對於sort來說:

• 返回值<0,a在b之前。
• 返回值>0,a在b之后。

舉一個很直觀的例子返回值大於0：

function sortNumber(a, b)
        {
            return 100;//返回值永遠大於0，a在b之后，所以，數組會逆序排列
        }

        var arr = new Array(6)
        arr[0] = "10"
        arr[1] = "5"
        arr[2] = "40"
        arr[3] = "150"
        arr[4] = "1000"
        arr[5] = "1"
        document.write(arr.sort(sortNumber))

上述例子輸出：1,1000,150,40,5,10

再看返回值小於0的例子：

 function sortNumber(a, b)
        {
            return -100;//返回值永遠小於0，a在b之前，所以數組排列順序不變
        }

        var arr = new Array(6)
        arr[0] = "10"
        arr[1] = "5"
        arr[2] = "40"
        arr[3] = "150"
        arr[4] = "1000"
        arr[5] = "1"

        document.write(arr.sort(sortNumber))

上述例子輸出：10,5,40,150,1000,1

再看一個小到大排列的例子：

   function sortNumber(a, b)
        {
            return a -b//如果返回值大於0，b在a前，如果返回值小於0，那么a在b前，也就是小的數在前，大的數在后。
        }

        var arr = new Array(6)
        arr[0] = "10"
        arr[1] = "5"
        arr[2] = "40"
        arr[3] = "150"
        arr[4] = "1000"
        arr[5] = "1"

        document.write(arr.sort(sortNumber))

上述代碼輸出：1,5,10,40,150,1000

同樣，一個從大到小的例子：

function sortNumber(a, b)
        {
            return b-a;//返回值大於0，b在前，返回值小於0，a在前，也就是大的數總是在小的數前面。
        }

        var arr = new Array(6)
        arr[0] = "10"
        arr[1] = "5"
        arr[2] = "40"
        arr[3] = "150"
        arr[4] = "1000"
        arr[5] = "1"

        document.write(arr.sort(sortNumber))

上述代碼輸出：1000,150,40,10,5,1

此外，還可以用sort()給對象按照某一個屬性的屬性值排序：

 var items = [
            { name: 'Edward', value: 21 },
            { name: 'Sharpe', value: 37 },
            { name: 'And', value: 45 },
            { name: 'The', value: -12 },
            { name: 'Magnetic',value: 12  },
            { name: 'Zeros', value: 38 }
        ];
        function compare (a, b) {
            if (a.value > b.value) {
                return 1;
            }
            if (a.value < b.value) {
                return -1;
            }
            return 0;
        }
        console.log(items.sort(compare));

七、操作方法

ECMAScript為操作已經包含在數組中的項提供了很多方法，下面介紹三種

7.1concat()方法

該方法會先創建當前數組的一個副本，然后將接收到的參數添加到副本的末尾，並返回新構建的數組

傳遞給concat方法的參數有3種情況：

1、沒有參數

如果沒有給concat方法傳遞參數，那么它只復制當前數組並返回副本

舉個栗子：

  var a = [1,2,3];
        document.write(a.concat());

上述代碼輸出：1,2,3

2、如果傳遞給concat()方法的是一個或多個數組，則該方法將這個數組中的每一項都添加到副本數組中

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"

document.write(arr.concat(arr2,arr3))

上述代碼輸出：George,John,Thomas,James,Adrew,Martin,William,Franklin

3、如果傳遞的參數不是數組，那這些參數就會被簡單的添加到副本數組中去

var a = [1,2,3];
document.write(a.concat(4,5));

上述代碼輸出：1,2,3,4,5

7.2slice()方法

基於當前數組創建選定元素的新數組。

語法：arrayObject.slice(start,end)

start：規定從哪個數組下標處開始選取

end：規定從哪個數組下標處結束選取，可選參數

如果只有一個參數：返回從該參數指定位置開始到當前數組末尾的所有項

如果有兩個參數：返回起始和結束位置之間的項，但不包括結束位置項。

  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

如果參數中有負值:用數組長度加上參數來確定相應位置

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

注：slice方法不會影響原來的數組

7.3splice()方法

該方法主要有如下3種用法：

1、刪除：刪除任意數量的項，並返回這些項。語法arrayObject.splice(index,howmany).index：要刪除的第一項的位置，howmany：要刪除的項數

var colors = ["red", "green", "blue"];
        var removed = colors.splice(0,1);              //刪除第一項
        alert(colors);     //green,blue
        alert(removed);    //red 被刪除的項

2、插入：向指定位置插入任意數量的項，返回空數組。語法arrayObject.splice(index,0，item1，item2...itemN),index:起始位置、0：要刪除的項數（純插入不刪除任何項），item：要插入的項

 removed = colors.splice(1, 0, "yellow", "orange");  //在位置1插入兩項
        alert(colors);     //red，green,yellow,orange,blue
        alert(removed);    //空數組

3、添加：向指定位置插入任意數量的項，刪除任意數量的項，語法arrayObject.splice(index,howmany，item1，item2...itemN),index:起始位置、howmany：要刪除的項數，item：要插入的項

 var colors = ["red", "green", "blue"];      
        removed = colors.splice(1, 1, "red", "purple");    //插入兩項，刪除一項
        alert(colors);     //red,red,purple,blue
        alert(removed);    //green 刪除的項

八、位置方法

indexOf(要查找的項，起點位置)：從數組的開頭開始向后查找

lastIndexOf(要查找的項，起點位置)：從數組的末尾開始向前查找

這兩個方法都返回要查找的項在數組中第一次出現的位置，沒找到的情況下返回-1.如果 起點位置為負，則搜索從數組長度加上起點位置處開始。在比較要查找的項與數組中的每一項時，會要求兩項必須嚴格相等（===）。

舉個栗子：

indexOf：

  var ar = ["ab", "cd", "ef", "ab", "cd"];
        document.write(ar.indexOf("cd") + "<br/>");//1
        document.write(ar.indexOf("cd", 2) + "<br/>");//從2號位置的ef向后查找，第一次出現的位置在4號位置，所以返回4
        document.write (ar.indexOf("gh")+ "<br/>");//-1
        document.write (ar.indexOf("ab", -2) + "<br/>");//從3號位置ab向后查找，第一次出現的位置為3號位置，所以返回3

lastIndexOf:

 var ar = ["ab", "cd", "ef", "ab", "cd"];
        document.write(ar.lastIndexOf("cd") + "<br/>");//從4號位置向前查找，第一次出現的位置為4號位置，返回4
        document.write(ar.lastIndexOf("cd", 2) + "<br/>");//從2號位置ef向前查找，第一次出現的位置為1號位置，返回1
        document.write(ar.lastIndexOf("gh")+ "<br/>");//-1
        document.write(ar.lastIndexOf("ab", -3) + "<br/>");//從2號位置向前查找，第一次出現的位置為0號位置，返回0

九、迭代方法

以下5個迭代方法。每個方法都接受兩個參數：要在每一項上運行的函數、運行該函數的作用域。傳入這些方法中的函數會接受三個參數：數組項的值、該項在數組中的位置、數組對象本身。

這些方法都不會修改數組本身包含的值。

1、every()

對數組中的每一項運行給定函數，如果該函數對每一項都返回true，則返回true.否則返回false,如果數組沒有元素，則返回true。

every 方法會按升序順序對每個數組元素調用一次 callbackfn 函數，直到 callbackfn 函數返回 false。 如果找到導致 callbackfn 返回 false 的元素，則 every 方法會立即返回 false。 否則，every 方法返回 true。

舉個栗子：

function CheckIfEven(value, index, ar) {
            document.write(value + " "+"<br/>");

            if (value % 2 == 0)
                return true;
            else
                return false;
        }
        var numbers = [2, 4, 5, 6, 8];
        if (numbers.every(CheckIfEven)){
            document.write("Yes."+"<br/>");
        }
        else{
            document.write("No."+"<br/>");
        }

 

2、filter()

對數組中的每一項運行給定函數，返回該函數會返回true的項組成的數組。

舉個栗子：

function CheckIfPrime(value, index, ar) {
    high = Math.floor(Math.sqrt(value)) + 1;
    
    for (var div = 2; div <= high; div++) {
        if (value % div == 0) {
            return false;
        }
    } 
    return true;
}
var numbers = [31, 33, 35, 37, 39, 41, 43, 45, 47, 49, 51, 53];
var primes = numbers.filter(CheckIfPrime);

document.write(primes);//31,37,41,43,47,53

3、forEach()

對數組的每一項運行給定函數，這個方法沒有返回值,但是回調函數可能會有返回值。這個方法本質上與使用for循環迭代數組一樣。

function ShowResults(value, index, ar) {
    document.write("value: " + value);
    document.write(" index: " + index);
    document.write("<br />");
}
var letters = ['ab', 'cd', 'ef'];
letters.forEach(ShowResults);
//  value: ab index: 0 
//  value: cd index: 1 
//  value: ef index: 2 

4、map()

對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組

function AreaOfCircle(radius) {
    var area = Math.PI * (radius * radius);
    return area.toFixed(0);
}
var radii = [10, 20, 30];
var areas = radii.map(AreaOfCircle);

document.write(areas);
// 314,1257,2827

5、some()

對數組中的每一項運行給定函數，如果該函數對任一項返回true，則返回true。

unction CheckIfEven(value, index, ar) {
    if (value % 2 == 0)
        return true;
}

var numbers = [1, 15, 4, 10, 11, 22];

var evens = numbers.some(CheckIfEven);
document.write(evens);// true

十、歸並方法

reduce()和reduceright()

迭代數組所有的項，並構建一個最終返回的值。

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

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

這兩個方法的主要區別在於從哪頭開始遍歷數組，除此之外完全相同

隨堂小測試：

測試一、

var stringArray = ['Blue', 'Humpback', 'Beluga'];
        var numericStringArray = ['80', '9', '700'];
        var numberArray = [40, 1, 5, 200];
        var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];

        function compareNumbers(a, b) {
            return a - b;
        }
        console.log('stringArray:', stringArray.join());
        console.log('Sorted:', stringArray.sort());

        console.log('numberArray:', numberArray.join("|"));
        console.log('Sorted without a compare function:', numberArray.sort());
        console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers));

        console.log('numericStringArray:', numericStringArray.join(";"));
        console.log('Sorted without a compare function:', numericStringArray.sort());
        console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers));

        console.log('mixedNumericArray:', mixedNumericArray.join("-"));
        console.log('Sorted without a compare function:', mixedNumericArray.sort());
        console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers));

測試二、

 var numbers = [1,2,3,4,5,4,3,2,1];
        
        alert(numbers.indexOf(4));        
        alert(numbers.lastIndexOf(4));    
        
        alert(numbers.indexOf(4, 4));     
        alert(numbers.lastIndexOf(4, 4));      

        var person = { name: "Nicholas" };
        var people = [{ name: "Nicholas" }];
        var morePeople = [person];
        
        alert(people.indexOf(person));     
        alert(morePeople.indexOf(person));