JavaScript的Array數組對象詳解

數組Array

什麼是數組？

數組是用來存儲一系列值，有序可重複。

如何創建數組？

1：通過字面量創建。

var arr = ["a", "b", "c"];

2：通過Array對象創建。

//簡潔方式：	    
var arr = new Array("a", "b", "c");
//常規方式：	    
var arr = new Array();
arr[0] = "a";
arr[1] = "b";
arr[2] = "c";

通過原型鏈prototype可以爲Array增加自定義方法。

Array.prototype.myFun = function(){
    console.log("自定義方法。");
};

數組方法有哪些？

常用方法：

1：concat()  用於合併兩個數組，返回值爲新的數組。

var a = [1, 2];
var b = [3, 4];
var c = a.concat(b);
//c輸出爲[1, 2, 3, 4]

2：push()  爲數組添加一個或多個元素，返回值爲新的數組長度。

var a = [1, 2];
var len = a.push(3, 4);
//a輸出爲[1, 2, 3, 4]，len輸出爲4

3：pop()  刪除數組的最後一個元素，返回值爲刪除元素值。

var a = [1, 2, 3, 4];
var b = a.pop();
//a輸出爲[1, 2, 3]，b輸出爲4

4：isArray() 判斷該對象是否爲數組類型。

var a = [1, 2];
var b = a.isArray(); //b=true;
var c = "hello";
var d = c.isArray(); //d=false;

5：indexOf()  搜索數組中的元素，返回值爲該元素所在的位置。

var a = [1, 2, 3, 2, 4];
var b = a.indexOf(3); //b = 2;
var c = a.indexOf(8); //c = -1;
//返回值大於-1代表元素存在改數組中，若等於-1則代表不存在。

6：lastIndexOf()  搜索數組中的元素，返回值爲該元素最後出現的位置。

var a = [1, 2, 3, 2, 4, 2];
var b = a.lastIndexOf(2); //b = 5;
//不存在返回值爲-1

7：join()  把數組所有元素放入一個字符串中，並以指定方式分隔，返回值爲生成字符串。 

var a = [1, 2, 3, 4];
var b = a.join(); //b = "1234";   該寫法與toString()結果一致，但是toString（）不支持傳參，不能指定字符串格式。
var c = a.join("-"); //c = "1-2-3-4";

8：sort()  對數組元素進行排序（升序）。

var m = ["d","a","e","c"];
m.sort(); //m = ["a", "c", "d", "e"];
var n = [7, 2, 6, 1];
n.sort(); //n = [1, 2, 6, 7];

sort方法可接受一個比較函數作爲參數。

function compare1(v1, v2) {
    if (v1 < v2) {
        return -1;
    } else if (v1 > v2) {
        return 1;
    } else {
        return 0;
    }
}//升序
function compare2(v1, v2) {
    if (v1 < v2) {
        return 1;
    } else if (v1 > v2) {
        return -1;
    } else {
        return 0;
    }
}//降序
var a = [1, 5, 2, 7];
a.sort(compare1); //a = [1, 2, 5, 7];
a.sort(compare2); //a = [7, 5, 2, 1];

9：reverse()  反轉數組元素的順序。並非倒序！！！

var a = [2, 4, 1, 8];
a.reverse(); //a = [8, 1, 4, 2];

10：shift()  刪除第一個元素，返回值爲該刪除元素。

var a = [1, 2, 3];
var b = a.shift();
//a = [2, 3]; b = 1;

11：includes()  判斷數組是否包含一個指定值，返回值爲true或false

var a = [1, 2, 3, NaN];
a.includes(1); //true;
a.includes(5); //false;
a.includes(NaN); //true;

12：find()、some()、filter()比較

var check = function(n) {
    return n > 10;
};
var a = [1, 2, 11, 33];
var b = a.find(check); //b = 11;  返回值爲第一個符合條件的元素，後面的不再做校驗。
var c = a.some(check); //c = true;  返回值爲是否有符合條件的元素，是一個Boolean值，爲true，後續元素不再做校驗。
var d = a.filter(check); //d = [11 ,33];  返回值爲符合條件的所有元素，是一個數組。

13：map()  通過制定函數處理數組的每個元素，返回值爲處理後的新數組。

var add = function(n){
    return n + 1;
};
var a = [1, 2, 3, 4];
var b = a.map(add);
//b = [2, 3, 4, 5];

14：slice()  選取數組的一部分，返回值爲新數組，值爲選取部分元素。

var a = [1, 2, 3, 4];
var b = a.slice(1, 3); //b = [2, 3];  注意是位置索引爲[1, 3)，即 index >=1 && index < 3;

15：splice()  用於插入、刪除、替換原始數組的元素。

第一個參數爲起始位置，第二個參數爲長度，後面是需要添加到數組的新元素。

包含刪除動作的均有返回值，返回值爲刪除元素組成的新數組；純添加元素操作返回值爲空數組。

var a = [1, 2, 3, 4];
var b = a.splice(1, 2, 6, 7, 8); 
//a = [1, 6, 7, 8, 4]; b = [2, 3];
a.splice(1, 0, 9, 9, 9); // a = [1, 9, 9, 9, 6, 7, 8, 4];
var c = a.splice(1, 3); 
//a = [1, 6, 7, 8, 4]; c = [9, 9, 9];

不常用方法：

copyWithin()、every()、fill()、keys()、forEach()等。

小小測試題，面試題中可能會存在哦。

Question： 以下代碼爲什麼count輸出是0呢？

Answer：因爲filter和map不會對空數組進行檢測。a = [1, 2, 3, empty*7]；

                    如果使用for循環，會發現count輸出爲7。

var count = 0;
var a = [1, 2, 3];
var fun = function(n) {
    if(n == undefined) {
        count ++;
    }
};
a.filter(fun);
console.log("count: " + count); //count: 0;
a.map(fun);
console.log("count: " + count); //count: 0;