第7章：数组（Arrays）

一、导读

1.1 本章学习目标

第7章介绍JavaScript的数组。本章核心目标：

掌握数组的创建和操作：增删改查
熟练使用高阶方法：map、filter、reduce
理解数组的排序：sort、reverse
掌握展开运算符和解构
了解类数组对象

1.2 为什么本章如此重要

数组是JavaScript中最常用的数据结构。JavaScript的数组提供了丰富的高阶方法，使得数据处理变得简洁优雅。掌握这些方法是编写现代JavaScript的基础。

1.3 核心问题引导

JavaScript数组的底层实现是什么？

map、filter、reduce各有什么用途？

sort()默认按什么排序？如何自定义？

数组的哪些方法会修改原数组？

二、核心概念详解

7.1 数组基础

javascript

// 创建
let arr1 = [1, 2, 3, 4, 5];
let arr2 = new Array(5);
let arr3 = Array.from({length: 5}, (_, i) => i);

// 基本操作
arr1.push(6);       // 末尾添加
arr1.pop();         // 末尾删除
arr1.unshift(0);    // 开头添加
arr1.shift();       // 开头删除

// 查找
let numbers = [10, 20, 30, 40, 50];
console.log(numbers.indexOf(30));       // 2
console.log(numbers.find(x => x > 25)); // 30
console.log(numbers.includes(20));      // true
console.log(numbers.findIndex(x => x > 25)); // 2

7.2 高阶方法

javascript

let numbers = [1, 2, 3, 4, 5];

// map：变换每个元素
let doubled = numbers.map(x => x * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]

// filter：过滤元素
let evens = numbers.filter(x => x % 2 === 0);
console.log(evens);  // [2, 4]

// reduce：累积计算
let sum = numbers.reduce((acc, x) => acc + x, 0);
console.log(sum);  // 15

// 链式调用
let result = numbers
  .filter(x => x % 2 !== 0)
  .map(x => x * x)
  .reduce((acc, x) => acc + x, 0);
console.log(result);  // 35 (1+9+25)

// forEach：遍历（无返回值）
numbers.forEach(x => console.log(x));

// some和every
console.log(numbers.some(x => x > 3));   // true
console.log(numbers.every(x => x > 0));  // true

// flat和flatMap
let nested = [[1, 2], [3, 4], [5]];
console.log(nested.flat());  // [1, 2, 3, 4, 5]
console.log(nested.flatMap(x => x.map(y => y * 2)));  // [2, 4, 6, 8, 10]

7.3 排序和切片

javascript

// 排序
let fruits = ["banana", "apple", "cherry"];
fruits.sort();
console.log(fruits);  // ["apple", "banana", "cherry"]

// 自定义排序
let nums = [5, 2, 8, 1, 9];
nums.sort((a, b) => a - b);  // 升序
console.log(nums);  // [1, 2, 5, 8, 9]

// 切片
let arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 3));   // [2, 3]
console.log(arr.slice(-2));     // [4, 5]

// splice：修改数组
arr.splice(2, 1, 10, 20);  // 从索引2删除1个，添加10, 20
console.log(arr);  // [1, 2, 10, 20, 4, 5]

// 展开运算符
let arr4 = [1, 2, 3];
let arr5 = [...arr4, 4, 5];
console.log(arr5);  // [1, 2, 3, 4, 5]

// 数组解构
let [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first, second, rest);  // 1, 2, [3, 4, 5]

三、实战案例

3.1 数据处理管道

javascript

const students = [
  {name: "Alice", score: 90},
  {name: "Bob", score: 85},
  {name: "Charlie", score: 92},
  {name: "David", score: 78},
  {name: "Eve", score: 88}
];

// 数据处理管道
const result = students
  .filter(s => s.score >= 80)
  .sort((a, b) => b.score - a.score)
  .map(s => ({...s, grade: s.score >= 90 ? 'A' : 'B'}));

console.log(result);

// 分组
const grouped = students.reduce((acc, s) => {
  const grade = s.score >= 90 ? 'A' : s.score >= 80 ? 'B' : 'C';
  (acc[grade] = acc[grade] || []).push(s);
  return acc;
}, {});

console.log(grouped);

// 统计
const stats = {
  count: students.length,
  average: students.reduce((sum, s) => sum + s.score, 0) / students.length,
  highest: Math.max(...students.map(s => s.score)),
  lowest: Math.min(...students.map(s => s.score))
};
console.log(stats);

四、本章小结

第7章介绍了JavaScript数组：基本操作、高阶方法（map/filter/reduce）、排序、切片、展开运算符、解构。数组的高阶方法是现代JavaScript数据处理的核心。

五、思考与练习

思考题

数组的哪些方法会修改原数组？哪些返回新数组？

reduce的初始值有什么作用？

如何实现数组去重？

类数组对象如何转换为真正的数组？

编程练习

实现数组的groupBy方法。

使用reduce实现flatten（数组扁平化）。

实现一个简单的数据查询API。