Js數組Array的特點以及操作方法

js的數組的每個位置可以保存任意類型的數據。

1. Array創建的方式

創建數組的方式如下：

1. new Array()
2. new Array(長度)
3. new Array(元素，元素，……)
4. 字面量[元素，元素，……]

    //創建一個長度爲3，元素爲"one","two","three"的數組
    var arr = new Array();
    arr[0] = "one";
    arr[1] = "two";
    arr[2] = "three";

    var arr1 = new Array(3);//3會被自動賦值給Array的length屬性
    arr1[0] = "one";
    arr1[1] = "two";
    arr1[2] = "three";

    var arr2 = new Array("one","two","three");

    var arr3 = ["one","two","three"];//字面量創建數組的方式

2. Array賦值和改變長度

js中的數組在取值、賦值時沒有角標越界異常，可以任意擴容，如果元素沒有定義，獲取該元素的值就是undefined。

    var arr = ["one","two","three"];

    console.log(arr[3]);//undefined
    console.log(arr.length);//3

    arr[3] = "four";//即使添加第四個元素，也不會報錯，只不過此時arr的length值變爲4
    console.log(arr[34]);//undefined
    console.log(arr.length);//4

    arr[99] = "99";//添加第100個元素，中間沒有定義元素的位置，取到的值是undefined
    console.log(arr[50]);//undefined
    console.log(arr.length);//100

3. Array類型檢測

    var flag = Array.isArray(arr);//推薦使用這種
    var flag1 = arr instanceof Array;//多框架時可能會出問題

4. Array的打印輸出

4.1 toString()和valueOf()

Array是一種引用類型，也具備Object類型的一些基本方法：

• toString
• valueOf

    var arr = ["one","two","three"];

    console.log(arr.toString());//返回逗號隔開的元素
    console.log(arr.valueOf());//返回數組

下面是通過谷歌瀏覽器打印的結果：

4.3 join()

join方法可以修改toString()的輸出結果，可以將數組中的元素用指定的符號隔開並輸出。

    var arr = ["one","two","three"];
    console.log(arr.join("--"));//one--two--three

5. Array的容器方法

Array實例在使用時，可以被當做作容器，例如棧(先進後出)、隊列(先進先出)。

5.1 被當做棧時有進棧push()和pop()出棧兩個方法可供使用。舉例如下：

    var arr = new Array();

    arr.push("one");
    arr.push("two");
    arr.push("three");

    console.log(arr.pop());//three

5.2 被當做隊列時有push()和shift()兩個方法可供使用。舉例如下：

    var arr = new Array();

    arr.push("one");
    arr.push("two");
    arr.push("three");

    console.log(arr.shift());//one

6. Array的排序方法

6.1 sort()和reverse()

• sort()：對數組元素進行排序，sort默認的比較的是元素的toString()結果（即使每個元素都是數字，比較的也是數字的字符串形式），按照從小到大的順序輸出。sort()還可以接收一個比較器函數作爲參數來自定義比較規則。
• reverse()：將數組元素倒序（從右到左）輸出。

    var arr1 = [5,7,6,4,3,14];
    var arr2 = [5,7,6,4,3,14];

    console.log(arr1.reverse().toString());//14,3,4,6,7,5
    console.log(arr2.sort().toString());//14,3,4,5,6,7

	//自定義比較器的形式
    var arr = [5,7,6,4,3,14];

    function compare(val1,val2) {
        if(val1 < val2){
            return 1;
        }else if(val1 > val2){
            return -1;
        }else {
            return 0;
        }
    }

    console.log(arr.sort(compare).toString());//14,7,6,5,4,3

上面例子中的arr2.sort()結果將14排在了前面，因爲默認的sort方法比較的是字符串形式的"14"，而不是數字14。

7. Array的合併、拆分、修改

7.1 合併

用於合併數組的方法concat()，該方法在合併數組時的執行過程：先創建一個當前數組的副本，然後將接收到的參數添加這個副本的末尾，從而構建一個新數組。

    var arr1 = [1,2,3];
    var arr2 = [4,5,6];
    var arr3 = arr1.concat(arr2);//直接拼接數組
    var arr4 = arr1.concat(7,8,9);//也可以直接追加元素

    console.log(arr3.toString());//1,2,3,4,5,6
    console.log(arr4.toString());//1,2,3,7,8,9

7.2 拆分

拆分數組的方法是slice()，該方法的用法與java和js中字符串的substring()方法一樣，可以接收一個參數，也可以接收兩個參數，舉例如下：

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

    var arr2 = arr1.slice(1,4);
    var arr3 = arr1.slice(2);

    console.log(arr2.toString());//2,3,4
    console.log(arr3.toString());//3,4,5,6,7,8,9

7.3 修改

修改數組元素包括刪除指定位置元素、在指定位置添加元素、在指定位置替換元素。都是通過splice方法實現的，具體的功能通過參數的個數來實現。

• 刪除：需要指定2個參數分別是：要刪除第一項的位置、要刪除的元素個數。
• 添加：需要指定3個參數分別是：起始位置、要刪除的項數、要插入的元素。
• 替換（可以理解爲刪除和追加同時進行的一個方法）：參數可以任意，前兩個參數是：位置，刪除元素的個數，後面是要要想追加的元素，個數不確定。

    var arr1 = [1,2,3,4,5,6,7,8,9];
    var arr2 = [1,2,3,4,5,6,7,8,9];
    var arr3 = [1,2,3,4,5,6,7,8,9];

    arr1.splice(1,4).toString();//從位置1開始刪除後面4個元素
    arr2.splice(1,2,0).toString();//從位置1開始刪除後面2個元素，然後將0添加到數組中
    arr3.splice(2,1,0,0).toString();//從位置2開始，刪除一個元素，刪除後將後面的元素進行追加

    console.log(arr1.toString());//1,6,7,8,9
    console.log(arr2.toString());//1,0,4,5,6,7,8,9
    console.log(arr3.toString());//1,2,0,0,4,5,6,7,8,9

8. Array查找元素位置

js的Array查找元素與字符串中查找某個字符的方法是一樣的。

• indexOf()返回元素在數組中第一次出現的位置。
• lastIndexOf()返回元素在數組中最後一次出現的位置。

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

    console.log(arr.indexOf(3));//2
    console.log(arr.lastIndexOf(8));//7
    console.log(arr.indexOf(0));//-1
    console.log(arr.lastIndexOf(0));//-1

8. Array的迭代

Array的迭代有5個方法，每個方法都接收一個函數作爲參數，該函數可以設置3個參數，分別是value,index,array，即：當前元素、當前元素位置、當前數組。

• every()：每一項都返回true，結果返回true。
• filter()：只返回符合條件的元素。
• some()：有一項返回true，結果就返回true.
• map()：可以對每個元素進行相應的映射操作後再返回。
• forEach()：相當於for循環。

上面提到的方法對應的實例：

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

    //只有數組中的元素每個都大於0,結果纔會返回true.
    var result1 = arr.every(function (value,index,array) {
        return value > 2;
    });
    console.log(result1.toString());//false


    //返回大於數組中元素值大於2的元素組成的數組
    var result2 = arr.filter(function (value,index,array) {
        return value > 2;
    });
    console.log(result2.toString());//3,4,5,4,3


    //只要數組中有一項是大於2的就返回true
    var result3 = arr.some(function (value,index,array) {
        return (value > 2);
    });
    console.log(result3.toString());//true


    //將數組中的每一項元素進行相應的操作
    var result4 = arr.map(function (value,index,array) {
        return value * 2;
    });
    console.log(result4.toString());//2,4,6,8,10,8,6,4,2

    
    //類似與for循環，或者java中容器的迭代器
    arr.forEach(function (value,index,array) {
        console.log(value);//將元素逐個輸出
    });

8. Array的歸併

Array的歸並可以理解爲將數組中的元素進行相應的操作最終返回一個值，或者理解爲函數每個元素被迭代時遞歸調用的函數。

• reduce：從左到右
• reduceRight：從右到左

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

    //返回數組中元素全部相加的結果
    var result1 = arr.reduce(function (previousValue, currentValue, currentIndex, array) {
        return previousValue + currentValue;
    });
    console.log(result1.toString());//25


    //與reduce方法結果一致，只不過reduce是從前到後迭代，reduceRight是從後到前的迭代
    var result1 = arr.reduceRight(function (previousValue, currentValue, currentIndex, array) {
        return previousValue + currentValue;
    });
    console.log(result1.toString());//25