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;