ยกระดับเกม JavaScript ของคุณด้วยฟังก์ชันที่มีลำดับสูงกว่า 🐉

ยกระดับเกม JavaScript ของคุณด้วยฟังก์ชันที่มีลำดับสูงกว่า 🐉

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

ความมหัศจรรย์ของฟังก์ชันลำดับสูง

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

function greet(name) {
    return `Hello, ${name}!`
}

function loudGreeting(greeting, name) {
    return greeting(name).toUpperCase() + '!!!'
}

console.log(loudGreeting(greet, 'Readers')) 
// Outputs: "HELLO, READERS!!!!"

ในตัวอย่างนี้ loudGreeting เป็นฟังก์ชันที่มีลำดับสูงกว่า เนื่องจากใช้ฟังก์ชันอื่น (greet) เป็นอาร์กิวเมนต์

ฟังก์ชัน greet มีหน้าที่สร้างข้อความทักทายง่ายๆ จากนั้นฟังก์ชัน loudGreeting จะนำฟังก์ชัน greet นี้ไปใช้ และปรับเปลี่ยนเอาต์พุตเพิ่มเติมเพื่อทำให้คำทักทายดังขึ้น (แปลงข้อความเป็นตัวพิมพ์ใหญ่และต่อท้ายด้วย '!!!')

ฟังก์ชันที่มีลำดับสูงกว่ามอบวิธีที่มีประสิทธิภาพในการทำงานเชิงนามธรรม และสร้างโค้ดที่สามารถนำมาใช้ซ้ำและเขียนได้

map(): การแปลงองค์ประกอบทีละรายการ

เมธอด map() ช่วยคุณได้เมื่อคุณต้องการสร้างอาร์เรย์ใหม่โดยใช้ฟังก์ชันกับทุกองค์ประกอบของอาร์เรย์ที่มีอยู่

const numbers = [1, 2, 3, 4, 5]
const squares = numbers.map(num => num ** 2)
console.log(squares)// [1, 4, 9, 16, 25]

ในตัวอย่างนี้ map() ใช้ฟังก์ชันกำลังสองกับทุกองค์ประกอบของอาร์เรย์ numbers และให้ผลลัพธ์เป็นอาร์เรย์ squares ใหม่ อาเรย์ดั้งเดิมยังคงไม่เปลี่ยนแปลง

filter(): การเลือกองค์ประกอบที่คุณต้องการด้วยมือ

เมื่อคุณต้องการกรองอาร์เรย์และเลือกองค์ประกอบบางอย่างที่ตรงตามเงื่อนไขเฉพาะ filter() คือวิธีการที่คุณต้องการ

คุณสามารถใช้ filter() ต่อไปนี้:

const numbers = [1, 2, 3, 4, 5]
const evens = numbers.filter(num => num % 2 === 0)
console.log(evens) // [2, 4]

ในกรณีนี้ filter() จะผ่านแต่ละองค์ประกอบของอาร์เรย์ numbers และสร้างอาร์เรย์ evens ใหม่โดยมีองค์ประกอบที่ผ่านเงื่อนไขที่ระบุ (ตัวเลขที่เป็นเลขคู่)

find(): ค้นหาคู่แรก

เมื่อคุณต้องการค้นหาองค์ประกอบแรกในอาร์เรย์ที่ตรงกับเงื่อนไขเฉพาะ ให้เปลี่ยนเป็น find():

const numbers = [1, 2, 3, 4, 5]
const firstEven = numbers.find(num => num % 2 === 0)
console.log(firstEven) // 2

ในตัวอย่างนี้ find() ส่งคืนองค์ประกอบแรกจากอาร์เรย์ numbers ที่ตรงตามเงื่อนไข

sort(): วางทุกอย่างให้เป็นระเบียบ

เมื่อพูดถึงการจัดเรียงองค์ประกอบของอาร์เรย์ตามลำดับเฉพาะ ฟังก์ชัน sort() คือเพื่อนที่ดีที่สุดของคุณ

const numbers = [5, 2, 1, 4, 3]
numbers.sort()
console.log(numbers) // [1, 2, 3, 4, 5]

หากต้องการเรียงลำดับตัวเลขจากมากไปน้อย คุณสามารถส่งฟังก์ชันเปรียบเทียบไปที่ sort():

const numbers = [5, 2, 1, 4, 3]
numbers.sort((a, b) => b - a)
console.log(numbers) // [5, 4, 3, 2, 1]

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

ลด (): อัญมณีของ HOF

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

ที่นี่เราพบกับแนวคิดที่สำคัญ: ตัวสะสม โดยพื้นฐานแล้วตัวสะสมคือค่าที่สามารถจดจำได้ตลอดการวนซ้ำ ทุกครั้งที่ส่งผ่านอาร์เรย์ของเรา ฟังก์ชัน reduce() จะนำองค์ประกอบอาร์เรย์ปัจจุบันและรวมเข้ากับตัวสะสมในลักษณะที่เรากำหนด ซึ่งท้ายที่สุดแล้วจะได้ผลลัพธ์เป็นค่าเอาต์พุต 'สะสม' เพียงค่าเดียว

ฟังดูซับซ้อนใช่มั้ย? แต่ด้วยตัวอย่างบางส่วน คุณจะต้องชอบมัน 😆 :

const numbers = [1, 2, 3, 4, 5]
const sum = numbers.reduce((accumulator, currentValue) => accumulator + 
currentValue, 0)
console.log(sum) // 15

ในกรณีนี้ ฟังก์ชัน reduce() กำลังรับอาร์เรย์ของตัวเลขและ 'ลด' ให้เหลือผลรวม ในการวนซ้ำแต่ละครั้ง องค์ประกอบอาร์เรย์ปัจจุบัน (currentValue) จะถูกเพิ่มใน accumulator (ซึ่งเริ่มต้นที่ 0 ตามที่เราได้ระบุไว้)

ความสวยงามของ reduce() คือความยืดหยุ่น ไม่จำกัดเพียงการดำเนินการเชิงตัวเลข สมมติว่าเรามีอาร์เรย์ของสตริงและเราต้องการที่จะเชื่อมต่อให้เป็นสตริงเดียว:

const words = ['JavaScript', 'is', 'awesome']
const sentence = words.reduce((accumulator, currentWord) => 
accumulator + ' ' + currentWord, '')
console.log(sentence)// 'JavaScript is awesome'

เมื่อใช้ reduce() เราสามารถ 'ลด' อาร์เรย์คำของเราให้เป็นสตริงเดียวได้

กำลังของ reduce() เป็นมากกว่าการคำนวณทางคณิตศาสตร์อย่างง่ายๆ และการต่อข้อมูล มันช่วยให้เราสามารถสร้างสถานการณ์ที่ซับซ้อนมากขึ้น เช่น การแปลงอาเรย์ของเราให้เป็นโครงสร้างข้อมูลที่ซับซ้อนมากขึ้น เช่น วัตถุด้วย:

const pets = ['cat', 'dog', 'fish', 'cat', 'dog', 'dog']
const petCount = pets.reduce((count, pet) => {
  count[pet] = (count[pet] || 0) + 1
  return count
}, {})
console.log(petCount) // { cat: 2, dog: 3, fish: 1 }

ในตัวอย่างนี้ เรากำลังลดอาร์เรย์ pets ของเราลงในอ็อบเจ็กต์โดยที่คีย์คือชื่อสัตว์เลี้ยง และค่าคือจำนวนสัตว์เลี้ยงแต่ละตัวในอาร์เรย์ ตัวสะสม (count) เป็นวัตถุว่าง {} และในแต่ละรอบ เราจะเพิ่มจำนวนสัตว์เลี้ยงที่เกี่ยวข้องหรือกำหนดค่าเริ่มต้นเป็น 1 หากยังไม่มี

และฉันสามารถพูดต่อได้ตลอดทั้งวัน โดยให้ตัวอย่างการใช้การลดแบบต่างๆ มากขึ้นเรื่อยๆ 🤯

The Accumulator: หัวใจของการลด

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

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

ทำให้ reduce() ใช้งานได้หลากหลายอย่างเหลือเชื่อ และคุณไม่สามารถจินตนาการได้เลยว่าโค้ดจะช่วยเราได้มากแค่ไหน 😏

ฉันขอแนะนำให้คุณลองปฏิบัติจริงกับวิธีการเหล่านี้ ทดลองเล่น และปลดล็อกศักยภาพอันมหาศาลที่พวกเขานำเสนอ

และเช่นเคย ฉันจะแบ่งปันข้อมูลเชิงลึกและประสบการณ์เพิ่มเติมในโลกที่น่าตื่นเต้นของ JavaScript ต่อไป มาร่วมกับฉันในการเดินทางครั้งนี้:

• เชื่อมต่อกับฉันบน LinkedIn
• สำรวจโครงการของฉันบน GitHub

มาสำรวจจักรวาลอันกว้างใหญ่ของการเขียนโค้ดกันต่อไป ขอให้มีความสุขในการเขียนโค้ด! 😃

เนื้อหาเพิ่มเติมได้ที่ PlainEnglish.io.

ลงทะเบียนเพื่อรับ จดหมายข่าวรายสัปดาห์ฟรี ของเรา ติดตามเราบน Twitter, LinkedIn, YouTube และ Discord .