喔唷网 - 网络从业者技术信息综合门户!

当前位置: 主页 > 教程技术 > 编程语言 > javascript

JavaScript数组与集合 数据管理的"集装箱码头"

时间 : 2025-04-23 11:53来源 : 喔唷网作者 : 喔唷教程点击 :
欢迎来到JavaScript的数据集散中心!数组就像一个个集装箱,能帮我们把大量数据整齐地码放起来。让我们开始学习如何高效搬运这些"数据集装箱"吧! 7.1 数组基础操作 - 集装箱的装货卸货 数组就像火

欢迎来到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")}元`);

本章总结

  1. 数组是有序的数据集合
  2. 遍历方法处理每个元素
  3. 高阶函数实现复杂转换
  4. Set存储唯一值
  5. Map存储键值对

实战练习

  1. 将温度数组[0, 25, 100]转换为华氏度(公式:F = C×9/5 +32)
  2. 过滤出[12, 5, 8, 130, 44]中大于10的数字
  3. 使用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武器大师了吗?

栏目列表

关联类容

热点推荐

栏目推荐

猜你喜欢