JavaScript 数组操作函数总结(push，pop，join，shift，unshift，slice，splice，concat)

这里总结到的 js 数组操作函数有：push，pop，join，shift，unshift，slice，splice，concat

（1）push 和 pop

这两个函数都是对数组从尾部进行压入或弹出操作。push(arg1,arg2,...)可以每次压入一个或多个元素，并返回更新后的数组长度。注意如果参数也是数组的话，则是将全部数组当做一个元素压入到原本的数组里面去。pop() 函数则每次只会弹出结尾的元素，并返回弹出的元素，若是是对空组数调用 pop() 则返回undefined。

示例：

var oldArr=[1,2,3];

alert(oldArr.push(4,[5,6]))//这里只会将[5,6]当做一个元素来策画，返回更新后的数组长度5

此时 oldArr = [1,2,3,4,[5,6]]

oldArr.pop()//这里弹出最后一个元素[5,6]，而不是6

此时 oldArr = [1,2,3,4]

oldArr.pop()-->4

oldArr.pop()-->3

oldArr.pop()-->2

oldArr.pop()-->1

alert(oldArr.pop())-->undefined(空数组弹出)

（2）unshift 和 shift

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。

请注意，unshift() 方法不创建新的创建，而是直接修改原有的数组。另外在 Internet Explorer 浏览器中 unshift() 无法执行！

如下示例，我们将创建一个数组，并把一个元素添加到数组的开头，并返回数组的新长度：

查看代码

打印

1<script type="text/javascript">

2var arr = new Array()

3arr[0] = "George"

4arr[1] = "John"

5arr[2] = "Thomas"

6document.write(arr.join() + "<br />")

7document.write(arr.unshift("William") + "<br />")

8document.write(arr.join())

9</script>

输出：

George,John,Thomas
4
William,George,John,Thomas

shift() 用于将数组的第一个元素从原数组中删除，并返回第一个元素的值（即被删除的元素的值）。

注意：若数组是空的，那么 shift() 将不进行任何操纵，直接返回 undefined 值。另外该方法也不创建新数组，而是直接修改原有的 arrayObject。

示例：在本例中，我们将创建一个数组，并删除数组的第一个元素：

查看代码

打印

1<script type="text/javascript">

2var arr = new Array

3arr[0] = "George"

4arr[1] = "John"

5arr[2] = "Thomas"

6document.write(arr.join() + "<br />")

7document.write(arr.shift() + "<br />")

8document.write(arr.join())

9</script>

输出：

George，John，Thomas 
George 
John，Thomas

（3）join()

作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。其作用和toString()相同。

语法

arrayObject.join(separator)

参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

示例：

查看代码

打印

1var arr = new Array(3)

2arr[0] = "George"

3arr[1] = "John"

4arr[2] = "Thomas"

5document.write(arr.join())

输出

George,John,Thomas

（4）slice()

该方法可从已有的数组中返回选定的元素

语法

arrayObject.slice(start,end)

返回值

返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

注意：您可使用负值从数组的尾部选取元素。如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

示例：

查看代码

打印

1<script type="text/javascript">

2var arr = new Array(3)

3arr[0] = "George"

4arr[1] = "John"

5arr[2] = "Thomas"

6document.write(arr.join() + "<br />")

7document.write(arr.slice(1) + "<br />")

8document.write(arr.join())

9</script>

输出：

George,John,Thomas
John,Thomas
George,John,Thomas

（5）splice()

该方法用于插入、删除或替换数组的元素。

语法

arrayObject.splice(index,howmany,element1,.....,elementX)

返回值

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

说明

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。需要注意的是 splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。

示例：

例子 1

在本例中，我们将创建一个新数组，并向其添加一个元素：

查看代码

打印

01<script type="text/javascript">

02var arr = new Array(6)

03arr[0] = "George"

04arr[1] = "John"

05arr[2] = "Thomas"

06arr[3] = "James"

07arr[4] = "Adrew"

08arr[5] = "Martin"

09document.write(arr.join() + "<br />")

10arr.splice(2,0,"William")

11document.write(arr.join() + "<br />")

12</script>

输出：

George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

例子 2

在本例中我们将删除位于 index 2 的元素，并添加一个新元素来替代被删除的元素：

查看代码

打印

01<script type="text/javascript">

02var arr = new Array(6)

03arr[0] = "George"

04arr[1] = "John"

05arr[2] = "Thomas"

06arr[3] = "James"

07arr[4] = "Adrew"

08arr[5] = "Martin"

09document.write(arr.join() + "<br />")

10arr.splice(2,1,"William")

11document.write(arr.join())

12</script>

输出：

George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin

例子 3

在本例中我们将删除从 index 2 ("Thomas") 开始的三个元素，并添加一个新元素 ("William") 来替代被删除的元素：

查看代码

打印

01<script type="text/javascript">

02var arr = new Array(6)

03arr[0] = "George"

04arr[1] = "John"

05arr[2] = "Thomas"

06arr[3] = "James"

07arr[4] = "Adrew"

08arr[5] = "Martin"

09document.write(arr.join() + "<br />")

10arr.splice(2,3,"William")

11document.write(arr.join())

12</script>

输出：

George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

（6）contact()

该方法用于连接两个或多个数组。它不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

语法

arrayObject.concat(arrayX,arrayX,......,arrayX)

示例：

例子 1

在本例中，我们将把 concat() 中的参数连接到数组 a 中：

查看代码

打印

1<script type="text/javascript">

2var a = [1,2,3];

3document.write(a.concat(4,5));

4</script>

输出：

1,2,3,4,5

例子 2

在本例中，我们创建了两个数组，然后使用 concat() 把它们连接起来：

查看代码

打印

01<script type="text/javascript">

02var arr = new Array(3)

03arr[0] = "George"

04arr[1] = "John"

05arr[2] = "Thomas"

06var arr2 = new Array(3)

07arr2[0] = "James"

08arr2[1] = "Adrew"

09arr2[2] = "Martin"

10document.write(arr.concat(arr2))

11</script>

输出：

George,John,Thomas,James,Adrew,Martin

例子 3

在本例中，我们创建了三个数组，然后使用 concat() 把它们连接起来：

查看代码

打印

01<script type="text/javascript">

02var arr = new Array(3)

03arr[0] = "George"

04arr[1] = "John"

05arr[2] = "Thomas"

06var arr2 = new Array(3)

07arr2[0] = "James"

08arr2[1] = "Adrew"

09arr2[2] = "Martin"

10var arr3 = new Array(2)

11arr3[0] = "William"

12arr3[1] = "Franklin"

13document.write(arr.concat(arr2,arr3))

14</script>

输出：

George,John,Thomas,James,Adrew,Martin,William,Franklin

-----------------------

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(startIndex, endIndex)不多讲，只是用来截取原数组中的部分元素，返回一个新的数组，原数组不会改变，其操作方式跟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)--[]