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

js中数组操作函数还是非常多的，今天忽然想到来总结一下，也算是温故而知新吧。不过不会针对每个办法都进行一下总结，只是针对一些比较常用的做个备注一下。

这里总结到的 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() 无法执行！

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

<script type="text/javascript">
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr.join())
</script>

输出：

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

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

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

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

<script type="text/javascript"> 
var arr = new Array
arr[0] = "George" 
arr[1] = "John" 
arr[2] = "Thomas" 
document.write(arr.join() + "<br />") 
document.write(arr.shift() + "<br />") 
document.write(arr.join()) 
</script> 

输出：

George，John，Thomas
George
John，Thomas

（3）join()

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

语法

arrayObject.join(separator)

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

示例：

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join())

输出

George,John,Thomas

（4）slice()

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

语法

arrayObject.slice(start,end)

返回值

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

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

示例：

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr.join())
</script>

输出：

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

（5）splice()

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

语法

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

返回值

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

说明

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

示例：

例子 1

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

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.join() + "<br />")
arr.splice(2,0,"William")
document.write(arr.join() + "<br />")
</script>

输出：

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

例子 2

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

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.join() + "<br />")
arr.splice(2,1,"William")
document.write(arr.join())
</script>

输出：

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

例子 3

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

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.join() + "<br />")
arr.splice(2,3,"William")
document.write(arr.join())
</script>

输出：

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

（6）contact()

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

语法

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

示例：

例子 1

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

<script type="text/javascript">
var a = [1,2,3];
document.write(a.concat(4,5));
</script>

输出：

1,2,3,4,5

例子 2

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

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>

输出：

George,John,Thomas,James,Adrew,Martin

例子 3

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

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"
document.write(arr.concat(arr2,arr3))
</script>

输出：

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