[ES6] Basic Basic JavaScript โย่ว ๆ

ref: https://kipalog.com/posts/ES6-hay-la-Javascript-2015

โย่วๆ หลังจากที่ผมเคยเขียน js ก่อนนู้นนน พอของใหม่ออกมาเลยต้อง unlearn relearn ของใหม่ซะหน่อย เลยอยากจะมาแชร์ให้อ่านกัน เผื่อคนที่กำลังหัดอยู่ จะได้เข้าใจด้วยถ้อยคำภาษาไทย อ่านง่ายๆ จากการสรุปตามที่ผมเข้าใจนะครับ :D อาจจะทำให้ชีวิตง่ายขึ้น ก็ เป็น ได้ ~~~

1. Arrow Function

ปกติจะเขียนกันแบบนี้

function(param1, param2, ..., paramN){ statement }

วิธีเขียน Arrow function

(param1, param2,...,paramN) => { statement }
หรือ
(param1, param2,..., paramN) => expression
อันบนมีค่าเท่ากับ
(param1, param2,...,paramN) => { return expression }
*ถ้ามี parameter ตัวเดียว จะเขียน ( ) ครอบ parameter หรือไม่ก็ได้
(param) => { statement }
param => { statement }
ถ้าเป็น function แบบไม่มี parameter จะเขียนแบบนี้
() => { statement }

สั้น !

ในตัวอย่างต่อจากนี้จะใช้ arrow function หมดเลยนะครับ จะได้ฝึกใช้ไปด้วยเลย :)

2. map , filter , reduce

มาถึงของเด็ดที่ผมก็เพิ่งเคยใช้เหมือนกัน 555 แต่ได้ลองใช้แล้วรู้สึกดีมากกกกกกก 3 ตัวนี้จะเป็นเรื่องของ Functional Programming นะครับ จริงๆแล้ว map,filter,reduce สามารถใช้งานได้เหมือนกันนะ บางงานอาจจะใช้ได้ทั้ง map , filter , reduce เลย แล้วแต่เราอยากจะเลือกใช้ว่าชอบใช้อะไร

map

definition ของ map จริงๆแล้วเอาไว้สร้างเป็น array ใหม่ จากการที่เราไปทำอะไรสักอย่างกับ data แต่ละตัวใน array เดิม มันก็คือ วนลูป แก้ค่า แล้วได้ array ใหม่นั่นเอง

ซึ่งหมายความว่า เราไม่ต้องเขียนวนลูปแล้วเย้ ~~~ [แล้วแต่สถานการณ์เนอะ]

syntax

parameter ของ map โดยปกติแล้ว จะต้อง pass callback function ไป โดย callback สามารถมี parameter ได้ 3 ตัว

1 currentValue คือค่าของข้อมูลในแต่ละ index // หรือที่เรียกๆกันว่า ค่าในแต่ละช่องใน array อะ

2 index คือ ตำแหน่งอะ ตำแหน่งไหนใน array อะ

3 array งงละสิ มัน pass array ก้อนนั้นที่กำลัง map ไปได้ด้วย เผื่อจะเอาค่าใน array ไปทำอะไรสักอย่าง เช่น เช็คขนาดของ array ไรงี้

let arr = [1, 2, 3, 4, 5]
let newArr = arr.map((value, index) => {
return value * 2
})
console.log(newArr)  // [2, 4, 6, 8, 10]

โปรแกรมจะวนทุกตัวใน arr แล้ว value จะถูกนำไป * 2 และจะได้ array ตัวใหม่เป็น newArr

filter

ตรงตัวเลย filter ตัวกรอง เอาไว้กรองข้อมูลที่เราอยากได้อะ มันก็จะคล้ายๆ กับ map นะ แต่ มันจะมี condition หรือเงื่อนไขของการที่จะ filter ออกมา

syntax

parameters เหมือนกับ map เลย แค่เปลี่ยนเป็น filter กับข้างใน statement เป็น condition แทน

let arr = [1, 2, 3, 4, 5]
let newArr = arr.filter((value, index) => {
return value > 2
})
console.log(newArr)  // [3, 4, 5]

โปรแกรมจะวนทุกตัวใน arr แล้ว value ที่มีค่ามากกว่า 2 จะได้ไปต่อ ใน array ที่ชื่อ newArr

reduce

ถ้าอธิบายแบบสั้น ๆ มันก็คือ map ที่มีฟังก์ชั่นที่มีตัวเก็บค่าไว้ให้อะ เอามาใช้หาค่าเมื่อมันรวมกัน หรือ ค่าเมื่อมีเงื่อนไขอะไรสักอย่าง ส่วนใหญ่ก็เอาไว้ใช้กันประมาณนี้ เพราะค่าที่ return มา จะไม่ใช่ array เหมือนกับ map , filter แต่มันจะเป็นค่าจากการคำนวณ ที่เรา return กลับออกมา

syntax

parameter นอกจาก callback แล้ว ยังต้อง pass initialValue เข้าไปด้วย เพื่อกำหนดค่าเริ่มต้นให้กับตัว accumulator หรือตัวที่เก็บค่าให้เรา

ถ้าไม่ใส่ initialValueจะตั้งตัวแรกของ array เป็นค่าเริ่มต้นนะครับ

ใน callback ก็จะมี accumulator หรือตัวเก็บค่าผลลัพธ์

currentValue ก็เหมือนๆกับ map, filter คือค่าปัจจุบันที่กำลังวนลูปอยู่

index ตำแหน่ง ว่าค่าๆนั้น อยู่คำแหน่งไหนใน array

array และสามารถ pass array เข้ามาได้เช่นกัน

let arr = [1, 2, 3, 4, 5]
let sumAll = arr.reduce((sum, value) => {
return sum+value
}, 0)
console.log(sumAll)  // 15

ง่ายเนอะ 555

จริงๆ reduce ใช้ได้หลากหลายอยู่นะ เช่น

let arr = [1, 2, 3, 4, 5]
let doubled = arr.reduce((total, value) => {
total.push(value * 2)
return total
}, [])
console.log(doubled) // [2, 4, 6, 8, 10]

กลายเป็น map เจ๋ยเลยยยย

const fruitBasket = ['banana', 'cherry', 'orange', 'apple', 'cherry', 'orange', 'apple', 'banana', 'cherry', 'orange', 'fig' ];
let totalFruit = fruitBasket.reduce((total, current) => {
total[current] = (total[current] || 0) + 1
return total
}, {})
console.log(totalFruit) // {banana: 2, cherry: 3, orange: 3, apple: 2, fig: 1}
note : ไอ || คือ ถ้า total[index] ไม่มีอยู่ จะให้ค่าเริ่มต้นเป็น 0 สรุปคือ เอาไว้กำหนดค่าเริ่มต้น ถ้าสิ่งๆนั้นไม่ได้มีอยู่ตั้งแต่แรก

reduce ก็จะวน fruitBasket ทีละอัน แล้ว total ค่าเริ่มต้นเป็น {} [Object เปล่า] ส่วน total[current] ก็จะเป็น total ที่ key current ถ้ายังไม่มีค่า ก็จะกำหนดให้เป็น 0 แล้ว + 1 เพิ่มเข้าไป เพื่อนับว่ามีของสิ่งนั้นอยู่แล้ว 1 ชิ้น พอรอบถัดไปมา total[current] ถ้า key มันตรงกับค่าที่มีอยู่แล้ว ก็จะเป็นการ เอา total[current] + 1 เพิิ่มเข้าไปแทน

สุดท้ายแล้วเราก็จะได้ object ที่มี fruit พร้อมกับนับให้ด้วยว่ามันมีอะไร และมีอยู่เท่าไหร่

แถม

some

อธิบายสั้นๆ คือเหมือนเราวนลูป if ดูว่าใน array นี้มีสิ่งที่เราต้องการรึเปล่าอะ

return กลับมาเป็น boolean

parameters เหมือนกับ map เลย

let arr = [1, 2, 3, 4, 5]
let sumAll = arr.some((value, index) => {
return value > 3
})
console.log(sumAll)  // true

จบแล้ววววววววววววววววววววววววว

ขอบคุณที่อ่านจนจบนะครับ :D

Like what you read? Give Pozterz a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.