JavaScript数组
数组是JavaScript中的一种特殊对象，用于存储多个值的有序集合。数组可以包含任何类型的值，包括数字、字符串、对象、函数等。
数组的创建
JavaScript提供了多种创建数组的方式。
数组字面量
使用方括号[]创建数组：
javascript
const fruits = ["苹果", "香蕉", "橙子"];
const mixed = [1, "hello", true, null, { name: "John" }];
const empty = [];
Array构造函数
使用Array构造函数创建数组：
javascript
const fruits = new Array("苹果", "香蕉", "橙子");
const numbers = new Array(1, 2, 3, 4, 5);
// 创建指定长度的空数组
const emptyArray = new Array(5);
Array.of()
ES6引入的Array.of()方法，用于创建包含任意数量参数的数组：
javascript
const numbers = Array.of(1, 2, 3, 4, 5);
const singleElement = Array.of(1); // [1]
Array.from()
ES6引入的Array.from()方法，用于将类数组对象或可迭代对象转换为数组：
javascript
// 转换字符串
const chars = Array.from("hello"); // ["h", "e", "l", "l", "o"]
// 转换类数组对象
const arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };
const array = Array.from(arrayLike); // ["a", "b", "c"]
// 转换Set
const set = new Set([1, 2, 3]);
const arrayFromSet = Array.from(set); // [1, 2, 3]
// 转换Map
const map = new Map([["a", 1], ["b", 2]]);
const arrayFromMap = Array.from(map); // [["a", 1], ["b", 2]]
// 使用映射函数
const doubled = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]
数组的访问
索引访问
使用索引访问数组元素，索引从0开始：
javascript
const fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits[0]); // 苹果
console.log(fruits[1]); // 香蕉
console.log(fruits[2]); // 橙子
数组长度
使用length属性获取或设置数组的长度：
javascript
const fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits.length); // 3
// 修改数组长度
fruits.length = 2;
console.log(fruits); // ["苹果", "香蕉"]
// 扩展数组
fruits.length = 5;
console.log(fruits); // ["苹果", "香蕉", undefined, undefined, undefined]
数组的修改
添加元素
javascript
const fruits = ["苹果", "香蕉"];
// 在末尾添加元素
fruits.push("橙子");
console.log(fruits); // ["苹果", "香蕉", "橙子"]
// 在开头添加元素
fruits.unshift("草莓");
console.log(fruits); // ["草莓", "苹果", "香蕉", "橙子"]
// 在指定位置添加元素
fruits.splice(2, 0, "葡萄");
console.log(fruits); // ["草莓", "苹果", "葡萄", "香蕉", "橙子"]
删除元素
javascript
const fruits = ["草莓", "苹果", "葡萄", "香蕉", "橙子"];
// 删除末尾元素
const lastFruit = fruits.pop();
console.log(lastFruit); // 橙子
console.log(fruits); // ["草莓", "苹果", "葡萄", "香蕉"]
// 删除开头元素
const firstFruit = fruits.shift();
console.log(firstFruit); // 草莓
console.log(fruits); // ["苹果", "葡萄", "香蕉"]
// 删除指定位置的元素
const removedFruits = fruits.splice(1, 1);
console.log(removedFruits); // ["葡萄"]
console.log(fruits); // ["苹果", "香蕉"]
修改元素
javascript
const fruits = ["苹果", "香蕉"];
// 修改指定索引的元素
fruits[1] = "橙子";
console.log(fruits); // ["苹果", "橙子"]
// 使用splice修改元素
fruits.splice(0, 1, "草莓");
console.log(fruits); // ["草莓", "橙子"]
数组的遍历
for循环
javascript
const fruits = ["苹果", "香蕉", "橙子"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
for…of循环
ES6引入的for...of循环，用于遍历可迭代对象：
javascript
const fruits = ["苹果", "香蕉", "橙子"];
for (const fruit of fruits) {
console.log(fruit);
}
forEach方法
javascript
const fruits = ["苹果", "香蕉", "橙子"];
fruits.forEach((fruit, index, array) => {
console.log(`索引 ${index}: ${fruit}`);
});
map方法
创建一个新数组，其结果是对原数组的每个元素应用回调函数：
javascript
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
filter方法
创建一个新数组，包含通过回调函数测试的所有元素：
javascript
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
reduce方法
对数组中的所有元素执行一个 reducer 函数，将其结果汇总为单个返回值：
javascript
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15
数组的常用方法
数组转换方法
join()
将数组的所有元素连接成一个字符串：
javascript
const fruits = ["苹果", "香蕉", "橙子"];
const joined = fruits.join(", ");
console.log(joined); // "苹果, 香蕉, 橙子"
toString()
将数组转换为字符串：
javascript
const fruits = ["苹果", "香蕉", "橙子"];
const str = fruits.toString();
console.log(str); // "苹果,香蕉,橙子"
toLocaleString()
将数组转换为本地化字符串：
javascript
const numbers = [1000, 2000, 3000];
const str = numbers.toLocaleString("zh-CN");
console.log(str); // "1,000,2,000,3,000"
数组排序方法
sort()
对数组元素进行排序：
javascript
const fruits = ["香蕉", "苹果", "橙子"];
fruits.sort();
console.log(fruits); // ["苹果", "橙子", "香蕉"]
// 数字排序
const numbers = [3, 1, 5, 2, 4];
numbers.sort((a, b) => a - b); // 升序
console.log(numbers); // [1, 2, 3, 4, 5]
numbers.sort((a, b) => b - a); // 降序
console.log(numbers); // [5, 4, 3, 2, 1]
reverse()
反转数组元素的顺序：
javascript
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]
数组搜索方法
indexOf()
返回元素在数组中第一次出现的索引，如果不存在则返回-1：
javascript
const fruits = ["苹果", "香蕉", "橙子", "香蕉"];
console.log(fruits.indexOf("香蕉")); // 1
console.log(fruits.indexOf("葡萄")); // -1
lastIndexOf()
返回元素在数组中最后一次出现的索引，如果不存在则返回-1：
javascript
const fruits = ["苹果", "香蕉", "橙子", "香蕉"];
console.log(fruits.lastIndexOf("香蕉")); // 3
includes()
检查数组是否包含指定的元素：
javascript
const fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits.includes("香蕉")); // true
console.log(fruits.includes("葡萄")); // false
find()
返回数组中第一个满足回调函数的元素：
javascript
const numbers = [1, 2, 3, 4, 5];
const even = numbers.find(num => num % 2 === 0);
console.log(even); // 2
findIndex()
返回数组中第一个满足回调函数的元素的索引：
javascript
const numbers = [1, 2, 3, 4, 5];
const evenIndex = numbers.findIndex(num => num % 2 === 0);
console.log(evenIndex); // 1
数组判断方法
every()
检查数组的所有元素是否都满足回调函数：
javascript
const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true
some()
检查数组中是否有至少一个元素满足回调函数：
javascript
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
数组创建方法
slice()
创建一个新数组，包含原数组的一部分：
javascript
const fruits = ["苹果", "香蕉", "橙子", "葡萄"];
// slice(start, end)，end不包含
const citrus = fruits.slice(1, 3);
console.log(citrus); // ["香蕉", "橙子"]
// 从start到末尾
const fromIndex = fruits.slice(2);
console.log(fromIndex); // ["橙子", "葡萄"]
// 创建数组副本
const copy = fruits.slice();
console.log(copy); // ["苹果", "香蕉", "橙子", "葡萄"]
concat()
合并两个或多个数组：
javascript
const fruits = ["苹果", "香蕉"];
const moreFruits = ["橙子", "葡萄"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ["苹果", "香蕉", "橙子", "葡萄"]
数组填充方法
fill()
用指定的值填充数组：
javascript
const numbers = [1, 2, 3, 4, 5];
// 填充所有元素
numbers.fill(0);
console.log(numbers); // [0, 0, 0, 0, 0]
// 填充指定范围
const numbers2 = [1, 2, 3, 4, 5];
numbers2.fill(0, 1, 4); // fill(value, start, end)
console.log(numbers2); // [1, 0, 0, 0, 5]
数组迭代方法
entries()
返回一个包含数组键值对的迭代器：
javascript
const fruits = ["苹果", "香蕉", "橙子"];
const iterator = fruits.entries();
for (const [index, value] of iterator) {
console.log(index, value);
}
// 0 "苹果"
// 1 "香蕉"
// 2 "橙子"
keys()
返回一个包含数组索引的迭代器：
javascript
const fruits = ["苹果", "香蕉", "橙子"];
const iterator = fruits.keys();
for (const index of iterator) {
console.log(index);
}
// 0
// 1
// 2
values()
返回一个包含数组值的迭代器：
javascript
const fruits = ["苹果", "香蕉", "橙子"];
const iterator = fruits.values();
for (const value of iterator) {
console.log(value);
}
// "苹果"
// "香蕉"
// "橙子"
数组的高级操作
数组扁平化
flat()
ES10引入的flat()方法，用于将嵌套数组扁平化：
javascript
const nestedArray = [1, [2, 3], [4, [5, 6]]];
// 默认扁平化一层
const flatArray1 = nestedArray.flat();
console.log(flatArray1); // [1, 2, 3, 4, [5, 6]]
// 指定扁平化层数
const flatArray2 = nestedArray.flat(2);
console.log(flatArray2); // [1, 2, 3, 4, 5, 6]
// 扁平化所有层
const deeplyNested = [1, [2, [3, [4]]]];
const flatArray3 = deeplyNested.flat(Infinity);
console.log(flatArray3); // [1, 2, 3, 4]
flatMap()
ES10引入的flatMap()方法，先对数组进行map操作，然后对结果进行flat()操作（扁平化一层）：
javascript
const numbers = [1, 2, 3, 4];
const result = numbers.flatMap(num => [num * 2, num * 3]);
console.log(result); // [2, 3, 4, 6, 6, 9, 8, 12]
数组的解构赋值
ES6引入的解构赋值语法，可以方便地从数组中提取值：
javascript
const fruits = ["苹果", "香蕉", "橙子"];
const [first, second, third] = fruits;
console.log(first); // "苹果"
console.log(second); // "香蕉"
console.log(third); // "橙子"
// 跳过元素
const [, , orange] = fruits;
console.log(orange); // "橙子"
// 剩余元素
const [apple, ...rest] = fruits;
console.log(apple); // "苹果"
console.log(rest); // ["香蕉", "橙子"]
扩展运算符
ES6引入的扩展运算符...，用于将数组展开：
javascript
const fruits1 = ["苹果", "香蕉"];
const fruits2 = ["橙子", "葡萄"];
// 合并数组
const allFruits = [...fruits1, ...fruits2];
console.log(allFruits); // ["苹果", "香蕉", "橙子", "葡萄"]
// 复制数组
const fruitsCopy = [...fruits1];
// 向数组添加元素
const moreFruits = [...fruits1, "橙子"];
console.log(moreFruits); // ["苹果", "香蕉", "橙子"]
数组的最佳实践
- 使用数组字面量：优先使用
[]创建数组，而不是new Array() - 避免稀疏数组：不要创建有空洞的数组，如
[1, , 3] - 使用const声明数组：如果数组引用不需要改变，使用
const声明 - 选择合适的遍历方法：根据需求选择
forEach、map、filter等方法 - 注意数组方法的副作用：有些方法会修改原数组（如
push、pop、splice、sort、reverse），有些方法会返回新数组（如map、filter、slice、concat）
常见数组操作示例
求和
javascript
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15
求平均值
javascript
const numbers = [1, 2, 3, 4, 5];
const average = numbers.reduce((acc, num) => acc + num, 0) / numbers.length;
console.log(average); // 3
去重
javascript
const numbers = [1, 2, 2, 3, 4, 4, 5];
// 使用Set
const unique = [...new Set(numbers)];
console.log(unique); // [1, 2, 3, 4, 5]
// 使用filter
const unique = numbers.filter((value, index, array) => array.indexOf(value) === index);
console.log(unique); // [1, 2, 3, 4, 5]
查找最大值和最小值
javascript
const numbers = [1, 2, 3, 4, 5];
const max = Math.max(...numbers);
console.log(max); // 5
const min = Math.min(...numbers);
console.log(min); // 1
继续学习：JavaScript字符串
最后更新：2026-02-08