前言
数组是JavaScript中最常用的数据结构之一。本文将系统讲解数组的概念、创建方式、基本操作、遍历方法、排序算法、增删改查以及高级方法，涵盖数组相关的所有核心知识点。无论你是初学者还是有一定经验的开发者，都能从中获得收获。
一、数组的概念
数组 是指一组有序数据的集合，其中每个数据被称为元素。数组中可以存放任意类型的元素，它是将一组数据存储在单个变量名下的优雅方式。
1.1 数组与普通对象的区别
| 对比项 | 普通对象 | 数组 |
|---|---|---|
| 属性名 | 字符串 | 数字索引（从0开始） |
| 存储性能 | 一般 | 较好 |
| 适用场景 | 描述事物特征 | 存储有序数据集合 |
数组是一个特殊的对象，它使用数字作为索引来操作元素。索引是从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]); // undefined3.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五、检测数组的方法
| 方法 | 语法 | 优缺点 |
|---|---|---|
| instanceof | arr instanceof Array |
跨iframe时可能失效 |
| **Array.isArray()** | Array.isArray(value) |
推荐使用，最简洁可靠 |
| Object.prototype.toString | Object.prototype.toString.call(arr) |
兼容性极佳 |
| constructor | arr.constructor === Array |
constructor可被修改 |
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...of6.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 添加元素
| 方法 | 功能 | 返回值 | 是否改变原数组 |
|---|---|---|---|
push() |
向末尾添加一个或多个元素 | 新数组长度 | ✅ |
unshift() |
向开头添加一个或多个元素 | 新数组长度 | ✅ |
let arr = ["孙悟空", "沙和尚", "猪八戒"];
// push() - 向末尾添加
arr.push("唐三藏", "玉皇大帝"); // 返回新长度
// unshift() - 向开头添加
arr.unshift("唐三藏", "玉皇大帝"); // 返回新长度8.2 删除元素
| 方法 | 功能 | 返回值 | 是否改变原数组 |
|---|---|---|---|
pop() |
删除最后一个元素 | 被删除的元素 | ✅ |
shift() |
删除第一个元素 | 被删除的元素 | ✅ |
// 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");参数说明：
-
第一个：开始位置的索引
-
第二个：删除的数量
-
第三个及以后：插入的新元素
十、数组查找方法
| 方法 | 功能 | 返回值 |
|---|---|---|
indexOf() |
查找元素第一次出现的索引 | 索引或-1 |
lastIndexOf() |
查找元素最后一次出现的索引 | 索引或-1 |
includes() |
判断数组是否包含指定元素 | true/false |
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数组的完整知识体系：
| 主题 | 核心要点 |
|---|---|
| 数组概念 | 有序数据集合，数字索引，存储性能优于普通对象 |
| 创建方式 | 字面量（推荐）和构造函数 |
| 基本操作 | 读取、添加、修改、length属性 |
| 数据类型 | 可存放任意类型，包括对象、函数、数组 |
| 检测方法 | Array.isArray() 最推荐 |
| 遍历方法 | for、for...in、for...of、forEach |
| 排序算法 | 冒泡排序 |
| 增删操作 | push/pop、unshift/shift |
| 截取删除 | slice（不改变原数组）、splice（改变原数组） |
| 查找方法 | indexOf、lastIndexOf、includes |
| 转换方法 | concat、join、split、reverse、sort |
| 高级方法 | filter过滤数组 |
掌握这些内容，你就具备了熟练操作JavaScript数组的能力。数组是日常开发中使用频率最高的数据结构之一，建议多加练习，熟能生巧！