Skip to content

JavaScript 数组

创建、索引与遍历数组,以及核心的 map、filter、reduce 方法。

你将学到

  • 创建数组并按索引访问元素
  • length 属性与常用变更方法(push、pop、shift、unshift)
  • 函数式遍历:map、filter、reduce、forEach
  • 用 find、some、every、includes 查找与判断
  • 展开语法(...)与数组解构

概念讲解

什么是数组?

数组是值的有序、索引列表。在 JavaScript 中,数组是一种特殊的对象,其键是数字索引。

const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]);      // "apple"  ← 从 0 开始
console.log(fruits.length);  // 3

添加与删除元素

const stack = [];
stack.push("a");      // 添加到末尾 → ["a"]
stack.push("b");      // ["a", "b"]
stack.pop();          // 从末尾移除 → ["a"]

const queue = [1, 2, 3];
queue.shift();        // 从头部移除 → [2, 3]
queue.unshift(0);     // 添加到头部 → [0, 2, 3]

三大方法:map、filter、reduce

这些函数式方法是现代 JavaScript 数据处理的核心。它们不会修改原数组。

  • map——将每个元素转换为新数组,长度不变。
  • filter——只保留通过测试的元素。
  • reduce——将所有元素累积为单个值。
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map((n) => n * 2);
// [2, 4, 6, 8, 10]

const evens = numbers.filter((n) => n % 2 === 0);
// [2, 4]

const total = numbers.reduce((sum, n) => sum + n, 0);
// 15

查找与判断

const users = [
  { name: "Ada", age: 36 },
  { name: "Alan", age: 41 },
];

users.find((u) => u.name === "Ada");     // { name: "Ada", age: 36 }
users.some((u) => u.age > 40);           // true — 至少一个
users.every((u) => u.age > 30);          // true — 全部满足
[1, 2, 3].includes(2);                   // true

展开与解构

const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b]; // [1, 2, 3, 4]

const [first, second] = [10, 20]; // first=10, second=20

展开运算符 ... 也是复制数组而不修改原数组的标准方式:const copy = [...original];。

示例代码

              const products = [
  { name: "Laptop", price: 999, inStock: true },
  { name: "Phone", price: 699, inStock: true },
  { name: "Tablet", price: 399, inStock: false },
  { name: "Monitor", price: 249, inStock: true },
];

// filter:只保留有库存的商品
const available = products.filter((p) => p.inStock);

// map:只提取名称
const names = available.map((p) => p.name);
console.log("Available:", names);

// reduce:有库存商品的总价
const totalValue = available.reduce((sum, p) => sum + p.price, 0);
console.log("Total inventory value:", totalValue);

// find:第一个超过 $500 的商品
const premium = products.find((p) => p.price > 500);
console.log("First premium item:", premium.name);

// 用展开不可变地添加新商品
const withNew = [...products, { name: "Keyboard", price: 79, inStock: true }];
console.log("Count after adding:", withNew.length);

这个真实示例过滤有库存商品、映射为名称、归约为总价、查找第一个高端商品,并用展开不可变地添加新商品。

动手试一试

  • JSON Formatter

    对象数组是常见的 API 响应——格式化并检查它们。

  • CSV to JSON

    把 CSV 数据转成 JavaScript 对象数组。

常见错误

错误写法

用经典 for 循环时出现差一错误

正确做法

数组从 0 开始索引,最后一个元素在 length - 1。优先使用 for...of 或函数式方法(map、filter),它们完全避免了手动索引。

错误写法

本想复制数组却修改了原数组

正确做法

push、sort、splice 等方法会就地修改。需要保留原数组时使用展开([...arr])或非变更替代方法(如 toSorted(),ES2023)。

相关资源

相关工具

  • JSON to CSV

    把 JavaScript 风格的对象数组转成 CSV。

相关代码片段

练习 JavaScript 数组

2 个练习

练习 JavaScript 数组

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误