数组和数组操作

通过构建一个健康餐食追踪器来学习 JavaScript 数组，该追踪器可存储每日卡路里并帮助你查看每周总计。

导入

数组和数组操作

通过构建一个健康餐食追踪器来学习 JavaScript 数组，该追踪器可存储每日卡路里并帮助你查看每周总计。

...

代码示例

1早餐: 400  
2午餐: 600

代码示例

1let meals = [400, 600, 300];

1let meals = [350, 600, 800];
2
3console.log("早餐: " + meals[0]);
4console.log("午餐: " + meals[1]);
5console.log("晚餐: " + meals[2]);

1let meals = [350, 600, 800];
2
3meals.push(450); // 添加零食
4console.log(meals);

1let meals = [350, 600, 800];
2console.log(meals);
3
4let lastMeal = meals.pop();
5
6console.log("已移除的餐食: " + lastMeal);
7console.log(meals);

1let meals = [350, 600, 800];
2
3console.log(meals.includes(600));   // true?
4console.log(meals.includes(1000));  // false?

PageFlux AI 助手

👋 你好！我是 PageFlux AI 助手，专门帮助您理解课程内容。有什么问题尽管问我吧！

💡 选中文本后点击"AI 询问"，或 Ctrl+Enter 发送消息

嘿，AI，创建一个 HTML 页面，让我可以通过输入框和按钮添加每餐的卡路里。还需要一个按钮，用于从列表中删除最后一餐。每次新增条目都应在列表中显示，页面还应显示累计总卡路里和平均卡路里。

No configuration found for ID: d5573a5b592389abdbdac70e7faef06db5f37a66fc5bb7e4544b1929166d3e02

1<!DOCTYPE html>
2<html>
3<head>
4  <title>餐食追踪器</title>
5</head>
6<body>
7  <h2>健康餐食追踪器</h2>
8
9  <!-- 输入框和添加按钮 -->
10  <input type="number" id="calories" placeholder="输入卡路里">
11  <button onclick="addMeal()">添加餐食</button>
12  <button onclick="removeMeal()">删除最后一餐</button>
13
14  <!-- 餐食和统计信息将在此处显示 -->
15  <ul id="mealList"></ul>
16  <p id="totals"></p>
17
18  <script>
19    let meals = [];
20
21    function addMeal() {
22      let cal = Number(document.getElementById('calories').value);
23      if (!isNaN(cal) && cal > 0) {
24        meals.push(cal); // 添加到数组
25        updateDisplay();
26      }
27      document.getElementById('calories').value = ''; // 重置输入框
28    }
29
30    function removeMeal() {
31      meals.pop(); // 删除最后一项
32      updateDisplay();
33    }
34
35    function updateDisplay() {
36      let mealList = document.getElementById('mealList');
37      mealList.innerHTML = "";
38      let total = 0;
39
40      for (let i = 0; i < meals.length; i++) {
41        let li = document.createElement('li');
42        li.textContent = "餐食 " + (i + 1) + ": " + meals[i] + " 卡路里";
43        mealList.appendChild(li);
44        total += meals[i];
45      }
46
47      let average = meals.length > 0 ? total / meals.length : 0;
48      document.getElementById('totals').innerHTML =
49        "总计: " + total + " 卡路里<br>" +
50        "平均: " + average.toFixed(2) + " 卡路里";
51    }
52  </script>
53</body>
54</html>

1<!DOCTYPE html>
2<html>
3<head>
4  <title>餐食追踪器</title>
5</head>
6<body>
7  <h2>健康餐食追踪器</h2>
8
9  <!-- 输入框和添加按钮 -->
10  <input type="number" id="calories" placeholder="输入卡路里">
11  <button onclick="addMeal()">添加餐食</button>
12  <button onclick="removeMeal()">删除最后一餐</button>
13
14  <!-- 餐食和统计信息将在此处显示 -->
15  <ul id="mealList"></ul>
16  <p id="totals"></p>
17
18  <script>
19    let meals = [];
20
21    function addMeal() {
22      let cal = Number(document.getElementById('calories').value);
23      if (!isNaN(cal) && cal > 0) {
24        meals.push(cal); // 添加到数组
25        updateDisplay();
26      }
27      document.getElementById('calories').value = ''; // 重置输入框
28    }
29
30    function removeMeal() {
31      meals.pop(); // 删除最后一项
32      updateDisplay();
33    }
34
35    function updateDisplay() {
36      let mealList = document.getElementById('mealList');
37      mealList.innerHTML = "";
38      let total = 0;
39
40      for (let i = 0; i < meals.length; i++) {
41        let li = document.createElement('li');
42        li.textContent = "餐食 " + (i + 1) + ": " + meals[i] + " 卡路里";
43        mealList.appendChild(li);
44        total += meals[i];
45      }
46
47      let average = meals.length > 0 ? total / meals.length : 0;
48      document.getElementById('totals').innerHTML =
49        "总计: " + total + " 卡路里<br>" +
50        "平均: " + average.toFixed(2) + " 卡路里";
51    }
52  </script>
53</body>
54</html>

No configuration found for ID: 1582950f69c9a55f826efd0e7d4d04b59919dc47af0aa5f3c52fbfddff08c8d6

健康餐食追踪器

```

<!DOCTYPE html> <html> <head> <title>餐食追踪器</title> </head> <body> <h2>健康餐食追踪器</h2>

<input type=“number” id=“calories” placeholder=“输入卡路里”> <button onclick=“addMeal()”>添加餐食</button> <button onclick=“removeMeal()”>删除最后一餐</button>

<ul id=“mealList”></ul> <p id=“totals”></p> <p id=“summary”></p>

1function addMeal() {
2  let cal = Number(document.getElementById('calories').value);
3  if (!isNaN(cal) && cal > 0) {
4    meals.push(cal); // 添加到数组
5    updateDisplay();
6  }
7  document.getElementById('calories').value = ''; // 重置输入框
8}
9function removeMeal() {
10meals.pop(); // 删除最后一项
11updateDisplay();
12}
13function updateDisplay() {
14let mealList = document.getElementById('mealList');
15let totals = document.getElementById('totals');
16let summary = document.getElementById('summary');
17mealList.innerHTML = "";
18let total = 0;
19// 显示餐食
20for (let i = 0; i < meals.length; i++) {
21let li = document.createElement('li');
22li.textContent = "餐食 " + (i + 1) + ": " + meals[i] + " 卡路里";
23mealList.appendChild(li);
24total += meals[i];
25}
26// 计算平均值
27let average = meals.length > 0 ? total / meals.length : 0;
28// 更新总计
29totals.innerHTML =
30"总计: " + total + " 卡路里<br>" +
31"平均: " + average.toFixed(2) + " 卡路里";
32// 查找并显示最高餐食
33if (meals.length === 0) {
34summary.textContent = "ℹ 尚未记录任何餐食。";
35} else {
36let maxMeal = meals[0];
37for (let cal of meals) {
38if (cal > maxMeal) {
39maxMeal = cal;
40}
41}
42summary.textContent = "您摄入最高的餐食有 " + maxMeal + " 卡路里。";
43}
44}

</script> </body> </html>

循环与重复

用于分类的对象

JavaScript 入门

变量、数据类型和输入

逻辑与 If-Else

循环与重复

数据结构

毕业项目：预算跟踪器

数组和数组操作