LESSON-15 · starter

JavaScript 基礎：陣列、物件與資料整理

你會依序完成3個本堂專屬微步驟；每一步只修改一個責任，看到結果後才進下一步。這頁用可觀察證據和 anchor 指出下一個動作。

Starter3 個小成果

Checkpoint一個核心缺口

Solution4 個差異

開始前確認

這一頁的結果：入口頁可以開啟

工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、Elements、Console、資料結果與 Network狀態。

會用到的檔案：index.html、style.css、main.js

本堂焦點：用陣列與物件整理服務資料並產生可用結果

照這個順序做

一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。

目的

先固定資料契約：每筆 service 都用同一組欄位，後面的 map 與 filter 才能讀到一致的資料。

修改檔案

main.js

程式碼位置

services array

現在要做：請在 main.js 的「services array」位置完成：建立三筆服務物件的 services 陣列，每筆固定有 name、price、featured

貼上位置：main.js：services array 區塊，先保留同一檔案的其他內容。

const services = [
  { name: "到府諮詢", price: 1200, featured: true },
  { name: "定期維護", price: 800, featured: false },
  { name: "安心檢查", price: 600, featured: true },
];

預期結果：Console 展開 services 時看到三筆資料；每筆都有 name、price、featured，且資料順序清楚。

驗收證據：Console 觀察 services.length === 3，展開每筆並核對 name 是文字、price 是數字、featured 是布林值。

卡住時先看這裡

常見錯誤：把多筆資料串成一長段文字、把 price 寫成帶引號的文字、漏掉欄位，或讓同一欄位在不同物件使用不同名稱。

第一個檢查：只看第一筆與最後一筆：確認它們是 object，並逐字比對 name、price、featured。

目的

先分辨 map 是把每筆資料轉成另一種結果，不在同一步混入條件篩選。

修改檔案

main.js

程式碼位置

map result

現在要做：請在 main.js 的「map result」位置完成：用 map 產生只包含服務名稱的 names 新陣列

貼上位置：main.js：map result 區塊，先保留同一檔案的其他內容。

const names = services.map((service) => service.name);
console.log(names);

預期結果：Console 顯示 names 為三項文字，順序與 services 相同；services 的物件仍保留完整欄位。

驗收證據：Console 觀察 names.length === services.length，並確認 names[0] 是文字而不是整個物件。

卡住時先看這裡

常見錯誤：把 services.map() 的結果忘記接住、在 map 裡修改原始物件，或誤用 filter 導致數量變少。

第一個檢查：先讀 callback 的 return：它應該只回傳 service.name。

目的

讓資料處理不只停在 Console，也能透過既有按鈕與畫面出口觀察全部服務和推薦服務；Starter 的 featuredServices 先是空陣列，Checkpoint 再補上 filter。

修改檔案

main.js

程式碼位置

renderResult

現在要做：請在 main.js 的「renderResult」位置完成：把 services、featuredServices 與 names 接到狀態文字和兩個清單輸出

貼上位置：main.js：renderResult 區塊，先保留同一檔案的其他內容。

function renderResult() {
  renderList(serviceList, services);
  renderList(featuredList, featuredServices);
  status.textContent = "共 " + services.length + " 項服務，推薦 " + featuredServices.length + " 項";
  const unchanged = JSON.stringify(services) === originalServices;
  console.log({ services, names, featuredServices, unchanged });
}

renderButton.addEventListener("click", renderResult);

預期結果：點擊整理按鈕後，#status 顯示全部資料筆數與推薦筆數，#service-list 顯示三筆服務，#featured-list 會在 Checkpoint 完成後顯示兩筆推薦服務；Console 同時保留 services、names、featuredServices 與 unchanged。

驗收證據：畫面狀態文字、兩個清單的項目數、Elements 文字與 Console 結果彼此一致；Starter 可觀察推薦 0 筆，完成 Checkpoint 後變成 2 筆。

卡住時先看這裡

常見錯誤：把數字寫死、選到不存在的 id、只更新 status 沒有更新清單，或另外手寫一份和資料陣列不一致的清單。

第一個檢查：先確認 #status、#service-list、#featured-list、#render 都存在，再確認 renderResult 由整理按鈕呼叫且使用 featuredServices。

階段檔案

完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。

開啟 starter 的可執行入口

開啟index.html入口 HTML：提供狀態文字、整理／重設按鈕與兩個資料結果清單。
開啟style.css最小呈現層：讓資料結果、按鈕與窄版清單可讀；不把資料邏輯放進 CSS。
開啟main.js資料與行為：建立 services、用 map／filter 整理，再把結果接到可觀察出口。

index.html入口 HTML：提供狀態文字、整理／重設按鈕與兩個資料結果清單。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>LESSON-15｜陣列與物件｜starter</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page-shell">
    <p class="eyebrow">LESSON-15 · JavaScript 陣列與物件</p>
    <h1>服務資料整理</h1>
    <p class="page-description">請依序完成資料陣列、map 名稱清單與畫面結果出口；推薦篩選會在 Checkpoint 完成。</p>
    <section class="result-card" aria-labelledby="result-title">
      <h2 id="result-title">可觀察結果</h2>
      <p id="status" role="status">尚未整理</p>
      <button id="render" type="button">整理服務資料</button>
      <button id="reset" class="secondary" type="button">重設</button>
    </section>
    <div class="output-grid">
      <section class="result-card" aria-labelledby="all-title"><h2 id="all-title">全部服務</h2><ul id="service-list"><li>按按鈕開始</li></ul></section>
      <section class="result-card" aria-labelledby="featured-title"><h2 id="featured-title">推薦服務</h2><ul id="featured-list"><li>Checkpoint 會補上 filter</li></ul></section>
    </div>
  </main>
  <script src="main.js" defer></script>
</body>
</html>

style.css最小呈現層：讓資料結果、按鈕與窄版清單可讀；不把資料邏輯放進 CSS。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.page-shell { width: min(100% - 2rem, 760px); margin: 0 auto; padding: 2rem 0; }
.eyebrow { color: #176b87; font-weight: 800; letter-spacing: .05em; }
.page-description { color: #52657d; }
.result-card { padding: 1rem; border: 1px solid #cbd8e4; border-radius: 14px; background: #fff; }
.output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
button { margin: .5rem .5rem 0 0; padding: .65rem .9rem; border: 0; border-radius: 9px; background: #176b87; color: #fff; font: inherit; cursor: pointer; }
button.secondary { background: #64748b; }
button:focus-visible { outline: 3px solid #f1ab2c; outline-offset: 3px; }
#status { min-height: 1.7rem; color: #17643d; font-weight: 700; }
li + li { margin-top: .35rem; }
@media (max-width: 620px) { .page-shell { padding: 1rem 0; } .output-grid { grid-template-columns: 1fr; } }

main.js資料與行為：建立 services、用 map／filter 整理，再把結果接到可觀察出口。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

const services = []; // TODO-1：建立三筆都有 name、price、featured 的服務物件。
const names = []; // TODO-2：用 map 將每筆 service 轉成 service.name。
const featuredServices = [];
const originalServices = JSON.stringify(services);
const status = document.querySelector("#status");
const renderButton = document.querySelector("#render");
const resetButton = document.querySelector("#reset");
const serviceList = document.querySelector("#service-list");
const featuredList = document.querySelector("#featured-list");
function renderList(list, items) {
  list.replaceChildren();
  items.forEach((service) => {
    const item = document.createElement("li");
    item.textContent = service.name + "｜NT$ " + service.price;
    list.append(item);
  });
}
function renderResult() {
  // TODO-3：把 services、featuredServices 與 names 接到狀態文字和兩個清單輸出。
}
function resetResult() {
  serviceList.replaceChildren();
  featuredList.replaceChildren();
  status.textContent = "尚未整理";
}
renderButton.addEventListener("click", renderResult);
resetButton.addEventListener("click", resetResult);

完成驗收

入口頁可以開啟
3 個 TODO 都已完成
能展示三筆資料與欄位、map 名稱結果、filter 推薦結果、畫面狀態、原陣列未被意外改寫
留下入口網址、修改檔案、操作步驟、預期結果與實際觀察。

下一步

Starter 完成後，不要直接看 Solution；先前往 Checkpoint，自己找出最後一個核心缺口。

前往 Checkpoint，自己補最後一個核心缺口