第七週報名表單檢討


Posted by yunanpan on 2020-08-21

第七週報名表單(作業一)中,原先是用陣列儲存資料:

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:設定物件的 keyvalue

參考:

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









Related Posts

[12] 值 - 陣列、類陣列

[12] 值 - 陣列、類陣列

Day04_Origami學習筆記

Day04_Origami學習筆記

Web開發學習筆記06 — Function Scope vs. Block Scope、IIFE

Web開發學習筆記06 — Function Scope vs. Block Scope、IIFE


Comments