详解JavaScript中数组的相关知识
本文详细介绍JavaScript中数组的创建方式、索引访问及遍历技巧。重点讲解push、unshift、splice等元素的增删方法，以及pop和shift的使用场景。此外，深入解析数组拷贝与截取，通过slice和concat函数实现深拷贝与合并，帮助开发者高效处理数组数据。
JavaScript数组基础与创建
创建数组
在JavaScript中，声明数组主要有以下几种方式：
var arr = []; // 简写模式
var arr = new Array(); // new一个array对象
var arr = new Array(arrayLength); // new一个确定长度的array对象
需要特别说明的是：
- 尽管第三种方法在声明时指定了数组长度，但JavaScript数组的长度实际上是动态可变的。这意味着，即使预设长度为5，依然可以向超出该长度的索引位置存储元素，此时数组的length属性会自动更新以反映新的长度。
- 此外，还有一个关键点需要明确：
- JavaScript属于弱类型语言，因此数组内部可以存储不同类型的元素，无需保持类型一致。
以下示例展示了数组中混合存储不同类型元素的情况：
var arr = [1, 2, 3, 4, 'wangzhengyi', 'bululu'];
for (var i = 0; i < arr.length; i ++) {
console.log(arr[i]);
}
数组元素的访问与遍历
数组元素访问
JavaScript数组的索引从0开始计数。我们可以通过数组名配合下标直接访问或修改数组中的特定元素。
示例代码如下：
var arr = [1, 2, 3];
console.log(arr[0]);
console.log(arr[1]);
在遍历数组时，推荐使用标准的for循环，而不建议使用for-in循环。具体原因可参考相关技术文章：Loop through array in JavaScript。
遍历数组的示例代码如下：
var arr = [1, 2, 3, 4, 'wangzhengyi', 'bululu'];
for (var i = 0, len = arr.length; i < len; i ++) {
console.log(arr[i]);
}
注意：
上述代码中有一个优化点：在循环开始前预先获取数组的长度并赋值给局部变量len。这样可以避免每次迭代都查询数组的length属性，对于超大数组而言，能显著提升遍历效率。
数组元素的添加方法
添加数组元素
向数组中添加新元素主要有三种方法：push、unshift和splice。下面分别介绍这三种方法的具体用法。 push
push方法用于在数组末尾添加一个或多个元素。示例代码如下：
var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);
for (var i = 0, len = arr.length; i < len; i ++) {
console.log(arr[i]);
}
执行结果为：
1
2
3
unshift
unshift方法用于在数组头部添加一个或多个元素。示例代码如下：
var arr = [];
arr.unshift(1);
arr.unshift(2);
arr.unshift(3);
for (var i = 0, len = arr.length; i < len; i ++) {
console.log(arr[i]);
}
执行结果如下：
3
2
1
splice
splice方法用于在数组的指定位置插入新元素，原有元素会自动向后移动。需要注意的是splice函数的原型为：
array.splice(index, howMany, element...)
其中howMany参数表示要删除的元素个数。如果仅执行插入操作而不删除元素，需将howMany设置为0。
示例代码如下：
var arr = [1, 2, 3, 4];
arr.splice(1, 0, 7, 8, 9);
for (var i = 0, len = arr.length; i < len; i ++) {
console.log(arr[i]);
}
执行结果如下：
1
7
8
9
2
3
4
数组元素的删除方法
删除数组元素
与添加元素类似，删除数组元素也有三种常用方法：pop、shift和splice。接下来分别讲解这三个函数的用法。 pop
pop方法用于移除并返回数组的最后一个元素。结合push和pop方法，可以实现类似栈（先入后出，LIFO）的数据结构功能。示例代码如下：
var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);
while (arr.length != 0) {
var ele = arr.pop();
console.log(ele);
}
shift
shift方法用于移除并返回数组的第一个元素，剩余元素会自动向前移动。需要注意的是，由于涉及元素的大规模移动，该方法的时间复杂度为O(n)，在性能敏感场景下需考虑效率问题。
var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);
function traverseArray(arr) {
for (var i = 0, len = arr.length; i < len; i ++) {
console.log(arr[i]);
}
}
while (arr.length != 0) {
var ele = arr.shift();
traverseArray(arr);
}
大家可以自行推导运行结果。 splice
在介绍添加元素时已提及splice函数，其原型中包含howMany参数，用于指定从index索引开始删除后续多少个元素。 示例代码如下：
var arr = [1, 2, 3, 4, 5, 6, 7];
function traverseArray(arr) {
for (var i = 0, len = arr.length; i < len; i ++) {
console.log(arr[i]);
}
}
arr.splice(1, 3);
traverseArray(arr);
执行结果为：
1
5
7
数组的拷贝与截取技巧
数组的拷贝和截取
举个例子，代码如下：
var arr1 = [1, 2, 3, 4];
var arr2 = arr1;
此时，arr2仅保存了arr1在堆内存中的引用地址，并未在堆内存中创建新的数组对象。因此，对arr2的修改会同步影响arr1。如果需要真正拷贝一份数组，可以使用slice和concat函数。以下分别介绍这两个函数。 slice
这里的slice用法与Python中的切片语法类似，均用于返回数组的子集。slice函数的原型为：
array.slice(begin, end)
该函数返回从begin索引到end索引的所有元素，包含begin索引对应的元素，但不包含end索引对应的元素。 若省略begin参数，默认从0开始；若省略end参数，默认截取至数组末尾。
因此，我们可以通过以下代码实现数组的深拷贝：
var arr1 = [1, 2, 3, 4];
var arr2 = arr1.slice();
arr2[2] = 10000
function traverseArray(arr) {
for (var i = 0, len = arr.length; i < len; i ++) {
console.log(arr[i]);
}
}
traverseArray(arr1);
traverseArray(arr2);
执行结果如下：
1
2
3
4
1
2
10000
4
concat
concat方法会创建一个新数组，将调用该方法的对象（this指向的对象）中的元素，以及所有作为参数传入的数组类型参数中的元素，还有非数组类型的参数本身，按顺序合并到新数组中，并返回这个新数组。
示例代码如下：
var alpha = ["a", "b", "c"];
var number = [1, 2, 3]
// 新数组为["a", "b", "c", 1, 2, 3]
var complex = alpha.concat(number);
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18