Js数组的操作push,pop,shift,unshift等方法详细介绍

js中针对数组操作的方法还是比较多的，今天突然想到来总结一下，也算是温故而知新吧。不过不会针对每个方法进行讲解，我只是选择其中的一些来讲。

首 先来讲一下push和pop方法，这两个方法只会对数组从尾部进行压入或弹出，而且是在原数组进行操作，任何的改动都是会影响到操作的数组。 push(args)可以每次压入多个元素，并返回更新后的数组长度。pop()函数每次只会弹出最后一个结尾的元素，并返回弹出的元素，如果是对空组数 调用pop()则返回undefined。 如果参数是数组则是将整个数组当做一个元素压入到原来的数组当中。并不会产生类似concat合并数组时产生的“拆分现象”，下面看例子

例1:
var oldArr=[1,2,3];
alert(oldArr.push(4,[5,6]))–>5(这里只会将[5,6]当做一个元素来计算,返回更新后的数组长度5)
此时oldArr–>[1,2,3,4,[5,6]]
alert(oldArr.pop())–>[5,6](这里弹出最后一个元素[5,6],而不是6)
此时oldArr–>[1,2,3,4]
oldArr.pop()–>4
oldArr.pop()–>3
oldArr.pop()–>2
oldArr.pop()–>1
oldArr.pop()–>undefined(空数组弹出)
现在讲完push和pop再来看一下unshift和shift
这两个方法都是通过对数组的头部进行的操作，其他基本跟push和pop类似，但是在IE中unshift方法返回的是undefined

例2:
var oldArr2=[1,2];
oldArr2.unshift(3)–>undefined
此时oldArr2为–>[3,1,2]
oldArr2.shift()–>3
此时oldArr2为[1,2]
接下来看一下功能强大一点的splice,利用其可以进行数组随意位置的元素添加，删除 ，其操作也是在原有

数组上修改
splice(start,deleteCnt,args) 中的start表示开始操作下标，deleteCnt表示从开始下标开始（包括该元素)要删除的元素个数，删除操作返回删除的元素。args表示用来替换 删除掉的那些元素（可以有多个参数)，start和deleteCnt必须为数字，如果不是数字尝试转换，转换失败当做0来处理。splice必须至少有 一个start元素，否则不做任何操作。deleteCnt不存在表示删除start及后面的全部元素（IE下，取0不做删除)。start可以为负数， 表示从数组右边结尾处开始计算。deleteCnt如果为负数不做删除，因为不可能删除负个元素。
好了解释就到这边现在看一下例子，通过例子或许可以更好的理解

例3：
var oldArr3=[1,2];
oldArr3.splice()–>”"(返回空的字符串,不做任何操作,操作后oldArr3–>[1,2])
oldArr3.splice(“”)–>[1,2](“”尝试转换为数字失败返回0,所以删除1,2,操作后oldArr3–>[],但是IE下有点恶心，不做任何操作)
oldArr3.splice(“1a”)–>同上
odlArr3.splice(0,2)–>[1,2](“从下标0的元素开始，删除两个元素1,2因此删除后oldArr3–>[])
oldArr3.splice(0,-1)–>”"(从0下标开始删除-1个元素，故等于没做任何操作,操作后oldArr3–>[1,2])
oldArr3.splice(1,1)–>2(从下标1 开始删除1个元素，即删除2，所以删除后oldArr3–>[1])
oldArr3.splice(1,4)–>2(从下标1 开始删除4个元素，1开始只有1个元素，故删除2，所以删除后oldArr3–>[1]）
oldArr3.splice(-1,0,3)–>”"(从下标-1即2元素开始删除0个元素，然后添加元素3，所以操作后oldArr3–>[1,3,2])
oldArr3.splice(-1,1,3)–>2(从小标-1即2元素开始删除1个元素，然后添加元素3，操作后为oldArr3–>[1,3])
OK接下来开始讲concat，这个方法用来连接两个或多个数组,该数组不会改变原来的数组只会返回新的一个数组。连接的时候参数如果为数组，则连接的是数组中的元素。因为比较简单直接开始例子

例4:
var oldArr4=[1,2];
oldArr4.concat(3,4)–>[1,2,3,4]
oldArr4.concat(3,4,[5,6])–>[1,2,3,4,5,6](这边添加的是[5,6]中的元素5和元素6）
oldArr4.concat(3,[4,[5,6]])–>[1,2,3,4,[5,6]](这边最里层的元素[5,6]整个用来添加，而不是拆开)
下面来讲数组中的排序方法sort
sort(function)是针对原数组进行的排序，不会生成新的数组。默认sort()不带参数时按照数组中的元素转换成字符串进行比较，比较的时候按照字符在字符编码中的顺序进行排序，每个字符都有一个唯一的编码与其对应。

且看下面例子
var oldArr5=[3,1,5,7,17] 看这个一般观念上以为对oldArr5排序时oldArr5.sort()会按照数字从小到大排序即返回[1,3,5,7,17]，但是看一下结果其实不 然返回的是[1,17,3,5,7] 因为比较的时候都被转成字符串。然后对字符串进行一个个的比较如果第一个字符相同则比较第二个，否则直接返回比较结果，因为”17″<”3″所以可 想而知排序的结果就不是一般印象中的那个结果了。

sort(function)方法除了默认的无参外还可以传入自定义的排序方法，这样排 序的结果完全可以由自己来控制了，想怎么排就怎么排，是不是很爽啊，呵呵。 一般自定义的function比较函数，包含两个参数分别代表用来比较的左元素和右元素。然后通过一定方式返回一个结果，如果返回值大于0表示交换左右元 素，如果返回值小于0或等于0则表示不不会交换左右元素。现在来看一下例子

例5:
按照数字从大到小排列原有数组

复制代码 代码如下:

var oldArr5=[3,1,5,7,17]; //初始数组
function mySort(left,right){
if(left<right){
return 1;}//如果左边元素小于右边元素则交换两数
else{
return -1;}//如果左边元素大于等于右边元素不做交换
}

当然上面的方法可以简化为funaction mySort(left,right){ return right-left;}

复制代码 代码如下:

//按照偶数在前奇数在后排序
var oldArr6=[3,6,7,18];//初始数组
function mySort2(left,right){
if(left%2==0)return -1;//如果左边元素为偶数则不交换
if(right%2==0)return 1; //如果右边元素为偶数则交换
return 0; //不交换
}

最后的slice不多讲，只是用来截取原数组中的部分元素，返回一个新的数组，原数组不会改变，其操作方式跟string的slice类似

复制代码 代码如下:

var oldArr7=[1,2,3,4];
oldArr7.slice(0)–>[1,2,3,4]
oldArr7.slice(0,2)–>[1,2]
oldArr7.slice(0,0)–>[]
oldArr7.slice(0,-1)–>[1,2,3]
oldArr7.slice(-3,-1)–>[2,3]
oldArr4.slice(-1,-3)–[]

1、数组的创建

复制代码 代码如下:

var arrayObj = new Array();　//创建一个数组
var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　//创建一个数组并赋值

要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。

2、数组的元素的访问

复制代码 代码如下:

var testGetArrValue=arrayObj[1]; //获取数组的元素值
arrayObj[1]= "这是新值"; //给数组元素赋予新的值

3、数组元素的添加

复制代码 代码如下:

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。

4、数组元素的删除

复制代码 代码如下:

arrayObj.pop(); //移除最后一个元素并返回该元素值
arrayObj.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

5、数组的截取和合并

复制代码 代码如下:

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

6、数组的拷贝

复制代码 代码如下:

arrayObj.slice(0); //返回数组的拷贝数组，注意是一个新的数组，不是指向
arrayObj.concat(); //返回数组的拷贝数组，注意是一个新的数组，不是指向

7、数组元素的排序

复制代码 代码如下:

arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.sort(); //对数组元素排序，返回数组地址

8、数组元素的字符串化

复制代码 代码如下:

arrayObj.join(separator); //返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。
toLocaleString 、toString 、valueOf：可以看作是join的特殊用法，不常用

二、数组对象的3个属性

1、length 属性

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

复制代码 代码如下:

var arr=[12,23,5,3,25,98,76,54,56,76];
//定义了一个包含10个数字的数组
alert(arr.length); //显示数组的长度10
arr.length=12; //增大数组的长度
alert(arr.length); //显示数组的长度已经变为12
alert(arr[8]); //显示第9个元素的值，为56
arr.length=5; //将数组的长度减少到5，索引等于或超过5的元素被丢弃
alert(arr[8]); //显示第9个元素已经变为"undefined"
arr.length=10; //将数组长度恢复为10
alert(arr[8]); //虽然长度被恢复为10，但第9个元素却无法收回，显示"undefined"

由 上面的代码我们可以清楚的看到length属性的性质。但length对象不仅可以显式的设置，它也有可能被隐式修改。JavaScript中可以使用一 个未声明过的变量，同样，也可以使用一个未定义的数组元素（指索引超过或等于length的元素），这时，length属性的值将被设置为所使用元素索引 的值加1。例如下面的代码：

复制代码 代码如下:

var arr=[12,23,5,3,25,98,76,54,56,76];
alert(arr.length);
arr[15]=34;
alert(arr.length);

代 码中同样是先定义了一个包含10个数字的数组，通过alert语句可以看出其长度为10。随后使用了索引为15的元素，将其赋值为15，即 arr[15]=34，这时再用alert语句输出数组的长度，得到的是16。无论如何，对于习惯于强类型编程的开发人员来说，这是一个很令人惊讶的特 性。事实上，使用new Array()形式创建的数组，其初始长度就是为0，正是对其中未定义元素的操作，才使数组的长度发生变化。

由上面的介绍可以看到，length属性是如此的神奇，利用它可以方便的增加或者减少数组的容量。因此对length属性的深入了解，有助于在开发过程中灵活运用。

2、prototype 属性

返回对象类型原型的引用。prototype 属性是 object 共有的。
objectName.prototype
objectName 参数是object对象的名称。
说明：用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

对于数组对象，以以下例子说明prototype 属性的用途。

给数组对象添加返回数组中最大元素值的方法。要完成这一点，声明一个函数，将它加入 Array.prototype， 并使用它。

复制代码 代码如下:

function array_max()
{
var i,
max = this[0];
for (i = 1; i < this.length; i++)
{
if (max < this[i])
max = this[i];

}
return max;

}
Array.prototype.max = array_max;
var x = new Array(1, 2, 3, 4, 5, 6);
var y = x.max();

该代码执行后，y 保存数组 x 中的最大值，或说 6。

3、constructor 属性

表示创建对象的函数。
object.constructor //object是对象或函数的名称。
说明：constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JScript 固有对象。constructor 属性保存了对构造特定对象实例的函数的引用。

例如：

复制代码 代码如下:

x = new String("Hi");
if (x.constructor == String) // 进行处理（条件为真）。

或

复制代码 代码如下:

function MyFunc {
// 函数体。
}

复制代码 代码如下:

y = new MyFunc;
if (y.constructor == MyFunc) // 进行处理（条件为真）。

对于数组来说：

复制代码 代码如下:

y = new Array();