โปรแกรมเมอร์ชอบลดการซ้ำซ้อนในโค้ด ยิ่งซ้ำยิ่งทำให้โค้ดบำรุงรักษายาก และโปรแกรมทำงานช้าลง นั่นคือเหตุผลที่มี methods หลายตัวใน JavaScript สำหรับวนลูปผ่านข้อมูล
หนึ่งใน methods นี้คือ map() method วิธีนี้วนลูปผ่าน array ที่มีอยู่ และ執行ฟังก์ชันเฉพาะกับทุก item ใน array นั้น
ในคู่มือนี้ เราจะพูดถึงวิธีใช้ JavaScript map() function จะเดินทางผ่านสามตัวอย่างทั่วไปของ map() ในการทำงานจริง
Map Function คืออะไร?
JavaScript map() method เรียกฟังก์ชันเฉพาะกับแต่ละ item ใน array ผลลัพธ์ของฟังก์ชันนี้จะถูกย้ายไปไว้ใน array ใหม่
ตัวอย่าง สมมติคุณต้องการคูณทุก item ใน array ด้วยสอง คุณสามารถทำได้โดยสร้างฟังก์ชันคูณทุก array item ด้วยสอง และนำฟังก์ชันนั้นไปใส่ใน map() method
Syntax ของ map() function คือ:
const newArray = oldArray.map(function, thisValue);
function คือ callback function ที่จะรันบนแต่ละ element ใน array อ่านเพิ่มเติมได้จาก ultimate guide to JavaScript functions thisValue คือค่า default ที่จะเก็บในตัวแปร this ในฟังก์ชัน โดย default เป็น undefined
Map method สร้าง array ใหม่จากผลลัพธ์ของ callback function
map() method มีการใช้งานหลายอย่าง การใช้ทั่วไปที่สุดคือเรียกฟังก์ชันบนรายการ array elements ตัวอย่างเช่น คูณทุกตัวเลขในลิสต์ หรือหาความยาวของแต่ละสตริงในลิสต์สตริง
คุณยังจะพบฟังก์ชันนี้ใช้ในการ render lists ใน JavaScript libraries เช่น React หรือ Vue.js
การเรียกฟังก์ชันด้วย Map
map() method อนุญาตให้ทำ repetitive task บนทุก item ในลิสต์ ทำให้มีประโยชน์ในหลายกรณี
สมมติคุณมีร้านคุกกี้ จะเพิ่มราคาคุกกี้ทุกชนิด 5% แทนที่จะคำนวณราคาใหม่ทีละอัน คุณสามารถใช้ map() method ได้
โค้ดที่ใช้:
const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45]; const newCookiePrices = cookiePrices.map(cookie => { var price = cookie * 1.05; return price.toFixed(2); }); console.log(newCookiePrices);
โค้ดคืนค่า:
["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]
ในตัวอย่างนี้ เราเพิ่มราคาคุกกี้ทุกชนิด 5% ก่อนประกาศลิสต์ราคาใน "cookiePrices" แล้วใช้ map() กับฟังก์ชันคำนวณเพิ่ม 5% ให้แต่ละคุกกี้
"cookie * 1.05" คำนวณ % เพิ่ม แล้วคืนค่าที่ปัดทศนิยม 2 ตำแหน่ง สุดท้ายพิมพ์ array ใหม่ด้วย console.log()
เรายังสามารถย้ายฟังก์ชันไปเป็นฟังก์ชันแยกต่างหาก เพื่อให้โค้ดอ่านง่ายขึ้น:
function calculateIncrease(cookie) { var price = cookie * 1.05; return price.toFixed(2); } const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45]; const newCookiePrices = cookiePrices.map(calculateIncrease); console.log(newCookiePrices);
โค้ดคืนค่าเหมือนเดิม แต่อ่านง่ายกว่า:
["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]
เปลี่ยน Items ใน Array
map() method บ่อยครั้งใช้เปลี่ยน items ใน array สมมติร้านคุกกี้สร้าง loyalty program ทุกคุกกี้ที่ซื้อได้ 10 points สะสม 100 points ได้คุกกี้ฟรี
โปรแกรมต่อไปทำได้:
var customers = [ { name: "Hannah Geoffrey", cookiesPurchased: 2 }, { name: "Peter Clarkson", cookiesPurchased: 3 }, { name: "Steven Hanson", cookiesPurchased: 7 } ] function calculateLoyaltyPoints(customer) { var newCustomer = { name: customer.name, cookiesPurchased: customer.cookiesPurchased, points: customer.cookiesPurchased * 10 } return newCustomer; } var customersWithPoints = customers.map(calculateLoyaltyPoints); console.log(customersWithPoints);
โค้ดคืนค่า:
[{ cookiesPurchased: 2, name: "Hannah Geoffrey", points: 20 }, { cookiesPurchased: 3, name: "Peter Clarkson", points: 30 }, { cookiesPurchased: 7, name: "Steven Hanson", points: 70 }]
ในตัวอย่างนี้ เราคำนวณ points ที่ลูกค้าแต่ละคนควรได้จากจำนวนคุกกี้ที่ซื้อ
ก่อนอื่น ประกาศ array of objects ชื่อ "customers" เก็บชื่อและจำนวนคุกกี้ที่ซื้อด้วย key:value pairs
ต่อมา ประกาศฟังก์ชัน calculateLoyaltyPoints() เพิ่ม item "points" ให้แต่ละลูกค้า คำนวณจากคุกกี้ที่ซื้อคูณ 10
ใช้ map() วนลูปผ่านลูกค้าและใช้ calculateLoyaltyPoints() สุดท้ายพิมพ์ลิสต์ลูกค้าที่ปรับปรุงแล้ว ซึ่งมี "points" เพิ่มเข้ามา
Render List ด้วย Library
map() method ใช้ทั่วไปใน JavaScript libraries เช่น React วัตถุประสงค์คือ render items ในลิสต์ มาดูตัวอย่าง map() ใน React
สมมติเราต้องการแสดงลิสต์คุกกี้ที่ขายบนเว็บไซต์ สามารถทำได้ด้วยโค้ดนี้:
import React from "react"; import ReactDOM from "react-dom"; var cookies = ["Raspberry Chocolate Chip", "White Chocolate Chip", "Oat", "Milk Chocolate Chip"]; const CookieList = () => ( <div> <ul>{cookies.map((cookie, i) => <li key={i}>{cookie}</li> )} </ul> </div> ); const root = document.getElementById("root"); ReactDOM.render(<CookieList />, root);
โค้ดนี้สร้าง component ใน React ที่ render ลิสต์ แต่ละ list item อยู่ใน <li> tag ที่ render ด้วย map() สร้าง <li> tag แยกสำหรับแต่ละ item และตัวแปร "i" กำหนด unique key ให้แต่ละ list item
Map vs. Iterator Methods
Map เป็นตัวอย่างของ iterator method ใน JavaScript methods เหล่านี้อนุญาตให้วนลูปผ่านทุก item ในลิสต์และทำบางอย่าง
ตอนตัดสินใจใช้ map() function ควรถามก่อนว่า iterator method อื่นดีกว่าหรือไม่ เพื่อเลือกเครื่องมือที่เหมาะสม
Iterator methods อื่นใน JavaScript:
- reduce(): ลด array เหลือค่าเดียว เหมาะสำหรับบวกทุก item ใน array
- filter(): กรอง item ที่ไม่ตรงเงื่อนไขออก
- forEach(): รันฟังก์ชันบนทุก item คล้าย for loop
คุณอาจคิดว่า "map คล้าย forEach() ไหม? เหมือนกันไหม?" คำถามดี มีความต่างเล็กน้อย
map() วนลูป เปลี่ยนแต่ละ item และคืน array ใหม่ forEach() วนลูปและเป็น side effect ใช้ operation กับลิสต์
map() เหมาะสำหรับ: เรียกฟังก์ชันบนทุก item, ประกาศ list component ใน React, หรือเปลี่ยนเนื้อหาของลิสต์
สรุป
map() method มีประโยชน์สำหรับ repetitive tasks และประกาศ components ใน React เช่น lists
ในบทช่วยสอนนี้ เราวิเคราะห์สามการใช้งานหลักของ map() method ตอนนี้คุณพร้อมใช้ JavaScript map() method แบบมืออาชีพแล้ว!
