[Let’s Code 101] Lodash Library ดจีย์ๆสำหรับ Javascript

https://blog.avarteq.com/wp-content/uploads/2016/02/Lodash.jpg

หลังจากที่มาเขียน React Native ได้สักพัก ก็เริ่มได้เรียนรู้ React JS ควบคู่ไปด้วย(เอาจริงๆมันแทบไม่ต่างกันเท่าไหร่เลยแหะ 555555) แต่นั้นไม่ใช่ประเด็นสำหรับการจะแนะนำ Lib ตัวนี้ (แล้วจะพูดทำไม = =) ประเด็นอยู่ที่ว่าผมมีปัญหากับการจัดการ Array,Object ต่างๆนาๆที่ส่งมาจาก service บางทีก็มีท่าแปลกๆเอาซะไปไม่เป็นเลย เลยได้เจ้า lodash มาช่วยทุนแรง ปะเริ่มกันเลยดีกว่า เสียเวลาจริงๆ 555555

เคยมั้ยกับการที่ต้องจัดการกับ Array, String, Object, Number ที่ยุ่งยากแล้วต้องเขียนโค้ดหลายๆบรรทัดเพื่อจะเช็คหรือทำอะไรสักอย่าง

What ‘s Lodash?

Lodash คือ Library ของ Javascript ที่จะช่วยจัดการเรื่องของ Array, String, Object, Number และอื่นๆอีกมากมายที่จะช่วยให้ชีวิตของท่านง่ายขึ้นช่วยประหยัดเวลาในการเขียนฟังก์ชั่นแถมยังประหยัดบรรทัดในไฟล์อีกด้วย 👍🏻

ซึ่งความสามารถของมันนั้นเยอะมว๊ากกกกและคงไล่ไม่หมด จะขอยกตัวอย่างเฉพาะที่ผมใช้งานบ่อยๆละกันนะ ลุยย!!

Object

อยากเช็คอะว่า Object มี field นี้มาให้รึป่าว

อยากเช็คอะว่ามี field data ป่าว ถ้าไม่ใช้ lodash ก็อาจจะใช้ท่านี้

object.data !== null

ถ้าอยากเช็คว่าใน data มี number ป่าว

object.data.number !== null

ละถ้ามันลึกไปเรื่อยๆ

object.data.number.blah.blah !== null

พอใช้งานจริงมันก็จะประมาณนี้ ค่อยๆเช็คที่ละ path

มันมีท่าสวยกว่านี้แหละนะแต่ผมอาจจะไม่รู้ 55555

ท่าชักเริ่มไม่สวยแล้วก็อ่านยากแหะถ้ามันซ้อนกันเยอะมากๆเจ้า lodash มีคำสั่ง has มาช่วยคุณเองเพียงแค่โยนก้อน object ที่จะเช็คเข้าไป แล้วตามด้วย field ที่ต้องการจะเช็ค

_.has(object,['data','number',...])
// true
_.has(object,'data.number')
// true

เพียงเท่านี้ก็ได้การเช็คแบบอ่านแล้วเข้าใจง่ายด้วย 👍🏻 อุบ๊ะ!!! มันเยี่ยมจริงๆ

ไปเลยแมคนั่มม!!! บอกอายุมาก 555555

เช็คว่ามี field แล้วดึง value ออกมาใช้แบบคูลๆได้มั้ยอะ

ได้!! จัดไป lodash มีคำสั่ง get ให้

_.get(object,['data','number'])
//ได้ value ออกมาเลย
_.get(object,'data','number')
// ได้ number : value

ถ้าอยากใส่ค่า default ไว้ในกรณีที่มัน null หรือ undefind ก็แค่

_.get(object,'data','text','default')
// default เพราะตัว data.text เป็น null เนาะ

อยากได้แค่ ข้อมูลบางตัวเท่านั้นโดยหยิบจาก key

object = { 'a': 1, 'text': 'hello', 'c': 3,'message':'lodash' }

ก็แค่ใช้คำสั่ง pick

_.pick(object,'a','c')
//{ a: 1 ,c : 3}

อยากได้ข้อมูลบางตัวเท่านั้นโดยดูจาก type เอาอะทำได้ป่าว

ez มั่กๆจัดไป

_.pickBy(object,_.isString)
// {'text':'hello','message':'lodash'}
_.pickBy(object,_.isInteger)
// {a:1,c:3}

หายเหนื่อยกับการต้องมานั่งดึง data เช็คกันเลยทีเดียว

let’ s dance

Array

อยาก filter ของข้างใน Array อะทำได้มั้ย

number = [10,8,9,12,15,1,2,3,4]

ต้องการแค่ number > 10 หลายๆคนอาจจะใช้ filter ของ Javascript เนาะหน้าตาก็จะออกมาเป็นแบบนี้

ถ้าใช้ lodash ก็จะได้หน้าตาแบบนี้

_.filter(numbers,(data)=> { return data > 10 })
// [10,12,15]

ซึ่งเอาจริงๆมันก็ท่าเดียวกันนั่นแหละแต่ผมรู้สึกว่ามันอ่านง่ายกว่าอะนะ 555555

ไม่อยากได้พวก falsey ในก้อน array แล้วก็ไม่อยากวนลูปเช็คด้วย

let array = [0, 1, false, 2, '', 3,"hello","",null]

จัดไปด้วย compact

_.compact(array)
//[0,1,2,3,"hello"]

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

สำหรับใครที่อยากใช้เจ้า lodash ก็สามารถเข้าไปอ่าน Document เพิ่มได้ ที่นี้ เลย

สำหรับคำสั่งอื่นๆเดี๋ยวจะพยามมาต่อให้ใน blog หน้านะครับอัดตู้มเดียวคิดว่าคฃยาวมากกกกก 555555

หวังว่า Blog นี้อาจจะพอมีประโยชน์กับผู้ที่เข้ามาอ่านไม่มากก็น้อยนะครับและถ้าผิดพลาดประการใดไปก็ขออภัยด้วยครับผมม

สุดท้ายนี้ สวัสดีปีใหม่ครับทุกคน 👏 👏