นักพัฒนาซอฟต์แวร์ไม่เพียงต้องทำงานให้เสร็จเท่านั้น แต่ยังจำเป็นต้องทำงานในลักษณะที่มีประสิทธิภาพมากขึ้นด้วย ปัจจุบันมีไลบรารี่หลายไลบรารีใน JavaScript ที่ทำให้การทำงานกับตัวแปรง่ายขึ้นสำหรับนักพัฒนา เราจะเรียนรู้วิธีใช้ฟังก์ชันทั่วไปของไลบรารี Lodash ในบทช่วยสอนนี้
หากคุณยังไม่ได้ลอง Lodash ตอนนี้คือช่วงเวลาหนึ่ง Lodash เป็นแพ็คเกจยูทิลิตี้ JavaScript ร่วมสมัยที่ช่วยให้การทำงานกับอาร์เรย์ จำนวนเต็ม ออบเจ็กต์ ข้อความ และประเภทข้อมูลอื่นๆ ง่ายขึ้น
มันจะช่วยคุณในการจัดการกับวัตถุประเภทต่างๆ และจะช่วยคุณประหยัดเวลาโดยไม่จำเป็นต้องเขียนโค้ดวิธีทั่วไป รหัสของคุณจะสะอาดขึ้นโดยมีบรรทัดน้อยลงและจะทำงานในทุกเบราว์เซอร์ หากคุณยังไม่ได้ใช้งาน คุณควรพิจารณาให้ดี
การไม่ใช้ Lodash ถือเป็นการสูญเสียครั้งใหญ่สำหรับฐานโค้ด JavaScript ของเรา เป็นโซลูชันที่ปราศจากข้อผิดพลาดและสวยงามสำหรับความท้าทายทั่วไปที่เรามีในที่ทำงาน และการใช้งานจะทำให้โค้ดของเราสามารถอ่านและจัดการได้ง่ายขึ้นเท่านั้น
มาเจาะลึกถึงฟังก์ชัน Lodash ยอดนิยม (หรือไม่!) และค้นพบว่าห้องสมุดนี้มีประโยชน์และสวยงามเพียงใด
1. _.เรียงลำดับยูนิค
ค่าที่ซ้ำกันทั้งหมดจะไม่ถูกส่งกลับพร้อมกับค่านี้ เนื่องจากเป็นเพียงการจัดเรียงอาร์เรย์ ส่วนใหญ่จะใช้เพื่อเหตุผลด้านความเร็ว สิ่งนี้มีประโยชน์เฉพาะเมื่อคุณจัดการกับอาร์เรย์ขนาดใหญ่ หากคุณต้องการปรับปรุงความเร็ว ให้จัดเรียงอาร์เรย์ของคุณและใช้วิธีการที่ทำงานได้ดีขึ้นกับอาร์เรย์ที่จัดเรียง
Lodash มีฟังก์ชันอื่นๆ มากมายที่คล้ายคลึงกันนี้ คุณสามารถดู .sortedIndex, .sortedIndexBy, .sortedIndexOf, .sortedLastIndex, .sortedLastIndexBy, .sortedLastIndexOf, .sortedUniq, .sortedUniqBy, .sortedUniqBy, .sorted.Uniq.By
2. _.ลด
_.reduce คล้ายกับฟังก์ชันตัวกรอง ข้อแตกต่างเพียงอย่างเดียวคือคุณมีตัวเลือกในการเลือกรูปแบบของวัตถุที่ส่งคืน เป็นเรื่องปกติ ถ้าคุณไม่เข้าใจสิ่งที่ฉันพูด มีตัวอย่างสำหรับมัน
โดยพื้นฐานแล้ว เราจะส่งคืนวัตถุใหม่ที่มีผู้ใช้ที่จำแนกตามอายุ แต่สำหรับผู้ที่มีอายุระหว่าง 18 ถึง 59 ปีเท่านั้น ฟังก์ชันตัวช่วย Lodash นี้เป็นหนึ่งในฟังก์ชันที่ใช้กันมากที่สุด รวมอยู่ใน ES6 ด้วย ฉันยังต้องการชี้ให้เห็นข้อผิดพลาดทั่วไปสองประการ: อย่าลืมส่งคืนผลลัพธ์ที่ส่วนท้ายของฟังก์ชัน และระบุค่าเริ่มต้นสำหรับผลลัพธ์เป็นพารามิเตอร์ที่สาม (ที่นี่)
3. _.get และ ._set
สำหรับอันนี้ ฉันจะหลอกคุณบ้างโดยแสดงสองฟังก์ชันที่ทำงานเกือบเหมือนกัน _.get คืนค่าคุณสมบัติจากวัตถุ และ _.set คุณก็เดาได้ ตั้งค่าคุณสมบัติด้วยค่า ไม่มีอะไรพิเศษ ยกเว้นว่าคุณสามารถเข้าใช้พร็อพเพอร์ตี้ผ่านเส้นทางของมันได้
เรามาดูตัวอย่างกัน
หากไม่มีพาธขณะเรียก _.set เส้นทางจะถูกสร้างขึ้น จะไม่มีข้อผิดพลาด "Cannot set property 'items' of undefined" อีกต่อไป หากไม่มีพาธ _.get จะคืนค่า undefined แทนที่จะเป็นข้อผิดพลาด หากเส้นทางแก้ไขเป็น undefined คุณอาจระบุค่าเริ่มต้น (พารามิเตอร์ที่สาม)
4. _.ค้นหา
แทนที่จะวนซ้ำผ่านอาร์เรย์เพื่อค้นหาวัตถุเดียว เราอาจใช้ _.find เป็นเรื่องที่ดี แต่ไม่ใช่สิ่งเดียวที่ _.find ทำได้ ด้วยรหัสบรรทัดเดียว คุณอาจค้นพบวัตถุโดยใช้คุณสมบัติมากมาย ตรวจสอบออก!
5. _.คีย์โดย
หนึ่งในรายการโปรดของฉันคือ _.keyBy มีประโยชน์มากเมื่อพยายามรับวัตถุที่มีคุณสมบัติบางอย่าง สมมติว่าเรามีบล็อก 100 รายการและต้องการคว้ารายการที่มีรหัส "34abc" เราจะทำได้อย่างไร? มาดูกันว่าจะเกิดอะไรขึ้น! เมธอดนี้สามารถช่วยคุณจัดเรียงคอลเลกชั่นอ็อบเจ็กต์ได้ หากเซิร์ฟเวอร์จัดเตรียมให้เป็นอาร์เรย์ ฟังก์ชันสามารถใช้เป็นอาร์กิวเมนต์ที่สองได้เช่นกัน
6. _.สำหรับแต่ละคน
วิธีนี้จะวนซ้ำอาร์เรย์ของอ็อบเจ็กต์ทีละรายการ ช่วยให้คุณทำตรรกะใดๆ ก็ได้ตามต้องการ ในตัวอย่างแรกนี้ ฉันจะวนรอบรายการออบเจ็กต์ผู้ใช้ ผสานชื่อและนามสกุลเข้าด้วยกันเพื่อสร้างคุณสมบัติใหม่ที่เรียกว่า fullName
สำหรับแต่ละรายการยอมรับสองพารามิเตอร์ อาร์เรย์ที่เรากำลังวนซ้ำเป็นพารามิเตอร์แรก อาร์กิวเมนต์ที่สองคือฟังก์ชันวนซ้ำ โดยพารามิเตอร์แรกเป็นการอ้างอิงรายการแต่ละรายการ และพารามิเตอร์ที่สองคือดัชนีปัจจุบันของการวนซ้ำ
7. _.แผนที่
แผนที่ เช่นเดียวกับ forEach จะวนซ้ำในอาร์เรย์ของค่าต่างๆ ในทางกลับกัน ฟังก์ชันแผนที่จะส่งคืนอาร์เรย์ของค่าใหม่ที่ได้รับจากฟังก์ชัน iterate เรากำลังใช้กลุ่มผู้ใช้เดียวกันกับในตัวอย่าง forEach ของเราที่นี่ เราอาจใช้ _.map เพื่อสร้างตัวแปรใหม่ที่มีอาร์เรย์ชื่อเต็มของผู้ใช้ทั้งหมดแบนราบ
8. _.ความแตกต่าง
ฟังก์ชันผลต่างจะสร้างอาร์เรย์ใหม่ของค่าที่แตกต่างกันระหว่างอาร์เรย์ที่หนึ่งและที่สอง สิ่งสำคัญคือต้องสังเกตว่าตำแหน่งของข้อโต้แย้งส่งผลต่อผลลัพธ์
9. _.รับ
ฟังก์ชัน _.get() สามารถช่วยเหลือเราในการค้นหาองค์ประกอบภายในวัตถุ เราสามารถตั้งค่าเริ่มต้นสำหรับฟังก์ชัน _.get() เพื่อส่งคืนหากไม่พบองค์ประกอบในเส้นทางที่ให้มา ฟังก์ชัน _.get() รับพารามิเตอร์สามตัว พารามิเตอร์แรกคืออ็อบเจ็กต์ที่เราต้องการรับองค์ประกอบ เส้นทางที่สอง ค่าที่สามคือค่าเริ่มต้นที่เราต้องการส่งคืนหากไม่พบองค์ประกอบ
10. _.ค้นหา
ฟังก์ชัน _find() อาจดูเหมือนเหมือนกับเมธอด _.get() ฟังก์ชัน _.find() เช่นเดียวกับเมธอด _.get() ยอมรับพารามิเตอร์สามตัว อย่างไรก็ตาม ไม่เหมือนกับเมธอด _.get() อาร์กิวเมนต์แรกอาจเป็นอาร์เรย์หรืออ็อบเจ็กต์ อาร์กิวเมนต์ที่สองระบุฟังก์ชันที่จะเรียกใช้ในการวนซ้ำแต่ละครั้ง อินพุตที่สามคือดัชนีเริ่มต้นของคอลเล็กชัน เนื่องจากฟังก์ชัน _.find() จะวนซ้ำในแต่ละองค์ประกอบในคอลเล็กชัน
11. _.groupBy
สร้างวัตถุที่ตั้งชื่อตามผลลัพธ์ของฟังก์ชัน (หรือชื่อคุณสมบัติที่สุ่มเลือก) โดยแต่ละค่าจะเป็นอาร์เรย์ของวัตถุที่มีคีย์เดียวกัน
12. _.ตั้งค่า
เมธอด _.set() คือวิธีผกผันของเมธอด _.get() มันจะเปลี่ยนค่าขององค์ประกอบที่เส้นทางที่กำหนด ออบเจ็กต์หรืออาร์เรย์เป็นพารามิเตอร์แรก พาธคือพารามิเตอร์ที่สอง และค่าที่คุณต้องการตั้งค่าเป็นพารามิเตอร์ที่สาม
13. _.ผสาน
มันทำงานคล้ายกับ Object.assign เว้นแต่จะเรียกซ้ำลึกลงไปในโครงสร้างพื้นฐานเพื่ออัปเดตอ็อบเจ็กต์ที่ลึกกว่าแทนที่จะแทนที่พวกมัน
14. ._deburr
นี่เป็นตัวอย่างที่ค่อนข้างตรงไปตรงมา “การรวมเครื่องหมายกำกับเสียง” ทั้งหมดจะถูกลบออก ดังนั้น "é" จึงกลายเป็น "e" เมื่อมีการทำให้เป็นสากลและโลคัลไลเซชัน แนวปฏิบัติที่ดีในการลบข้อความสำหรับฟังก์ชันการค้นหา
15. _.เด้ง
นี่เป็นหนึ่งในกลยุทธ์ Lodash ที่มีประสิทธิภาพมากที่สุด อาจเป็นเรื่องยากที่จะเข้าใจว่ามันทำอะไรและเมื่อใดที่คุณควรใช้ _.debounce() วิธีการส่งกลับฟังก์ชัน ฟังก์ชันของเมธอด _.debounce() จะชะลอการเรียกใช้จนกว่าจะครบจำนวนมิลลิวินาทีที่ระบุนับตั้งแต่มีการเรียกใช้ฟังก์ชันครั้งล่าสุด
สรุป
Lodash เป็นส่วนขยายที่มีประสิทธิภาพของภาษา JavaScript ด้วยความพยายามเพียงเล็กน้อย อาจสร้างโค้ดที่กระชับและมีประสิทธิภาพ Lodash เป็นแบบแยกส่วนอย่างสมบูรณ์ แม้ว่าฟังก์ชันบางอย่างอาจถูกเลิกใช้ในที่สุด แต่ฉันเชื่อว่าจะยังคงให้ประโยชน์มากมายแก่นักพัฒนาในขณะที่ยังขับเคลื่อนวิวัฒนาการของภาษา JS
ฉันหวังว่าความสามารถบางอย่างของ Lodash เหล่านี้จะช่วยให้คุณเห็นว่า Lodash มีประสิทธิภาพเพียงใดเมื่อทำงานกับอาร์เรย์ วัตถุ และคอลเลกชัน คุณสามารถเยี่ยมชม เอกสาร เพื่อสำรวจตัวเลือกอื่น ๆ มากมายที่มีให้
เขียนความเห็น