JavaScript数组操作详解:增删改查方法汇总

作者:青柠

时间:2026-10-29

浏览:560

本文系统梳理JavaScript数组的核心操作方法,涵盖增加、删除、修改与查询四大场景。详细解析push、unshift、splice、slice等原生API的使用差异,重点对比splice与slice对原数组的影响,并提供代码示例辅助理解,帮助开发者高效掌握数组处理技巧。

文章目录

JavaScript数组基础与特性

在编程语言中,数组占据着基础且重要的地位。作为JavaScript中最常用的对象类型之一,数组本质上是值的有序集合。得益于JavaScript的弱类型特性,数组具有极高的灵活性和扩展性。与Java等强类型语言不同,JavaScript数组允许在同一实例中混合存储不同类型的数据元素,且其长度并非固定不变,而是能够根据数据的增删动态调整。

数组是JavaScript开发中的高频对象,其经典操作主要围绕增加、删除、修改和查询四个维度展开。本文旨在系统整理这些常用操作方法,为开发者提供清晰的参考指南。

数组增加项方法

增加数组项

首先探讨如何向现有数组中插入新元素。假设我们定义了一个初始数组:


var arr = [];

上述代码声明了一个名为arr的空数组,其length属性值为0。接下来演示如何向该数组添加元素。最直观的方式是通过索引赋值来实现:


var arr = [];
arr[0] = 'a';
arr[1] = 'b';
arr[2] = 1;
arr[3] = 2;
console.log(arr); // ["a", "b", 1, 2]
console.log(arr.length); // 4

另一种方式是通过修改数组的length属性来扩展数组,但这种方式新增的元素值均为undefined:


var arr = [];
arr[0] = 'a'; // 给数组arr添加一个`a`数组项
arr.length = 5; // 改变数组的`length`值为`5`
console.log(arr); // ["a", undefined × 4]

尽管修改length属性也能实现数组项的增加,但这种方式相对繁琐且不够直观。实际上,JavaScript提供了更为便捷的原生方法来实现数组元素的添加。

push()

利用push()方法,可以向数组末尾追加一个或多个元素。


var arr = [];
arr.push('a','b');
console.log(arr); // ['a','b']
unshift()

既然push()用于在末尾添加元素,那么unshift()方法则用于在数组起始位置添加一个或多个元素:


var arr = ['a','b'];
arr.unshift(1,2);
console.log(arr); // [1, 2, "a", "b"]

除了上述两种方法,splice()同样可用于向数组插入元素:


var arr = ['a','b','c',1,2];
arr.splice(2,0,'d','c','e');
console.log(arr); // ["a", "b", "d", "c", "e", "c", 1, 2]

此外,concat()方法也可用于添加元素,但其特性是不会修改原数组,而是返回一个包含原数组和新元素的新数组:


var arr = ['a','b','c'];
var arr2 = arr.concat('d',1,2,['e',3]);
console.log(arr); // ["a", "b", "c"]
console.log(arr2); // ["a", "b", "c", "d", 1, 2, "e", 3]

数组删除项方法

删除数组项

在数组操作中,删除元素的需求同样频繁。常用的删除方法包括pop()和shift()。

pop()

pop()方法用于从数组末尾移除最后一个元素:


var arr = ['a','b','c','d',1,2];
arr.pop();
console.log(arr); // ["a", "b", "c", "d", 1]

shift()

与pop()相反,shift()方法用于移除数组的第一个元素:


var arr = ['a','b','c','d',1,2];
arr.shift();
console.log(arr); // ["b", "c", "d", 1, 2]

pop()和shift()每次仅能删除一个元素,操作多元素时较为繁琐。因此,splice()和slice()成为了更高效的删除手段。

slice()

slice()可用于删除多个元素,其特点是不修改原数组,而是返回一个包含被删除元素的新数组副本:


var arr = [1,2,3,4,'a','b'];
var arr2 = arr.slice(2);
console.log(arr); // [1, 2, 3, 4, "a", "b"]
console.log(arr2); // [3, 4, "a", "b"]
console.log(arr3); // ["a", "b"]

splice()

splice()不仅支持添加元素,同样支持删除元素:


var arr = [1,2,3,4,'a','b','c'];
var arr2 = arr.splice(2,2);
console.log(arr); // [1, 2, "a", "b", "c"]
console.log(arr2); // [3, 4]

数组修改与查询技巧

改变数组

splice()是数组操作中功能强大的方法,除了添加和删除,它还支持直接修改数组中的元素:


var arr = [1,2,3,4,5,6];
var arr2 = arr.splice(2,3,'a','b','c');
console.log(arr); // [1, 2, "a", "b", "c", 6]
console.log(arr2); // [3, 4, 5]

数组的查询

此处提到的查询主要指从数组中提取特定子集,主要依赖slice()方法实现:


var arr = [1,2,3,4,5,6];
var arr2 = arr.slice(-3);
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(arr2); // [4, 5, 6]

总结

本文简要梳理了数组增、删、改、查的相关方法,核心要点如下:

增加数组项:除直接赋值和修改length外,推荐使用push()、unshift()、concat()和splice()。

删除数组项:可选用pop()、shift()、slice()和splice()。

改变数组项:主要通过splice()实现。

查询数组项:主要利用slice()进行元素提取。

关于pop()、push()、shift()和unshift()的详细操作,以及concat()、slice()和splice()的深入介绍,可参考相关技术文档。

以上是对JavaScript数组增删改查操作的简要介绍,希望能为读者提供实用帮助。更多JavaScript相关知识,欢迎访问官方网站获取详细信息。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章