商用網站架設實務

LESSON-15 · solution

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

這一頁不是直接複製答案;先逐檔看差異、修改原因與驗收證據,再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據anchor 指出下一個動作。

Starter3 個小成果
Checkpoint一個核心缺口
Solution4 個差異

開始前確認

這一頁的結果:所有相關檔案可開啟或閱讀;沒有 TODOCHECKPOINT 或 placeholder;能說明每個檔案為何改動

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

會用到的檔案:index.htmlstyle.cssmain.js

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

照這個順序做

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

差異 1

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

目的

先固定資料契約:每筆 service 都用同一組欄位,後面的 mapfilter 才能讀到一致的資料。

修改檔案

main.js

程式碼位置

services array

現在要做:先對照差異,再檢查 在 main.js 的「services array」對照這項變更:const services = [ { name: "到府諮詢", price: 1200, featured: true }, { name: "定期維護", price: 800, featured: false }, { name: "安心檢查", price: 600, featured: true }, ];

貼上位置: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 是布林值

卡住時先看這裡

常見錯誤:只複製完整答案,卻沒有先理解這一項差異的責任。

第一個檢查:只對照目前差異指定的檔案與 anchor。

差異 2

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

目的

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

修改檔案

main.js

程式碼位置

map result

現在要做:先對照差異,再檢查 在 main.js 的「map result」對照這項變更:const names = services.map((service) => service.name); console.log(names);

貼上位置:main.jsmap result 區塊

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

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

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

卡住時先看這裡

常見錯誤:只複製完整答案,卻沒有先理解這一項差異的責任。

第一個檢查:只對照目前差異指定的檔案與 anchor。

差異 3

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

目的

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

修改檔案

main.js

程式碼位置

renderResult

現在要做:先對照差異,再檢查 在 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);

貼上位置: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 筆。

卡住時先看這裡

常見錯誤:只複製完整答案,卻沒有先理解這一項差異的責任。

第一個檢查:只對照目前差異指定的檔案與 anchor。

差異 4

讓推薦清單只包含真正被標記的服務,並練習明確的布林條件;原始 services 與 names 都不被改寫。

目的

讓推薦清單只包含真正被標記的服務,並練習明確的布林條件;原始 services 與 names 都不被改寫。

修改檔案

main.js

程式碼位置

filter predicate

現在要做:先對照差異,再檢查 在 main.js 的「filter predicate」對照這項變更:const featuredServices = services.filter((service) => service.featured === true); console.log(featuredServices);

貼上位置:main.jsfilter predicate 區塊

const featuredServices = services.filter((service) => service.featured === true);
console.log(featuredServices);

預期結果:featuredServices 只包含到府諮詢與安心檢查兩筆;按整理按鈕後 #featured-list 顯示兩筆,#status 顯示推薦 2 項,services.length 仍為 3。

驗收證據:Console 展開 featuredServices,確認長度為 2、每筆 featured 都是 true;再按整理觀察兩個清單與 status。

卡住時先看這裡

常見錯誤:只複製完整答案,卻沒有先理解這一項差異的責任。

第一個檢查:只對照目前差異指定的檔案與 anchor。

階段檔案

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

開啟 solution 的可執行入口

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|陣列與物件|solution</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、filter、畫面清單與原始資料未改寫的驗收。</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、用 mapfilter 整理,再把結果接到可觀察出口。

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

const services = [
  { name: "到府諮詢", price: 1200, featured: true },
  { name: "定期維護", price: 800, featured: false },
  { name: "安心檢查", price: 600, featured: true },
];
const names = services.map((service) => service.name);
const featuredServices = services.filter((service) => service.featured === true);
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() {
  renderList(serviceList, services);
  renderList(featuredList, featuredServices);
  status.textContent = "共 " + services.length + " 項服務,推薦 " + featuredServices.length + " 項";
  const unchanged = JSON.stringify(services) === originalServices;
  console.log({ services, names, featuredServices, unchanged });
}
function resetResult() {
  serviceList.replaceChildren();
  featuredList.replaceChildren();
  status.textContent = "尚未整理";
}
renderButton.addEventListener("click", renderResult);
resetButton.addEventListener("click", resetResult);

完成驗收

下一步

Solution 對照完成後,回到 README 整理證據,並準備下一堂課的先備知識。

回到 README,整理本堂證據並銜接下一堂