Pattern Mapper ใน JavaScript

Feb 25 2023
ใน JavaScript ตัวแมปรูปแบบเป็นรูปแบบการออกแบบที่ใช้แม็พชุดของอ็อบเจ็กต์หนึ่งกับอ็อบเจ็กต์อีกชุดหนึ่งโดยใช้ฟังก์ชันแมป จุดประสงค์ของรูปแบบนี้คือเพื่อลดความซับซ้อนของโค้ดและทำให้เป็นโมดูลมากขึ้น โดยแยกตรรกะของการแมปวัตถุออกจากส่วนที่เหลือของแอปพลิเคชัน

ใน JavaScript ตัวแมปรูปแบบเป็นรูปแบบการออกแบบที่ใช้แม็พชุดของอ็อบเจ็กต์หนึ่งกับอ็อบเจ็กต์อีกชุดหนึ่งโดยใช้ฟังก์ชันแมป จุดประสงค์ของรูปแบบนี้คือเพื่อลดความซับซ้อนของโค้ดและทำให้เป็นโมดูลมากขึ้น โดยแยกตรรกะของการแมปวัตถุออกจากส่วนที่เหลือของแอปพลิเคชัน

โดยทั่วไปตัวแมปรูปแบบจะใช้อาร์เรย์หรือวัตถุสองรายการเป็นอินพุต: วัตถุต้นทางหรืออาร์เรย์ และวัตถุการแมปหรืออาร์เรย์ที่ระบุวิธีการแมปวัตถุต้นทางกับวัตถุเป้าหมาย โดยทั่วไป ออบเจกต์การแมปจะประกอบด้วยคู่คีย์-ค่า โดยที่คีย์จะแทนคุณสมบัติหรือชื่อฟิลด์ในออบเจ็กต์ต้นทาง และค่าจะแทนคุณสมบัติหรือชื่อฟิลด์ในออบเจ็กต์เป้าหมาย

ตัวแมปรูปแบบใช้ออบเจกต์แมปเพื่อแปลงออบเจ็กต์ต้นทางเป็นออบเจ็กต์เป้าหมายโดยการวนซ้ำคุณสมบัติของออบเจ็กต์ต้นทางและแมปกับคุณสมบัติที่สอดคล้องกันในออบเจ็กต์เป้าหมาย ส่วนที่เหลือของแอปพลิเคชันสามารถใช้วัตถุเป้าหมายที่เป็นผลลัพธ์ได้

Pattern mapper สามารถนำไปใช้ได้หลายวิธี รวมถึงการใช้ฟังก์ชัน JavaScript ในตัว เช่น map(), reduce() และ forEach() หรือใช้ไลบรารี่ภายนอก เช่น Lodash หรือ Underscore.js

ต่อไปนี้เป็นตัวอย่างของวิธีการใช้ Pattern Mapper ใน JavaScript:

สมมติว่าเรามีอาร์เรย์ของซอร์สออบเจกต์ที่แสดงถึงหนังสือ

const books = [
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925 },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960 },
  { title: '1984', author: 'George Orwell', year: 1949 }
];

const mapping = {
  title: 'title',
  author: 'author',
  published: 'year'
};

const targetObjects = books.map(book => ({
  title: book[mapping.title],
  author: book[mapping.author],
  published: book[mapping.published]
}));

[
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', published: 1925 },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee', published: 1960 },
  { title: '1984', author: 'George Orwell', published: 1949 }
]