[JavaScript] จัดการ Array แบบง่ายๆ ด้วย Map, Filter, Reduce และผองเพื่อน

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

มาเข้าเรื่องกันดีกว่าก่อนจะอ่านบทความนี้ผู้อ่านควรรู้จัก JavaScript เบื้องต้นมาบ้างแล้วนะครับไม่ว่าจะเป็นเรื่อง ตัวแปร ฟังก์ชัน การวนลูป หรือเรื่อง If-else เป็นต้น โดยเนื้อหาในบทความนี้จะประกอบไปด้วยเรื่องต่างๆดังนี้

1. การจัดการ Array โดยใช้ For-Loop
2. มาทำความรู้จัก Method ที่ช่วยในการจัดการ Array กัน
3. การนำ Method มา Chain ต่อกัน

การจัดการ Array โดยใช้ For-Loop

ปกติเมื่อเราได้หัดเขียน JavaScript ใหม่ๆ หรือเพิ่งฝึกเขียน เราจะได้พบกับการจัดการ Array ไม่ว่าจะเป็นการแสดงผล บวกค่าเพิ่มหรือกระทำสิ่งต่างๆกับแต่ละค่าใน Array เราสามารถทำได้โดยใช้ For loop ตามตัวอย่างดังนี้

//ต้องการได้ค่า Array ใหม่โดยแต่ละตัวนั้นค่าเป็น 2 เท่าจากเดิม
const numbers = [2,3,4,5,6]
let result = []
for (let i = 0; i < numbers.length; i++) {
   result.push(numbers[i]*2)
}
console.log(result) // [4,6,8,10,12]

จากตัวอย่างดังกล่าวได้วนลูปนำค่าใน Array Numbers แต่ละค่าไปคูณสองแล้วจากนั้นนำไปใส่ใน Array Result ส่งผลให้ได้ผลลัพธ์ใน Array Result เท่ากับ [4,6,8,10,12] ตามที่เราต้องการนั่นเอง

จะเห็นได้ว่าโค้ดจัดการ Array ข้างต้นสามารถจัดการ Array โดยได้ค่าถูกต้องตามที่ต้องการเลย แต่ในวันนี้เราจะมารู้จัก Method ที่ช่วยจัดการ Array กันที่ทำให้คุณไม่ต้องมาวนลูปเพื่อเก็บค่าแต่ละค่าด้วยตัวเอง, ไม่ต้องสร้าง Array Result เพื่อมารอรับค่า push จาก loop และยังอ่านโค้ดได้ง่ายอีกด้วย :)

เกริ่นซะนานมาเข้าเรื่องกันดีกว่าาาาา

มาทำความรู้จัก Method ที่ช่วยในการจัดการ Array กัน

Method ในการจัดการ Array ใน JavaScript นั้นมีหลายตัวมาก ซึ่งวันนี้ผู้เขียนจะทำการแนะนำตัวที่น่าสนใจจำนวน 7 ตัวด้วยกัน ได้แก่ ForEach, Map, Filter, Find, Every, Some และ Reduceโดยใน Method แต่ละตัวจะมีหัวข้อในการอธิบายดังนี้

1. หน้าที่ของ Method นั้นๆ
2. ตัวอย่างโค้ดและแผนภาพการทำงานของ Method นั้นพร้อมคำอธิบาย
3. การเขียนคำสั่งโดยใช้ For loop เพื่อให้ได้ผลลัพธ์เหมือนกับ Method นั้นๆ

Extra: ทบทวนการเขียน Arrow Function ก่อนเริ่ม

ทบทวนการเขียน Function แบบ Arrow Function เล็กน้อย เนื่องจากในบทความนี้ผู้เขียนจะแสดงโค้ด Function เป็น Arrow Function ทั้งหมด ผู้ที่เข้าใจอยู่แล้วสามารถข้ามไปเริ่มที่ Method ตัวแรกได้เลยครับผม :)

ปกติการเขียนในภาษา JavaScript เราสามารถเขียน Function ได้ดังนี้

function hello() {
  return "Hello"
}

หรือสามารถเขียน Function ใส่ในตัวแปรก็ได้เช่นกันดังนี้

const hello = function() { return "Hello" }

เราสามารถลดรูป Function ของเราให้เป็น Arrow Function ได้โดยการ ตัดคำว่า function ออก และเติมเครื่องหมาย => หลักจากวงเล็บ ดังนี้

const hello = () => { return "Hello" }
//นอกจากนี้ยังสามารถลดรูปเนื่องจากในฟังก์ชั่นนั้นได้ return ค่าอย่างเดียวได้ดังนี้
const hello = () => "Hello"

1. ForEach

มาเริ่มกันที่ตัวแรกกับ ForEach โดย ForEach จะมีหน้าที่เอาไว้วนลูปเพื่อนำค่าใน Array แต่ละตัวมากระทำตามใน Function ที่เรากำหนดการทำงานเอาไว้ โดย ForEach นั้น ไม่สามารถ Return ผลลัพธ์ ออกมาได้ ถ้า Return ออกมาจะเป็น undefined มาลองดูตัวอย่างกันดีกว่า ดังนี้

const animals = ['Ant', 'Bat', 'Cat', 'Dog']
// ใน Method forEach จะทำการรับ Function เพื่อทำหน้าที่เป็นตัวเพื่อให้ ค่าแต่ละตัว
// มาผ่านเพื่อให้ได้ผลลัพธ์ตาม Function ที่เราต้องการ (ดูรูปด้านล่างเพิ่มเติม)
animals.forEach((animal) => {
   console.log(animal)
})
// ผลลัพธ์จะได้ "Ant" "Bat" "Cat" "Dog"

ภาพแสดงการทำงานของ ForEach ตามตัวอย่างโค้ดด้านบน

จากตัวอย่างโค้ดด้านบนจะเห็นได้ว่าเรามี animals array ที่ประกอบไปด้วยสัตว์ 4 ชนิดคือ Ant, Bat, Cat, Dog เมื่อนำไปใส่กับ Method ForEach และใส่ Function ให้แสดงผล animal ออกมา สัตว์แต่ละตัวใน array animals จะถูกนำไปผ่าน Function ที่เรากำหนดไว้ว่าให้แสดงผล Console.log(animal) ออกมาทีละตัว ตามภาพการทำงานเลย ทำให้ได้ผลลัพธ์เป็นสัตว์แต่ละชนิดถูกแสดงใน Console ตามทำดับใน animals array นั่นเอง

จากโค้ดข้างต้นสามารถเขียนโดยใช้ For-loop ได้ดังนี้

const animals = ['Ant', 'Bat', 'Cat', 'Dog']
for (let i = 0; i < animals.length; i++) {
  console.log(animals[i])
}
// ผลลัพธ์ได้ดังนี้ "Ant" "Bat" "Cat" "Dog"

2. Map

สำหรับ Method Map นั้นจะคล้ายกับ ForEach เลย คือค่าใน Array แต่ละตัวจะทำการนำไปผ่าน Function ที่เรากำหนดไว้ แต่ Map นั้น สามารถ return ค่าออกมาได้โดยค่าที่ return ออกมาจะเป็น Array ซึ่งสามารถนำไปทำใน Method อื่นได้ (จะกล่าวเพิ่มเติมในช่วงท้ายของบทความ) ตัวอย่างของการทำงานของ Map เป็นดังนี้

const numbers = [35, 23, 17, 21]
const result = numbers.map((number) => {
  return number*2
})
console.log(result) // [70, 46, 24, 42]

ภาพแสดงการทำงานของ Map ตามตัวอย่างด้านบน

จากตัวอย่างโค้ดข้างต้นจะเป็นการนำ Array numbers มาผ่านเข้า Map โดยกำหนดฟังกชั่นให้แต่ละตัวนั้นผ่าน function number*2 ส่งผลให้ผลลัพธ์ออกมาได้ Array Result ที่มีผลลัพธ์เป็นค่าแต่ละตัวใน array numbers *2 นั่นเอง

สามารถเขียนโดยใช้ For Loop ที่ให้ผลลัพธ์ที่เหมือนกันได้ดังนี้

const numbers = [35, 23, 17, 21]
let result = []
for (let i = 0; i < numbers.length; i++) {
  result.push(numbers[i]*2)
}
console.log(result) // [70, 46, 34, 42]

3. Filter

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

const members = [ 
   {name: "Eve", age: 24}, 
   {name: "Adam", age: 48}, 
   {name: "Chris", age: 18}, 
   {name: "Danny", age: 30}
]
const result = members.filter((member) => {
  return member.age > 25
})
console.log(result)
// [{name: "Adam", age: 48}, {name: "Danny", age: 30}]

ภาพแสดงการทำงานของ Filter ตามตัวอย่างด้านบน

จากตัวอย่างโค้ดด้านบนเราได้ทำการ Filter Array members โดยที่กำหนดเงื่อนไขให้ว่าถ้า member.age>25 จะถูกเลือก โดยสมาชิกใน Array แต่ละตัวจะถูกนำมาผ่าน Function เพื่อตัวสอบว่าได้ตามเงื่อนไขที่กำหนดหรือไม่ถ้าได้ตามเงื่อนไข (return true) จะถูกนำไปรวมใน Array ใหม่เป็นผลลัพธ์ตามรูปนั่นเอง

สามารถเขียนโค้ดให้ได้ผลลัพธ์ตามตามบนโดยใช้ For loop ได้ดังนี้

const members = [ 
   {name: "Eve", age: 24}, 
   {name: "Adam", age: 48}, 
   {name: "Chris", age: 18}, 
   {name: "Danny", age: 30}
]
let result = []
for (let i = 0; i < members.length; i++) {
  if (members[i].age > 25) {
     result.push(members[i])
  }
}
console.log(result)
// [{name: "Adam", age: 48}, {name: "Danny", age: 30}]

4. Find

สำหรับ Method Find นั้นแทบจะเหมือนกับ Method Filter เลยแต่ต่างกันตรงที่ Method Find นั้น return ค่าออกมาเฉพาะผลลัพธ์ตัวแรกที่ทำได้ตามเงื่อนไขเท่านั้น ตัวอย่างของการทำงานเป็นดังนี้

const members = [ 
   {name: "Eve", age: 24}, 
   {name: "Adam", age: 48}, 
   {name: "Chris", age: 18}, 
   {name: "Danny", age: 30}
]
const result = members.find((member) => {
  return member.age > 25
})
console.log(result) // {name: "Adam", age: 48}

ภาพแสดงการทำงานของ Find ตามตัวอย่างด้านบน

จากโค้ดข้างต้นได้ทำการ Find Array members โดยต้องการผลลัพธ์ที่ member.age> 25 เมื่อค่าใน array members ทุกตัวผ่านฟังก์ชันจะพบว่า สมาชิกตัว Array {name: “Adam”: age: 48} เป็นตัวแรกที่ได้ตามเงื่อนไขข้างต้น ถึงถูก return ออกมาเป็น Output ทันที

สามารถเขียนโค้ดให้ได้ผลลัพธ์ตามตามบนโดยใช้ For loop ได้ดังนี้

const members = [ 
   {name: "Eve", age: 24}, 
   {name: "Adam", age: 48}, 
   {name: "Chris", age: 18}, 
   {name: "Danny", age: 30}
]
let result
for ( let i = 0; i < members.length; i++) {
  if (members[i].age > 25) {
     result = members[i]
     break
  }
}
console.log(result)

5. Every & Some

สำหรับ Method Every และ Some นั้น จะมีการทำงานที่ใกล้เคียงกันมาก ต่างกันตอนที่ก่อนจะออกมาเป็นผลลัพธ์เท่านั้น ผู้เขียนจึงทำการเขียนรวมในหัวข้อเดียวกันเลยเพื่อความสะดวก (แอบอู้ 5555) โดยการทำงานจะเป็นการนำสมาชิกใน Array แต่ละตัวไปผ่าน Function ที่เรากำหนดเงื่อนไขเอาไว้ เมื่อมีความ return ออกมาจะเป็น True หรือ False โดยใน Method Every จะนำค่าที่ได้นั่นมาต่อกันผ่าน Logical Operator And(&&) เอามาและนั่นเอง จะทำให้ได้ค่าผลลัพธ์ออกมา ส่วนใน Method Some จะนำมาผ่าน Logical Operator Or (||) ถ้าต้องการทบทวนเรื่อง Logical Operator เพื่อเติมสามารถคลิกอ่านได้ ที่นี่ มาดูตัวอย่างโค้ดกันดีกว่า

const members = [ 
   {name: "Eve", age: 24}, 
   {name: "Adam", age: 48}, 
   {name: "Chris", age: 18}, 
   {name: "Danny", age: 30}
]
// Every Method
const everyResult = members.every((member) => {
  return member.age > 25
})
console.log(everyResult) // false
// Some Method
const someResult = members.some((member) => {
  return member.age > 25
})
console.log(someResult)  // true

ภาพแสดงการทำงานของ Every และ Some ตามตัวอย่างด้านบน

จากโค้ดด้านบนจะทำการนำสมาชิก Array แต่ละตัวมาผ่าน Function ที่เราได้กำหนดเงื่อนไขแล้วโดยในที่นี้คือ member.age > 25 แต่ละตัวจะ return ค่าออกมาไม่เป็น true ก็ false จากนั้นถ้าเป็น Method Every จะทำค่าผลทุกตัวมา And(&&) กัน ส่วน Method Some จะนำผลลัพธ์ทุกตัวมา Or(||) ส่งผลให้ได้ผลลัพธ์เป็น True หรือ False ออกมานั่นเอง

สามารถเขียนโค้ดที่ผลลัพธ์เหมือนกันโดยใช้ For loop ได้ดังนี้

const members = [ 
   {name: "Eve", age: 24}, 
   {name: "Adam", age: 48}, 
   {name: "Chris", age: 18}, 
   {name: "Danny", age: 30}
]
// Every Method
let everyMember = true
for (let i = 0; i < members.length; i++) {
  var member = members[i]
  if (member.age > 25) {
    everyMember = everyMember && true
  } else {
    everyMember = everyMember && false
  }
}
console.log(everyMember)
// Some Method
let someMember = false
for (let i = 0; i < members.length; i++) {
  var member = members[i]
  if (member.age > 25) {
    someMember = someMember || true
  } else {
    someMember = someMember || false
  }
}
console.log(someMember)

6. Reduce

มาถึงตัวสุดท้ายกันแล้วกับ Reduce ซึ่งเป็น 1 ในตัวที่ผู้เขียนงงกับ Method ตัวนี้พอสมควรในช่วงแรกที่ได้เจอ 5555 Method Reduce นั้นจะทำหน้าที่รวมผลลัพธ์โดยเราสามารถกำหนดค่าเริ่มต้น และ Function ที่ใช้ในการรวมได้ ก่อนดูตัวอย่างขออธิบายก่อนว่าในโค้ดนั้นจะมีการรับ Parameter 2 ตัวก็คือ Function และ Initial Value มาดูตัวอย่างกันเลย

const numbers = [10, 20, 30, 40]
const result = numbers.reduce((sum,number) => {
  return sum+number
}, 0)
console.log(result) // 100

ภาพแสดงการทำงานของ Reduce ตามตัวอย่างด้านบน

จากโค้ดด้านบนจะเป็นว่าเราได้กำหนดค่า Initial Value เป็น 0 ซึ่ง 0 นั้นจะเป็นค่า Sum เริ่มต้นเมื่อตัวแปรใน Array ตัวแรกมาผ่าน Function ก็จะถูกรวมกับ ค่า sum ทำให้ตอนนี้ค่า sum = 10 จากนั้นเมื่อตัวถัดไปเข้ามาใน Function ก็จะถูกรวมกับค่า sum ซึ่งตอนนี้เท่ากับ 10 ทำให้กลายเป็นค่า sum อันใหม่เท่ากับ 30 นั้นเอง จากนั้นก็รวมกันไปเรื่อยๆจนครบทำให้ได้ผลลัพธ์เท่ากับ 100

สามารถเขียนโค้ดที่ผลลัพธ์เหมือนกันโดยใช้ For loop ได้ดังนี้

const numbers = [10, 20, 30, 40]
let result = 0
for (let i = 0; i < numbers.length; i++) {
  result += numbers[i]
}
console.log(result) // 100

การนำ Method มา Chain ต่อกัน

ตอนนี้เราก็ได้รู้จัก Method ต่างๆ ที่ทำให้ชีวิตในการจัดการ Array สะดวกขึ้นแล้ว แต่ในบางครั้งเราก็ต้องการทำอะไรที่มากกว่าการทำผ่าน Method เดียวแล้วจบไป ผู้เขียนเลยเลยแนะนำการเอา Method ที่ได้เรียนรู้ไปมา Chain ต่อกันเพื่อให้ผู้อ่านได้เห็นภาพการนำ Method มา Chain ต่อกันอย่างง่ายๆ ดังนี้

เช่น ต้องการค่ารวมกันใน Array ทั้งหมด โดยที่ค่าที่นำมารวมแต่ละตัวนั้นต้อง *2 ด้วย เราสามารถเขียนได้ดังนี้

const numbers = [20, 30, 40, 60]
let result = numbers
   .map((number) => number * 2)
   .reduce((sum, number) => sum + number)
console.log(result) // 300

ในตัวอย่างนี้ได้ทำการย่อ เพื่อให้ผู้อ่านได้เห็นว่าโค้ดมันสั้นกว่าการใช้ For loop เพื่อที่จะมาหาคำตอบเยอะมากกกกกก แถมถ้าเข้าใจการทำงานแล้วยังอ่านง่ายอีกด้วย โดยในตอนแรกเราได้นำ numbers มา map ส่งผลให้ได้ผลลัพธ์เป็น array return ออกมาซึ่งสามารถนำมาทำต่อได้กับ method reduce เพื่อที่จะรวมผลลัพธ์เป็นก้อนเดียวกัน สุดท้ายแล้วก็จะได้ผลลัพธ์ตามที่เราต้องการนั่นเอง เย้!!!

จบไปแล้วครับผม สำหรับบทความนี้ ผู้เขียนหวังว่าผู้คนที่หลงเข้ามาอ่านคงจะได้อะไรกลับไปบ้างไม่มากก็น้อยครับ 555555 ถ้าใครอยากอ่านรายละเอียดเกี่ยวกับแต่ละ method เพื่อที่จะต้องการทำอะไรมากกว่านี้เช่น เราจะใช้ map แต่ต้องการค่า index ของแต่ละตัวด้วยเนี่ยสิ อะไรอย่างงี้ ผู้เขียนจะแปะเอกสารอ้างอิง เพื่อให้ผู้อ่านทุกท่านที่สนใจได้ไปอ่านเพิ่มเติมละกันครับ :D สุดท้ายนี้มีอะไรติชม ดีไม่ดี ตรงไหน คอมเมนต์ได้เลยครับ ผู้เขียนก็ไม่ได้เก่งอะไรมากมาย แล้วก็เพิ่งฝึกเขียนบทความด้วยจะได้เอามาพัฒนาเพิ่มเติมครับผม สุดท้ายนี้ก็ขอลาไปก่อนด้วยคำว่า

Happy Coding สวัสดีครับ :D

เอกสารอ้างอิง

Logical Operators. Retrieved August, 9, 2017, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

Array. Retrieved August, 8, 2017, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Functional programming in Javascript: map, filter and reduce. Retrieved August, 8, 2017, from http://cryto.net/~joepie91/blog/2015/05/04/functional-programming-in-javascript-map-filter-reduce/