第七週報名表單檢討

在第七週報名表單（作業一）中，原先是用陣列儲存資料：

const alertMessage = []; // 裝問題與回答
.
.
.
alertMessage.push({ question, answer: input.value });
.
.
.
// 把問題和回答改成一行行的格式
let str = '';
alertMessage.forEach((message) => {
  str += `${message.question}： ${message.answer} \n`;
});

得出的 alertMessage 會是：

[
  {question: "暱稱", answer: "nickname"},
  {question: "電子郵件", answer: "email"},
  {question: "手機號碼", answer: "phonenumber"},
  {question: "怎麼知道這個活動的？", answer: "how"},
  {question: "報名類型", answer: " 躺在床上用想像力實作"}
]

而改用物件存取資料：

const alertMessage = {}; // 裝問題與回答
.
.
.
// 用 Object 裝資料
alertMessage[question] = input.value;
.
.
.
// 把資料從 Object 拿出來
// 把問題和回答改成一行行的格式
let str = '';
for (let i = 0; i < Object.keys(alertMessage).length; i += 1) {
  if (i === Object.keys(alertMessage).length - 1) {
    str += `${Object.keys(alertMessage)[i]}： ${Object.values(alertMessage)[i]}`
  } else {
    str += `${Object.keys(alertMessage)[i]}： ${Object.values(alertMessage)[i]} \n`
  }
}

得出的 alertMessage 會是：

{
  暱稱: "nickname",
  電子郵件: "email",
  手機號碼: "phonenumber",
  怎麼知道這個活動的？: "how",
  報名類型: " 躺在床上用想像力實作"
}

改成物件存取資料的好處是當今天如果只想取電子郵件的值時，可以 alertMessage["電子郵件"] 去取到特定的資料。拿資料的手續會比一開始用陣列存要來得直觀。

• Object.keys() / Object.values() ：可以跑過整個物件的資訊。
• Object[key] = value：設定物件的 key 及 value。

參考：

1. 〈JavaScript：使用 Array.map、Object.values 和 Object.keys 處理一連串的資料〉
2. 〈3 Methods to Loop Over Object Properties in JavaScript in Seconds〉