JavaScript ES3 数组常用方法详解与示例
本文系统总结了JavaScript ES3标准中的11个常用数组方法，涵盖连接、字符串转换、元素增删及排序四大类。详细解析了concat、join、toString、pop、push、shift、unshift、slice、splice、reverse和sort的语法、参数及返回值，并结合具体代码示例说明其实际应用场景与注意事项。
JavaScript ES3 数组方法概览
本文对JavaScript中常用的数组操作方法进行归纳整理。
以下内容仅涵盖ES3标准中常用的11个数组方法，ES5新增的9个方法将在后续章节单独总结。
共包含1种数组连接方法：concat（）。
共包含2种将数组转换为字符串的方法：join（）和toString（）。
共包含6种用于增删数组元素的方法：pop（）、push（）、shift（）、unshift（）、slice（）和splice（）。
共包含2种数组排序方法：reverse（）和sort（）。
数组连接与字符串转换
以下是关于连接数组方法的详细说明。
1、concat（）
功能：用于连接两个或多个数组，并将结果作为一个新数组返回。
语法：arr1.concat（arr2，arr3...）
示例代码：
<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
以下是将数组转换为字符串的方法说明。
1、join（）
功能：将数组中的所有元素连接成一个字符串，并可通过指定分隔符进行分隔。
语法：arrayObject.join(separator)
示例代码：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join("."))
</script>运行结果：
George.John.Thomas
注意：该方法返回值为字符串。若未指定分隔符，默认使用逗号（,）作为分隔符。
2、toString（）
功能：将数组转换为字符串，并返回转换后的结果。
语法：arrayObject.toString()
示例代码：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"；
arr[1] = "John"；
arr[2] = "Thomas"；
document.write(arr.toString())；
</script>运行结果：
George,John,Thomas
其返回值与调用无参数的join（）方法所得字符串相同，数组元素之间以逗号分隔。
数组元素的增删操作
以下是关于增删数组元素的方法说明。
1、pop（）
功能：用于删除并返回数组的最后一个元素。
语法：arrayObject.pop()
pop（）方法会删除arrayObject的最后一个元素，使数组长度减1，并返回被删除元素的值。若数组为空，则不改变数组内容，并返回undefined。
示例代码：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr)
document.write("<br />")
document.write(arr.pop())
document.write("<br />")
document.write(arr)
</script>运行结果：
George,John,Thomas
Thomas
George,John2、push（）
功能：可向数组末尾添加一个或多个元素，并返回更新后的数组新长度。
语法：arrayObject.push(newelement1, newelement2, ..., newelementX)
该方法直接修改原arrayObject，不创建新数组。push（）与pop（）配合使用可实现栈（先进后出）的功能。
示例代码：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)
</script>运行结果：
George,John,Thomas
4
George,John,Thomas,James3、shift（）
功能：用于删除并返回数组的第一个元素。
语法：arrayObject.shift()
若数组为空，shift（）不执行任何操作并返回undefined。该方法直接修改原arrayObject，不创建新数组。
示例代码：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)
</script>运行结果：
George,John,Thomas
George
John,Thomas4、unshift（）
功能：可向数组开头添加一个或多个元素，并返回更新后的数组新长度。
语法：arrayObject.unshift(newelement1, newelement2, ..., newelementX)
unshift（）将参数插入arrayObject头部，原有元素依次向后移动以腾出空间。第一个参数成为新元素0，第二个成为新元素1，依此类推。
注意：该方法直接修改原数组，不创建新数组。此外，unshift（）在Internet Explorer浏览器中可能存在兼容性问题。
示例代码：
<script type="text/javascript">
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)
</script>运行结果：
George,John,Thomas
4
William,George,John,Thomas5、slice（）
功能：从已有数组中返回选定的元素子集。
语法：arrayObject.slice(start, end)
|
start |
必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。 |
|
end |
可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。 |
返回一个新数组，包含从start到end（不包括end）之间的arrayObject元素。
该方法不修改原数组，而是返回子数组。若需删除数组中一段元素，应使用splice（）方法。
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)
</script>运行结果：
George,John,Thomas
John,Thomas
George,John,Thomas6、splice（）
功能：用于向/从数组中添加或删除项目，并返回被删除的项目。
语法：arrayObject.splice(index, howmany, item1, ..., itemX)
|
index |
必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 |
|
howmany |
必需。要删除的项目数量。如果设置为 0，则不会删除项目。 |
|
item1, ..., itemX |
可选。向数组添加的新项目。 |
该方法会直接修改原始数组。
示例代码：
<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 + "<br />")arr.splice(2,0,"William")
document.write(arr + "<br />")
</script>运行结果：
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin
数组排序与反转
以下是数组元素排序方法的说明。
1、reverse（）
功能：用于颠倒数组中元素的顺序。
语法：arrayObject.reverse()
该方法直接修改原数组，不创建新数组。
示例代码：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.reverse())
</script>运行结果：
George,John,Thomas
Thomas,John,George2、sort（）
功能：用于对数组元素进行排序。
语法：arrayObject.sort(sortby)
sortby：可选参数，规定排序顺序的比较函数，必须为函数类型。
相较于其他方法，此方法逻辑稍复杂。
若调用时未使用参数，数组元素将按字符编码顺序（字母顺序）进行排序。
若需按其他标准排序，需提供比较函数。该函数接收两个参数，返回用于说明两者相对顺序的数字。比较函数应包含两个参数a和b，返回值规则如下：
若a小于b，排序后a应排在b之前，则返回小于0的值。
若a等于b，则返回0。
若a大于b，排序后a应排在b之后，则返回大于0的值。
<script type="text/javascript">
function sortNumber(a,b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>运行结果：
10,5,40,25,1000,1
1,5,10,25,40,1000上述示例实现了数组元素的从小到大排序。若需实现从大到小排序，只需将sortNumber函数中的a-b改为b-a即可。
<script type="text/javascript">
function sortNumber(a,b)
{
return b - a;
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>运行结果：
10,5,40,25,1000,1
1000,40,25,10,5,1数组对象属性说明
补充说明：
数组对象的属性介绍：
|
属性 |
描述 |
|
constructor |
返回对创建此对象的数组函数的引用。 |
|
length |
设置或返回数组中元素的数目。 |
|
prototype |
使您有能力向对象添加属性和方法。 |
以下示例展示了constructor属性的用法。
<script type="text/javascript">
var test=new Array();
if (test.constructor==Array)
{
document.write("This is an Array");
}
if (test.constructor==Boolean)
{
document.write("This is a Boolean");
}
if (test.constructor==Date)
{
document.write("This is a Date");
}
if (test.constructor==String)
{
document.write("This is a String");
}
</script>运行结果：
This is an Arraylength属性用于设置或返回数组中元素的数目。length属性值始终比数组中最后一个元素的下标大1。对于从0开始连续存储元素的常规数组，length属性声明了数组的元素个数。设置length属性可改变数组大小：若设置的值小于当前值，数组将被截断，尾部元素丢失；若设置的值大于当前值，数组将增大，新增元素值为undefined。
获取数组长度语法：arrayObject.length
以上关于JavaScript基础进阶之数组方法总结的内容即为全部分享，希望能对读者有所帮助，欢迎继续支持本站。
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28