JavaScript数组Array常用操作方法详解
本文详细介绍JavaScript中Array数组的基础概念及常用操作方法，涵盖length属性、索引访问、元素查找、切片、增删改查、排序及多维数组等核心功能，帮助开发者掌握数组的高效使用技巧。
JavaScript数组Array基础与长度操作
JavaScript中的Array数组能够存储任意类型的数据，并支持通过索引位置来访问其中的每一个元素。
若需获取Array数组的长度，可直接调用其length属性。
var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6需要注意的是，直接修改Array数组的length属性值会改变数组的大小。
var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr变为[1, 2]
Array可以通过索引把对应的元素修改为新的值，因此，对Array的索引进行赋值会直接修改这个Array：
var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr现在变为['A', 99, 'C']同样地，如果通过索引赋值且索引值超出当前范围，也会导致数组大小发生变化。
var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr变为[1, 2, 3, undefined, undefined, 'x']在大多数其他编程语言中，直接改变数组大小或越界访问索引会引发错误，但JavaScript的Array却不会报错。尽管如此，在编写代码时仍不建议直接修改Array的大小，访问索引时应确保索引不越界。
查找元素：indexOf方法
indexOf
与String类型类似，Array数组也可以通过indexOf()方法来搜索指定元素的位置。
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2需要注意的是，数字30和字符串'30'被视为不同的元素。
截取数组：slice方法
slice
slice()方法相当于String的substring()版本，用于截取Array数组的部分元素，并返回一个新的Array数组。
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']需注意slice()方法的起止参数包含开始索引，但不包括结束索引。
若不给slice()传递任何参数，它将从头到尾截取所有元素。利用这一特性，可以很容易地复制一个Array数组。
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false数组增删：push、pop、unshift、shift
push和pop
push()方法用于向Array数组末尾添加若干元素，而pop()方法则用于删除Array数组的最后一个元素。
var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错，而是返回undefined
arr; // []unshift和shift
若需向Array数组头部添加若干元素，可使用unshift()方法；shift()方法则用于删除Array数组的第一个元素。
var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错，而是返回undefined
arr; // []数组排序与反转：sort、reverse
sort
sort()方法可对当前Array数组进行排序，它会直接修改当前Array数组的元素位置。直接调用时，按照默认顺序排序。
var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']能否按照我们自己指定的顺序排序呢？完全可以，我们将在后面的函数中讲到。
reverse
reverse()方法将整个Array数组的元素顺序颠倒，即实现反转效果。
var arr = ['one', 'two', 'three'];
arr.reverse();
arr; // ['three', 'two', 'one']数组修改与连接：splice、concat
splice
splice()方法是修改Array数组的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素。
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']concat
concat()方法将当前的Array数组与另一个Array数组连接起来，并返回一个新的Array数组。
var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']请注意，concat()方法并没有修改当前Array数组，而是返回了一个新的Array数组。
实际上，concat()方法可以接收任意个元素和Array数组，并且自动把Array数组拆开，然后全部添加到新的Array数组里。
var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]数组连接：join方法
join
join()方法是一个非常实用的方法，它把当前Array数组的每个元素都用指定的字符串连接起来，然后返回连接后的字符串。
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'如果Array数组的元素不是字符串，将自动转换为字符串后再连接。
多维数组与总结
多维数组
如果数组的某个元素又是一个Array，则可以形成多维数组。
var arr = [[1, 2, 3], [400, 500, 600], '-'];上述Array包含3个元素，其中头两个元素本身也是Array。
小结
Array提供了一种顺序存储一组元素的功能，并可以按索引来读写。
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00