See the original english version Click here!
ในการเขียน Code ของ Developer/Programmer เชื่อว่ามีทั้งส่วนที่ยากและง่ายปะปนกันไป และในหลายๆ ภาษาก็มี Library, Function หรือ Method ให้สามารถนำไปใช้ได้สะดวกขึ้น สำหรับบทความนี้เราจะมาดูกันว่า วิธีทำให้ Codebase ของคุณง่ายขึ้นด้วย map(), reduce() และ filter() ใน JavaScript นั้นมีอะไรบ้าง พร้อมทั้งตัวอย่าง Code
1. Remove duplicates from an array of numbers/strings
หัวข้อนี้อาจเป็นเรื่องเดียวที่ไม่เกี่ยวกับ Map/Reduce/Filter แต่มันมีความสั้นกระชับมากจนน่าที่จะนำไปไว้ในรายการเหล่านี้ด้วย
2. A simple search (case-sensitive)
Filter() method ใช้คัดกรองจาก Element ที่ผ่านเงื่อนไขตามที่กำหนดไว้ แล้วจะ Return ค่าออกมาเป็น Array ใหม่เลย
3. A simple search (case-insensitive)
4. Check if any of the users have admin rights
Some() method สามารถใช้ตรวจสอบว่า มีอย่างน้อยหนึ่ง Element ใน Array ไปผ่านเงื่อนไขที่กำหนดไว้ และจะ Return ค่าออกมาเป็นค่า True หรือ False
5. Flattening an array of arrays
ผลลัพธ์ของ Iteration ครั้งแรกเท่ากับ: [… [], … [1, 2, 3]] หมายความว่า มัน Transform เป็น [1, 2, 3] ซึ่งค่านี้ที่เราให้จะเป็น 'acc' ในการทำ Iteration ครั้งที่ 2 และครั้งต่อๆ ไป
เราสามารถปรับปรุง Code นี้ได้เล็กน้อยโดยข้าม Empty Array[] ที่เป็น Argument ที่ 2 ของ reduce() จากนั้นค่าแรกของ Nested จะถูกใช้เป็นค่าเริ่มต้นของ acc (สำหรับเรื่องนี้ต้องขอขอบคุณ Vladimir Efanov)
อย่าลืมว่า การใช้ Spread Operator ใน reduce อาจได้ผลลัพธ์ไม่ดีนักในเรื่อง Performance อย่างในตัวอย่างนี้ เป็นกรณีที่การวัด Performance มันดูจะสมเหตุสมผลกับ Use-case ของคุณ
ต้องขอขอบคุณ Paweł Wolak นี่เป็นวิธีที่สั้นกว่าโดยไม่ต้องใช้ Array.reduce:
ขณะเดียวกัน แม้จะมี Array.flat แต่ก็ยังคงเป็น Feature ที่อยู่ในระหว่างการทดลองอยู่
6. Create an object that contains the frequency of the specified key
ทำการ Group และ Count ‘age’ property สำหรับแต่ละ Item ใน Array:
ขอบคุณ Sai krishna ที่แนะนำเรื่องนี้!
7. Indexing an array of objects (lookup table)
แทนที่จะประมวลผล Array ทั้งหมดเพื่อค้นหา User ด้วย id แต่เราสามารถสร้าง Object ที่ใช้ id ของ User เป็น Key
8. Extract the unique values for the given key of each item in the array
ให้สร้าง List ที่แสดง group ของ User เราสามารถใช้ Map() method ได้ โดย Return ผลลัพธ์ออกมาเป็น Array ด้วยเช่นกัน
9. Object Key-value Map Reversal
ด้วยการใช้เพียงบรรทัดเดียวเช่นนี้อาจดูเหมือนจะยาก เราใช้เครื่องหมาย , (จุลภาค) ในลักษณะนี้ หมายความว่า เรา Return ค่าสุดท้ายในวงเล็บ ซึ่งคือ acc เราลองมา Rewrite ตัวอย่างนี้ใหม่ ในแบบที่มีประสิทธิภาพมากขึ้น:
ในที่นี่ เราไม่ได้ใช้ Spread Operator – มันสร้าง Array ใหม่ในการเรียก Reduce() แต่ละครั้ง ซึ่งจะนำไปสู่การเกิดผลกระทบต่อ Performance: O(n²) เราจะใช้ push() method แทน
10. Create an array of Fahrenheit values from an array of Celsius values
เราสามารถใช้สูตรแบบนี้ได้ด้วยการแปลงค่า Celsius เป็น Fahrenheit
11. Encode an object into a query string
12. Print a table of users as a readable string only with specified keys
บางครั้งคุณต้องการ Print Array ของ Object ด้วย Key ที่กำหนดไว้เป็น String แต่คุณก็รู้ว่า JSON.stringify นั้นอาจไม่ดีเท่าไรนัก
JSON.stringify สามารถทำให้ String ที่ออกมาอ่านได้ง่ายขึ้น แต่มันกลับไม่เป็น Table:
13. Find and replace a key-value pair in an array of objects
สมมติว่าเราต้องการเปลี่ยนอายุของ John หากคุณรู้ Index คุณสามารถเขียนบรรทัดนี้ได้เลย: users[1].age = 29 อย่างไรก็ตามลองมาดูวิธีอื่นๆ ดู ดังนี้
แต่ยังมีอีกวิธีที่สามารถแก้ไขข้อมูลได้โดยที่ไม่ต้องใช้ index ซึ่งก็คือการใช้ map() ตามตัวอย่างด้านบน
14. Union (A ∪ B) of arrays
เรียกวิธีนี้ว่า lodash method union
15. Intersection (A ∩ B) of arrays
นี่คือข้อสุดท้าย
ที่มา: https://medium.freecodecamp.org/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
บทความล่าสุด
