Max—— 前端攻城狮 's Blog

A Simple pure blog generated by jekyll

Javascript数组和一些常用的数组方法

<< Back

一般数组的定义、创建和特性

什么是数组?

数组对象用来在单独的变量名中存储一系列的(多个)值。

数组怎么创建?

我们使用关键词 new 来创建数组对象。下面的代码定义了三个数组对象:

var myArray1 = new Array();                       //该数组的length为0(即该数组有0个元素)
var myArray2 = new Array(9);                      //该数组的length为9(即该数组有9个元素)
var myArray3 = new Array(el1,el2,el3,...,eln);    //该数组的length为n(即该数组有n个元素)
	

或者也可以使用字面量的方式创建数组;

var myArray = [ ];
	

注:

var array = new Array(5);           //指创建长度为5的数组
var array = new Array([5]);         //指创建一个数组,长度为1,并且第一位是5
    

数组的元素怎么访问?

通过[index]索引下标进行访问。

var myArray = ["jack", "peter" ,"pony"];
alert(myArray[1])       //  peter
    

注:数组的索引index从0开始。

数组的属性

Array 对象具有如下三个属性:

属性 描述
constructor 返回对创建此对象的数组函数的引用。
length 设置或返回数组中元素的数目。
prototype 使您有能力向对象添加属性和方法。

constructor属性:

表示创建对象的函数。

object.constructor        //object是对象或函数的名称。
    

constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JS 固有对象。constructor 属性保存了对构造特定对象实例的函数的引用。

length属性:

length属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。和其他大多数语言不同的是。JavaScript数组的length属性是可变的,这一点需要特别注意。当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。

prototype属性:

返回对象类型原型的引用,prototype 属性是 object 共有的。

objectName.prototype       //objectName 参数是object对象的名称。
    

用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

数组的方法

如果想对数组进行添加、删除、截取、合并、拷贝、排序、转化字符串等操作,需要用到数组的一些操作函数(方法)。

Array 对象具有如下方法:

方法 描述
concat() 连接两个或更多的数组,并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素,并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串,并返回结果。
toLocaleString() 把数组转换为本地数组,并返回结果。
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
valueOf() 返回数组对象的原始值

Javascript中的数组的特性

如果正常来使用,JS里的数组与C、Java里的数组是相似的,都是由中括号包裹起来的一组元素。

但是:

与这些语言不同的是,JS里数组元素不一定要求是相同的数据类型。(换句话说,可以是不同的数据类型。)

var arr = [1,3.1415,true,"hello",{}];
    

这样的数组在JS里是合法的。

而且在JS里面,所有不是number,string,boolean,null,undefined这五种类型的数据都是object。即数组(array)也是一种对象。

这样的话:

var array1 = [];
array1["first"] = "hello,";
array1["second"] = "world";
array1.three = "!"
console.log(array1.length);       // 长度是0;
console.log(array1.first);        // 值是hello,
console.log(array1["three"]);     // 值是!
    

因为数组本质上是对象,所以JS对象的某些特性也可以用于数组上,如可以用delete方法来删除数组元素:

var a = [1,2,3,4,5];  
delete a[1];  
console.log(a.length);     // 5
console.log(a);            // [1, ,3,4,5]
    

delete语句会删掉元素,但不会删掉位置。

var a = [0,1,2,3];  
a[6] = 6;  
console.log(a);           // [0,1,2,3,,,6] 
    

中间有两个位置是没有值的,但这样做是完全合法的。数组的长度会自动的从4增长到7。

一些常用到的数组处理方法(函数)

数组去重(经典)

目的:去掉数组中的重复项。

方法一:

Array.prototype.removeRepeat = function () {
    var n = []; //一个新的临时数组
    for (var i = 0; i < this.length; i++){    //遍历当前数组
        //如果当前数组的第i已经保存进了临时数组,那么跳过,
        //否则把当前项push到临时数组里面
        if (n.indexOf(this[i]) == -1) n.push(this[i]);
    }
    return n;
}
    

方法二:

Array.prototype.removeRepeat2 = function(){
    var n = {},r=[]; //n为hash表,r为临时数组
    for(var i = 0; i < this.length; i++) {    //遍历当前数组
        if (!n[this[i]]) {     //如果hash表中没有当前项
            n[this[i]] = true;    //存入hash表
            r.push(this[i]);     //把当前数组的当前项push到临时数组里面
        }
    }
    return r;
}
    

方法三:

Array.prototype.removeRepeat3 = function(){
    var n = [this[0]]; //结果数组
    for(var i = 1; i < this.length; i++) {    //从第二项开始遍历
        //如果当前数组的第i项在当前数组中第一次出现的位置不是i,
        //那么表示第i项是重复的,忽略掉。否则存入结果数组
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
}
    

其中第1种和第3种方法都用到了数组的indexOf方法。此方法的目的是寻找存入参数在数组中第一次出现的位置。很显然,js引擎在实现这个方法的时候会遍历数组直到找到目标为止。所以此函数会浪费掉很多时间。而第2中方法用的是hash表。把已经出现过的通过下标的形式存入一个object内。下标的引用要比用indexOf搜索数组快的多。

为了判断这三种方法的效率如何,我做了一个测试程序,生成一个10000长度的随机数组成的数组,然后分别用几个方法来测试执行时间。 结果表明第二种方法远远快于其他两种方法。 但是内存占用方面应该第二种方法比较多,因为多了一个hash表。这就是所谓的空间换时间。

方法四:

Array.prototype.removeRepeat4 = function(){
    this.sort();
    var re = [this[0]];
    for(var i = 1; i < this.length; i++) {
        if( this[i] !== re[re.length-1]) {
            re.push(this[i]);
        }
    }
    return re;
}
    

这个方法的思路是先把数组排序,然后比较相邻的两个值。 排序的时候用的JS原生的sort方法,JS引擎内部应该是用的快速排序吧。 最终测试的结果是此方法运行时间平均是第二种方法的三倍左右,不过比第一种和第三种方法快了不少。

多数组排序

目的:写一个函数,处理两个数组,并且按照从小到大排列。

	var a1 = [1,2,3,4,5],
    a2 = [-6,-4,0,1,3,5,7,8,10,12],
    a3 = [],
    l1 = a1.length,
    l2 = a2.length,
    l3 = l1 + l2,
    i1,i2,i3;

for(i1=i2=i3=0; i3 < l3; i3++){        
    if(i2 == l2 || a1[i1] < a2[i2]) {
            a3[i3] = a1[i1];
            i1 ++;
    } else {
            a3[i3] = a2[i2];
            i2 ++;
    }
}

alert(a3);  //-6,-4,0,1,1,2,3,3,4,5,5,7,8,10,12
	

参考w3school——JavaScript Array 对象

参考JS Array

发表于: 12 Aug 2014