JS数组完全指南（含十大操作详解）

前言

数组是JavaScript中最常用的数据结构之一。本文将系统讲解数组的概念、创建方式、基本操作、遍历方法、排序算法、增删改查以及高级方法，涵盖数组相关的所有核心知识点。无论你是初学者还是有一定经验的开发者，都能从中获得收获。

一、数组的概念

数组是指一组有序数据的集合，其中每个数据被称为元素。数组中可以存放任意类型的元素，它是将一组数据存储在单个变量名下的优雅方式。

1.1 数组与普通对象的区别

对比项

普通对象

数组

数组是一个特殊的对象，它使用数字作为索引来操作元素。索引是从0开始的整数。

let arr = ['孙悟空', '猪八戒', '沙和尚'];
console.log(arr[0]); // 孙悟空
console.log(arr[1]); // 猪八戒

二、数组的创建方式

2.1 字面量创建（推荐）

let arr1 = [1, 2, 3]; // 底层自动调用 new Array()

2.2 构造函数创建

// 空数组
let arr2 = new Array();

// 直接填充内容
let arr3 = new Array("hello", "你好", 8);

// 设置初始长度（单个数字参数）
let arr4 = new Array(5); // 创建长度为5的空数组

注意：如果构造函数只接收一个数字参数，该数字表示数组长度；其他情况都会成为数组元素。

三、数组的基本操作

3.1 读取数组元素

通过数组名[索引]的形式获取元素。如果读取不存在的索引，不会报错，而是返回undefined。

let arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
console.log(arr[1]); // "猪八戒"（索引从0开始）
console.log(arr[10]); // undefined

3.2 添加/修改元素

arr[4] = "白骨精"; // 新增元素
arr[0] = "玉皇大帝"; // 修改元素

3.3 获取数组长度

使用length属性获取数组长度（元素个数）。

console.log(arr.length); // 获取数组长度

注意：对于非连续的数组，length会获取到数组的最大索引+1。建议尽量不要创建非连续的数组。

3.4 修改length属性

arr.length = 10; // 大于原长度，多出部分空出来
arr.length = 3; // 小于原长度，多出的元素被删除

3.5 向末尾添加元素

arr[arr.length] = "王母"; // 动态添加

四、数组元素的数据类型

数组元素可以是任意数据类型：字符串、数字、对象、数组、函数等。

let arr = [
1, // 数字
"hello", // 字符串
true, // 布尔值
{ name: "jack" }, // 对象
function() { console.log("hi"); }, // 函数
[2, [66, 88, { age: 18 }], 4] // 二维数组
];

// 访问方式
console.log(arr[3].name); // "jack"
arr[4](); // 调用函数，输出"hi"
console.log(arr[5][2]); // 4

五、检测数组的方法

方法

语法

优缺点

let arr = [1, 2, 3];

console.log(arr instanceof Array); // true
console.log(Array.isArray(arr)); // true（推荐）
console.log(Object.prototype.toString.call(arr)); // "[object Array]"
console.log(arr.constructor === Array); // true

实际开发推荐：优先使用Array.isArray()。

六、数组遍历方法

6.1 基本for循环

let arr = ["red", "orange", "yellow", "green"];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}

6.2 优化版for循环（缓存长度）

for (let i = 0, len = arr.length; i < len; i++) {
console.log(arr[i]);
}

6.3 for…in循环

for (let i in arr) {
console.log(arr[i]);
}

6.4 for…of循环（ES6）

for (let v of arr) {
console.log(v); // 直接获取元素值
}
// 注意：普通对象不能使用 for…of

6.5 forEach()方法

arr.forEach(function(item, index, arr) {
console.log(item); // 当前元素
console.log(index); // 当前索引
console.log(arr); // 数组本身
});

回调函数：由我们创建但不由我们调用的函数。数组中有几个元素，函数就执行几次。

七、数组排序算法：冒泡排序

原理：重复地走访过要排序的数列，一次比较两个元素，如果顺序错误就把它们交换过来。走访数列的工作重复进行，直到没有再需要交换为止。

let arr = [1, 3, 6, 4, 5, 2];

for (let i = 0; i < arr.length – 1; i++) {
for (let j = 0; j < arr.length – 1 – i; j++) {
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}

console.log(arr); // [1, 2, 3, 4, 5, 6]

八、数组元素操作

8.1 添加元素

方法

功能

返回值

是否改变原数组

let arr = ["孙悟空", "沙和尚", "猪八戒"];

// push() – 向末尾添加
arr.push("唐三藏", "玉皇大帝"); // 返回新长度

// unshift() – 向开头添加
arr.unshift("唐三藏", "玉皇大帝"); // 返回新长度

8.2 删除元素

方法

功能

返回值

是否改变原数组

// pop() – 删除最后一个元素
let lastElement = arr.pop();

// shift() – 删除第一个元素
let firstElement = arr.shift();

九、数组截取和删除

9.1 slice() – 截取数组（不改变原数组）

let arr = ["hello", true, 1, 2, "你好", undefined, null, "问心"];

let newArr = arr.slice(0, 4); // 截取索引0-3
newArr = arr.slice(0); // 复制整个数组
newArr = arr.slice(0, -1); // 截取到倒数第二个

参数说明：

• 第一个参数：开始位置索引（包含）

• 第二个参数：结束位置索引（不包含），可省略

• 支持负值索引（-1表示倒数第一个）

9.2 splice() – 删除/替换元素（改变原数组）

// 删除元素
let deleted = arr.splice(0, 1); // 从索引0开始删除1个元素

// 替换元素（删除并插入新元素）
arr.splice(0, 1, "1", "2", "3");

参数说明：

• 第一个：开始位置的索引

• 第二个：删除的数量

• 第三个及以后：插入的新元素

十、数组查找方法

方法

功能

返回值

let arr = ["red", "orange", "green", "yellow", "green"];

let index = arr.indexOf("green"); // 2（第一个匹配的索引）
let notFound = arr.indexOf("purple"); // -1（未找到）
let lastIndex = arr.lastIndexOf("green"); // 4（最后一个匹配的索引）
let exists = arr.includes("orange"); // true

十一、数组转换和排序

11.1 数组合并

let arr1 = ["孙悟空", "猪八戒"];
let arr2 = ["唐僧"];
let arr3 = ["嫦娥"];

// concat()方法
let merged = arr1.concat(arr2, arr3);

// 扩展运算符（ES6）
let merged2 = […arr1, …arr2, …arr3];

11.2 数组转字符串

let arr = ["孙悟空", "猪八戒", "沙和尚"];

let str = arr.join(); // "孙悟空,猪八戒,沙和尚"
str = arr.join("||"); // "孙悟空||猪八戒||沙和尚"
str = arr.toString(); // "孙悟空,猪八戒,沙和尚"

11.3 字符串转数组

let str = "red,orange,yellow";
let arr = str.split(","); // ["red", "orange", "yellow"]

11.4 数组反转

arr.reverse(); // 原地反转，改变原数组

11.5 数组排序

let arr = [5, 4, 5, 12, 11, 65, 82, 3];

// 默认按Unicode编码排序（可能不正确）
arr.sort();

// 自定义排序规则
arr.sort(function(a, b) {
return a – b; // 升序
// return b – a; // 降序
});

// 对象数组排序
let objArr = [{num: 10}, {num: 20}, {num: 1}];
objArr.sort(function(a, b) {
return a.num – b.num; // 按num属性升序
});

// 随机排序
arr.sort(function(a, b) {
return Math.random() – 0.5; // 50%概率正负
});

十二、数组高级方法：filter()

filter()方法用于过滤数组，返回一个新数组，包含所有通过测试的元素。

let list = [32, 93, 77, 53, 38, 87];
let filtered = list.filter(function(item) {
return item > 60; // 返回大于60的元素
});

console.log(filtered); // [93, 77, 87]

总结

本文系统梳理了JavaScript数组的完整知识体系：

主题

核心要点

掌握这些内容，你就具备了熟练操作JavaScript数组的能力。数组是日常开发中使用频率最高的数据结构之一，建议多加练习，熟能生巧！