欢迎来到JavaScript的数据集散中心!数组就像一个个集装箱,能帮我们把大量数据整齐地码放起来。让我们开始学习如何高效搬运这些"数据集装箱"吧!
7.1 数组基础操作 - 集装箱的装货卸货
数组就像火车车厢- 每节车厢可以装不同的东西:
// 创建数组的三种方式
let fruits = ["苹果", "香蕉", "橙子"]; // 最常用
let numbers = new Array(1, 2, 3); // 使用Array构造函数
let empty = []; // 空数组
// 访问元素(从0开始计数!)
console.log(fruits[0]); // "苹果"
console.log(fruits[2]); // "橙子"
// 修改元素
fruits[1] = "芒果";
console.log(fruits); // ["苹果", "芒果", "橙子"]
// 数组长度
console.log(fruits.length); // 3
生活小例子 - 购物车:
let cart = ["牛奶", "面包", "鸡蛋"];
// 添加商品到购物车
cart[3] = "苹果"; // 方式1:直接指定下标
cart.push("香蕉"); // 方式2:添加到末尾(更常用)
// 移除最后一件商品
let removedItem = cart.pop();
console.log(`移除的商品:${removedItem}`);
// 查看购物车
console.log("当前购物车:", cart);
7.2 数组遍历方法 - 集装箱的自动化流水线
1. for循环 - 传统方式
for (let i = 0; i < fruits.length; i++) {
console.log(`${i+1}. ${fruits[i]}`);
}
2. forEach - 现代函数式
fruits.forEach((fruit, index) => {
console.log(`${index+1}. ${fruit}`);
});
3. for...of - ES6简洁语法
for (let fruit of fruits) {
console.log(fruit);
}
实战例子 - 成绩处理:
let scores = [85, 92, 78, 60];
let total = 0;
scores.forEach(score => {
total += score;
});
console.log(`平均分:${total / scores.length}`);
7.3 数组高阶函数 - 集装箱的智能分拣系统
map - 数据变形金刚
let prices = [10, 20, 30];
let discounted = prices.map(price => price * 0.8);
console.log(discounted); // [8, 16, 24]
filter - 数据过滤器
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]
reduce - 数据聚合器
let cartItems = [
{name: "苹果", price: 5},
{name: "香蕉", price: 3},
{name: "橙子", price: 4}
];
let totalCost = cartItems.reduce((sum, item) => sum + item.price, 0);
console.log(`总价:${totalCost}元`); // 12元
综合应用 - 学生数据分析:
let students = [
{name: "小明", score: 85},
{name: "小红", score: 92},
{name: "小刚", score: 78}
];
// 获取所有及格(>=60)学生的名字
let passedNames = students
.filter(s => s.score >= 60)
.map(s => s.name);
console.log("及格学生:", passedNames);
7.4 Set与Map - 特种集装箱
Set - 唯一值集合
let tags = new Set();
tags.add("JavaScript");
tags.add("HTML");
tags.add("CSS");
tags.add("JavaScript"); // 重复值不会被添加
console.log(tags.size); // 3
console.log(tags.has("HTML")); // true
Map - 键值对集合
let userSettings = new Map();
userSettings.set("theme", "dark");
userSettings.set("fontSize", 14);
userSettings.set("notifications", true);
console.log(userSettings.get("theme")); // "dark"
console.log(userSettings.size); // 3
实际应用场景:
// 使用Set统计不重复单词
let text = "apple orange banana apple orange";
let words = text.split(" ");
let uniqueWords = new Set(words);
console.log(`共有${uniqueWords.size}个不重复单词`);
// 使用Map存储产品价格
let priceMap = new Map([
["apple", 5],
["banana", 3],
["orange", 4]
]);
console.log(`苹果价格:${priceMap.get("apple")}元`);
本章总结:
- 数组是有序的数据集合
- 遍历方法处理每个元素
- 高阶函数实现复杂转换
- Set存储唯一值
- Map存储键值对
实战练习:
- 将温度数组[0, 25, 100]转换为华氏度(公式:F = C×9/5 +32)
- 过滤出[12, 5, 8, 130, 44]中大于10的数字
- 使用Map实现一个简单的英语词典
生活剧场:
// 餐厅点餐系统
let menu = [
{id: 1, name: "汉堡", price: 15, stock: 10},
{id: 2, name: "薯条", price: 8, stock: 20},
{id: 3, name: "可乐", price: 6, stock: 15}
];
function takeOrder(itemId, quantity) {
let item = menu.find(i => i.id === itemId);
if (!item || item.stock < quantity) {
console.log("点餐失败:库存不足");
return false;
}
item.stock -= quantity;
console.log(`成功点餐:${quantity}份${item.name}`);
return true;
}
// 顾客点餐
takeOrder(1, 2); // 2个汉堡
takeOrder(3, 10); // 10杯可乐
// 查看剩余库存
console.log("当前库存:");
menu.forEach(item => {
console.log(`${item.name}剩余${item.stock}份`);
});
下一章我们将探索JavaScript的内置对象,解锁更多原生超能力!准备好成为JavaScript武器大师了吗?