JavaScript 数组完全指南
专为编程新手设计，用最通俗的语言理解JavaScript数组的核心概念与用法
什么是数组？
想象数组就像一个储物柜系统：
- 每个储物柜（数组元素）可以存放任何东西（数字、文本、对象等）
- 每个储物柜都有编号（索引），从0开始
- 你可以随时添加、取出或更换储物柜里的物品
- 整个储物柜系统可以扩大或缩小
在编程中，数组是存储多个值的有序集合，是JavaScript中最常用的数据结构之一。
数组结构可视化
下面是一个简单的数组 let fruits = ['苹果', '香蕉', '橙子', '葡萄'];
索引 0
苹果
索引 1
香蕉
索引 2
橙子
索引 3
葡萄
一、创建数组的三种方式
1. 字面量方式（最常用）
使用方括号 [] 直接创建数组
// 创建空数组
let emptyArr = [];
// 创建包含数字的数组
let numbers = [1, 2, 3, 4, 5];
// 创建包含不同类型数据的数组
let mixed = [1, “苹果”, true, {name: “小明”}, [7, 8, 9]];
let emptyArr = [];
// 创建包含数字的数组
let numbers = [1, 2, 3, 4, 5];
// 创建包含不同类型数据的数组
let mixed = [1, “苹果”, true, {name: “小明”}, [7, 8, 9]];
2. 构造函数方式
使用 new Array() 创建
// 创建空数组
let arr1 = new Array();
// 创建包含5个元素的数组
let arr2 = new Array(5);
// 创建包含具体元素的数组
let arr3 = new Array(“苹果”, “香蕉”, “橙子”);
let arr1 = new Array();
// 创建包含5个元素的数组
let arr2 = new Array(5);
// 创建包含具体元素的数组
let arr3 = new Array(“苹果”, “香蕉”, “橙子”);
3. Array.of() 方法
解决构造函数创建单个数字数组的问题
// 创建一个包含单个数字的数组
let arr = Array.of(5); // [5] 而不是长度为5的空数组
let arr = Array.of(5); // [5] 而不是长度为5的空数组
二、数组基本操作
1. 访问元素
通过索引（从0开始）访问
let fruits = [‘苹果’, ‘香蕉’, ‘橙子’];
console.log(fruits[0]); // “苹果”
console.log(fruits[2]); // “橙子”
console.log(fruits[3]); // undefined (不存在)
console.log(fruits[0]); // “苹果”
console.log(fruits[2]); // “橙子”
console.log(fruits[3]); // undefined (不存在)
2. 修改元素
直接给指定索引位置赋值
fruits[1] = ‘芒果’;
console.log(fruits); // [‘苹果’, ‘芒果’, ‘橙子’]
console.log(fruits); // [‘苹果’, ‘芒果’, ‘橙子’]
3. 数组长度
使用 length 属性获取数组元素数量
console.log(fruits.length); // 3
// 修改length可以改变数组大小
fruits.length = 2;
console.log(fruits); // [‘苹果’, ‘芒果’] (橙子被删除)
// 修改length可以改变数组大小
fruits.length = 2;
console.log(fruits); // [‘苹果’, ‘芒果’] (橙子被删除)
4. 检查是否为数组
// 使用Array.isArray()方法
console.log(Array.isArray(fruits)); // true
console.log(Array.isArray(“hello”)); // false
console.log(Array.isArray(fruits)); // true
console.log(Array.isArray(“hello”)); // false
三、数组修改方法
1. 添加元素
- push() – 在数组末尾添加一个或多个元素
- unshift() – 在数组开头添加一个或多个元素
let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.unshift(0); // [0, 1, 2, 3, 4]
arr.push(5, 6); // [0, 1, 2, 3, 4, 5, 6]
arr.push(4); // [1, 2, 3, 4]
arr.unshift(0); // [0, 1, 2, 3, 4]
arr.push(5, 6); // [0, 1, 2, 3, 4, 5, 6]
2. 删除元素
- pop() – 删除并返回数组的最后一个元素
- shift() – 删除并返回数组的第一个元素
let arr = [‘A’, ‘B’, ‘C’, ‘D’];
arr.pop(); // 返回 ‘D’，arr变为 [‘A’, ‘B’, ‘C’]
arr.shift(); // 返回 ‘A’，arr变为 [‘B’, ‘C’]
arr.pop(); // 返回 ‘D’，arr变为 [‘A’, ‘B’, ‘C’]
arr.shift(); // 返回 ‘A’，arr变为 [‘B’, ‘C’]
3. splice() – 万能方法
添加、删除或替换数组中的元素
// 语法：array.splice(start, deleteCount, item1, item2, …)
let colors = [‘红’, ‘绿’, ‘蓝’];
// 删除：从索引1开始删除1个元素
colors.splice(1, 1); // colors变为 [‘红’, ‘蓝’]
// 添加：从索引1开始，删除0个元素，添加新元素
colors.splice(1, 0, ‘黄’, ‘紫’); // colors变为 [‘红’, ‘黄’, ‘紫’, ‘蓝’]
// 替换：从索引1开始，删除1个元素，添加新元素
colors.splice(1, 1, ‘橙’); // colors变为 [‘红’, ‘橙’, ‘紫’, ‘蓝’]
let colors = [‘红’, ‘绿’, ‘蓝’];
// 删除：从索引1开始删除1个元素
colors.splice(1, 1); // colors变为 [‘红’, ‘蓝’]
// 添加：从索引1开始，删除0个元素，添加新元素
colors.splice(1, 0, ‘黄’, ‘紫’); // colors变为 [‘红’, ‘黄’, ‘紫’, ‘蓝’]
// 替换：从索引1开始，删除1个元素，添加新元素
colors.splice(1, 1, ‘橙’); // colors变为 [‘红’, ‘橙’, ‘紫’, ‘蓝’]
四、数组遍历方法
1. forEach()
为每个数组元素执行一次函数
[1, 2, 3].forEach(function(item, index) {
console.log(index + ‘: ‘ + item);
});
// 输出：
// 0: 1
// 1: 2
// 2: 3
console.log(index + ‘: ‘ + item);
});
// 输出：
// 0: 1
// 1: 2
// 2: 3
2. map()
创建新数组，结果是原数组每个元素调用函数后的返回值
let numbers = [1, 2, 3];
let squares = numbers.map(n => n * n);
console.log(squares); // [1, 4, 9]
let squares = numbers.map(n => n * n);
console.log(squares); // [1, 4, 9]
3. filter()
创建新数组，包含通过函数测试的所有元素
let nums = [1, 2, 3, 4, 5, 6];
let evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6]
let evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6]
4. find() 和 findIndex()
查找符合条件的第一个元素或其索引
let users = [
{id: 1, name: ‘小明’},
{id: 2, name: ‘小红’},
{id: 3, name: ‘小刚’}
];
let user = users.find(u => u.id === 2);
console.log(user.name); // “小红”
let index = users.findIndex(u => u.name === ‘小刚’);
console.log(index); // 2
{id: 1, name: ‘小明’},
{id: 2, name: ‘小红’},
{id: 3, name: ‘小刚’}
];
let user = users.find(u => u.id === 2);
console.log(user.name); // “小红”
let index = users.findIndex(u => u.name === ‘小刚’);
console.log(index); // 2
五、数组查找与判断
1. includes()
判断数组是否包含某个值
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(4); // false
2. indexOf() 和 lastIndexOf()
查找元素在数组中的位置（不存在返回-1）
let arr = [7, 8, 9, 8, 10];
arr.indexOf(8); // 1 (第一次出现)
arr.lastIndexOf(8); // 3 (最后一次出现)
arr.indexOf(12); // -1 (未找到)
arr.indexOf(8); // 1 (第一次出现)
arr.lastIndexOf(8); // 3 (最后一次出现)
arr.indexOf(12); // -1 (未找到)
3. some() 和 every()
测试数组元素是否满足条件
// some: 至少有一个元素满足条件
[1, 2, 3].some(x => x > 2); // true
// every: 所有元素都满足条件
[1, 2, 3].every(x => x > 0); // true
[1, 2, 3].every(x => x > 1); // false
[1, 2, 3].some(x => x > 2); // true
// every: 所有元素都满足条件
[1, 2, 3].every(x => x > 0); // true
[1, 2, 3].every(x => x > 1); // false
六、数组转换与排序
1. join()
将数组所有元素连接成字符串
[‘Fire’, ‘Air’, ‘Water’].join(); // “Fire,Air,Water”
[‘Fire’, ‘Air’, ‘Water’].join(”); // “FireAirWater”
[‘Fire’, ‘Air’, ‘Water’].join(‘-‘);// “Fire-Air-Water”
[‘Fire’, ‘Air’, ‘Water’].join(”); // “FireAirWater”
[‘Fire’, ‘Air’, ‘Water’].join(‘-‘);// “Fire-Air-Water”
2. toString()
返回数组的字符串表示（逗号分隔）
[1, 2, ‘a’, ‘1a’].toString(); // “1,2,a,1a”
3. sort()
对数组元素进行排序（默认按字符串Unicode码点）
// 默认排序（字符串）
[‘Google’, ‘Apple’, ‘Microsoft’].sort();
// [‘Apple’, ‘Google’, ‘Microsoft’]
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]（注意！）
// 数字排序需自定义函数
[10, 20, 1, 2].sort((a, b) => a – b); // [1, 2, 10, 20]
[‘Google’, ‘Apple’, ‘Microsoft’].sort();
// [‘Apple’, ‘Google’, ‘Microsoft’]
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]（注意！）
// 数字排序需自定义函数
[10, 20, 1, 2].sort((a, b) => a – b); // [1, 2, 10, 20]
4. reverse()
反转数组中元素的顺序
[1, 2, 3].reverse(); // [3, 2, 1]
数组方法总结
JavaScript数组提供了30+种方法，掌握核心方法即可应对大多数场景
// 添加/删除：push/pop/unshift/shift/splice
// 遍历：forEach/map/filter/find/reduce
// 查找：indexOf/lastIndexOf/includes
// 判断：some/every
// 转换：join/toString
// 排序：sort/reverse
// 其他：concat/slice/Array.isArray
// 遍历：forEach/map/filter/find/reduce
// 查找：indexOf/lastIndexOf/includes
// 判断：some/every
// 转换：join/toString
// 排序：sort/reverse
// 其他：concat/slice/Array.isArray