การใช้งาน lodash ไลบรารี่บน Node.js

Lodash เป็นไลบรารี่ในภาษา JavaScript ที่ประกอบไปด้วยฟังก์ชันสำหรับอำนวยความสะดวกในการเขียนโปรแกรม เนื่องจาก JavaScript นั้นเป็นภาษาที่มีน้ำหนักเบา มันจึงมีเพียงโมดูล คลาส และฟังก์ชันพื้นฐานหลักในการเขียนโปรแกรมเท่านั้น ไม่ได้มีฟังก์ชันช่วยเป็นจำนวนมากเหมือนกับภาษาอย่าง Python หรือ Ruby นั่นเป็นเหตุผลว่าทำไม Lodash จึงถูกสร้างขึ้นมา

ในบทนี้ คุณจะได้เรียนรู้การใช้งาน Lodash บน Node.js ที่สามารถช่วยในการทำงานกับอาเรย์ ตัวเลข ออบเจ็ค และ String ในภาษา JavaScript ทำได้ง่ายขึ้น และนอกจากนี้ คุณสามารถใช้ Lodash เพื่อเขียนภาษา JavaScript บนเว็บเบราว์เซอร์ได้ นี่เป็นเนื้อหาในบทนี้

• การติดตั้ง Lodash ด้วย npm
• ทำไมต้องใช้ Lodash
• ฟังก์ชันของ Lodash
• คู่มือการใช้งาน Lodash

การติดตั้ง Lodash จาก npm

Lodash เป็นแพ็กเกจบน npm และเพื่อนำมาใช้งานบนโปรเจ็ค Node.js คุณจะต้องสร้างโปรเจ็คเป็นแบบ npm ด้วยการรันคำสั่ง npm init คุณสามารถเรียนรู้เกี่ยวกับการใช้งาน npmได้ที่ การสร้างโปรเจ็คด้วย NPM และหลังจากที่สร้างโปรเจ็คเสร็จแล้ว ให้ติดตั้ง Lodash โดยพิมพ์คำสั่งต่อไปนี้ลงบน Command line

npm install lodash

นอกจากนี้ คุณยังสามารถระบุตัวเลือกในการติดตั้ง Lodash ได้ ยกตัวอย่างเช่น

npm install -g lodash
npm install --save lodash

หากต้องการติดตั้ง Lodash เป็นแบบ Global ระบุพารามิเตอร์ -g ในตอนที่ติดตั้ง หรือถ้าคุณต้องการติดตั้งลงบน Dev dependencies ระบุ --save ในตอนที่ติดตั้ง และเมื่อการติดตั้งเสร็จสิ้น เราสามารถนำมันมาใช้งานได้ด้วยคำสั่งต่อไปนี้

const lodash = require('lodash');

นี่เป็นการนำเข้าโมดูล lodash ด้วยฟังก์ชัน require มันส่งค่ากลับเป็นออบเจ็คของฟังก์ชันทั้่งหมดของ Lodash ที่สามารถเข้าถึงได้จากตัวแปร lodash

ทำไมต้องใช้ Lodash

Lodash เป็นไลบรารี่ของภาษา JavaScript ที่ประกอบไปด้วยฟังก์ชันอำนวยความสะดวกในการทำงานกับอาเรย์ ตัวเลข ออบเจ็ค และ String และอื่นๆ ที่คุณสามารถนำมาใช้โดยที่ไม่ต้องเขียนขึ้นมาเอง Lodash ประกอบไปด้วยฟังก์ชันที่ต้องการใช้โดยนักพัฒนาส่วนมาก และถูกปรับปรุงและเพิ่มฟังก์ชันใหม่ๆ เข้ามาอย่างต่อเนื่องตามคำแนะนำ เนื่องจากมันเป็นโปรเจ็ค Open source

นี่ทำให้ในปัจจุบัน Lodash ได้กลายมาเป็นแพ็กเกจถูกนำไปใช้งานโดยแพ็กเกจอื่นมากที่สุดบน npm และในวันที่บทความนี้ถูกเขียน มีมากกว่า 133,918 แพ็กเกจที่ใช้งาน Lodash บน npm (อ้างอิงจาก https://www.npmjs.com/package/lodash)

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

function mean(numbers) {
    let sum = 0;
    for (let n of numbers)
        sum += n;
    return sum / numbers.length;
}

console.log(mean([2, 4, 6, 8]));

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

5

ในตัวอย่างนี้ ฟังก์ชัน mean เป็นฟังก์ชันที่เราสร้างขึ้นมาสำหรับหาค่าเฉลี่ยของตัวเลขในอาเรย์ที่ส่งเป็นพารามิเตอร์ของฟังก์ชัน และส่งค่ากลับเป็นค่าเฉลี่ยที่ได้จากการคำนวณ นี่เป็นฟังก์ชันที่เรียบง่ายแต่ไม่มีในภาษา JavaScript ดังนั้นเราจะต้องเขียนมันด้วยตัวเอง

แน่นอนว่ามันมีหลายวิธีสำหรับการเขียนโปรแกรมเพื่อแก้ปัญหาใดๆ ในการหาผลรวมของตัวเลขในอาเรย์คุณสามารถใช้เมธอด reduce ในการหาผลรวมของตัวเลขได้เช่นกัน ยกตัวอย่างเช่น

function mean(numbers) {
    let sum = numbers.reduce((a, b) => a + b);
    return sum / numbers.length;
}

ในตัวอย่างนี้ แทนที่จะใช้คำสั่ง for loop เพื่อวนในการหาผลรวมของตัวเลข เราใช้เมธอด reduce ของอาเรย์ในภาษา JavaScript สำหรับหาผลรวมแทน ก่อนนำมาหารด้วยจำนวนของตัวเลขทั้งหมดเพื่อหาค่าเฉลี่ย

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

ในตัวอย่างนี้ต่อไป มาเขียนโปรแกรมสำหรับสุ่มตัวเลขจำนวนเต็มจากช่วงที่กำหนด ในภาษา JavaScript มีฟังก์ชันสำหรับสุ่มตัวเลข Math.random สำหรับสุ่มตัวเลขทศนิยมระหว่าง 0-1 และนี่ไม่ใช่สิ่งที่เราต้องการ แต่เราสามารถนำมันประยุกต์ใช้เพื่อแก้ปัญหาของเราเอง และนี่เป็นตัวอย่างของโปรแกรมสุ่มตัวเลขจำนวนเต็มระหว่าง min และ max ในภาษา JavaScript

function randomNumber(min, max) {
    const diff = max - min + 1;
    return Math.floor(Math.random() * diff) + min;
}

console.log(randomNumber(1, 10));

และนี่เป็นผลลัพธ์จากการรันโปรแกรมสามครั้งสำหรับสุ่มตัวเลขที่มีค่าระหว่าง 1 - 10

5
2
8

ในตัวอย่างนี้ เราได้สร้างฟังก์ชัน randomNumber สำหรับสุ่มตัวเลขระหว่าง min และ max โดยการประยุกต์การใช้งานฟังก์ชันพื้นฐานของภาษา JavaScript เพื่อให้ได้ผลลัพธ์ที่ต้องการ

const diff = max - min + 1;
return Math.floor(Math.random() * diff) + min;

ฟังก์ชัน Math.random ใช้เพื่อสุ่มตัวเลขทศนิยมที่มีค่าจาก 0 แต่ไม่เกิน 1 และนำมาคูณกับ diff ผลต่างระหว่างช่วงของตัวเลขเพื่อขยายขนาดให้เท่ากับช่วงดังกล่าว จากนั้นแปลงให้เป็นตัวเลขจำนวนเต็มด้วยฟังก์ชัน Math.floor และบวกกับค่าที่น้อยที่สุด min เพื่อให้ตัวเลขที่ได้จากการสุ่มเริ่มต้นที่นี่

จากสองตัวอย่างเป็นงานที่สามารถพบได้ทั่วไป แม้เราจะสามารถเขียนมันได้อย่างไม่มีปัญหา แต่นั่นอาจทำให้คุณใช้เวลาในการทำงานมากขึ้น เนื่องจากต้องใช้เวลาในการเขียนและทดสอบโปรแกรม ดังนั้นเราสามารถใช้ Lodash โดยที่ไม่ต้องเสียเวลาทำเอง

จากฟังก์ชันหาค่าเฉลี่ยและสุ่มตัวเลขก่อนหน้า เราสามารถใช้งานมันได้จาก Lodash และนี่เป็นตัวอย่างของการใช้ฟังก์ชันจากไลบรารี่ Lodash สำหรับหาค่าเฉลี่ยของตัวเลขในอาเรย์และสุ่มตัวเลขจากช่วงที่กำหนดเหมือนกับที่เราทำ

const lodash = require('lodash');

console.log('mean:', lodash.mean([2, 4, 6, 8]));
console.log('random:', lodash.random(1, 10));

นึี่เป็นผลลัพธ์การทำงานของโปรแกรมจากการใช้งาน Lodash

mean: 5
random: 3

ในตัวอย่าง ฟังก์ชัน mean และ random เป็นฟังก์ชันเพื่อหาค่าเฉลี่ยและสุ่มตัวเลข ตามลำดับ เหมือนกับที่เราเขียนไปในก่อนหน้า แต่ในครั้งนี้เราใช้มันจากไลบรารี Lodash แทน ซึ่งสามารถลดเวลาในการพัฒนาโปรแกรมได้เป็นอย่างมาก

ทุกฟังก์ชันใน Lodash ถูกเขียนด้วยภาษา JavaScript สำหรับอำนวยความสะดวกเท่านั้น อย่างไรก็ตาม นั่นไม่ได้หมายความว่าทุกโปรเจ็คจะต้องการใช้มัน คุณสามารถเขียนทุกอย่างขึ้นมาเองได้ ยกตัวอย่างเช่น ถ้าหากคุณต้องการฝึกทักษะการเขียนโปรแกรมของคุณเอง หรือไม่ต้องการใช้มันเนื่องด้วยเหตุผลบางอย่าง หรือทีมของคุณมีนโยบายในการสร้างไลบรารี่เป็นของตัวเอง

ฟังก์ชันของ Lodash

Lodash นั้นประกอบไปด้วยฟังก์ชันสำหรับจัดการกับอาเรย์ ตัวเลข ออบเจ็ค และ String และอื่นๆ ซึ่งบางฟังก์ชันก็ซ้ำกับที่มีอยู่แล้วในภาษา JavaScript ในกรณีนี้ เราแนะนำให้ใช้ฟังก์ชันมาตรฐานของ JavaScript แทน และใช้ฟังก์ชันจาก Lodash ที่จำเป็นหรือเมื่อมันไม่มีอยู่ในภาษา JavaScript เท่านั้น

นี่เป็นหมวดหมู่ของฟังก์ชันที่สามารถใช้ได้ใน Lodash

• Array: ประกอบไปด้วยฟังก์ชันสำหรับจัดการกับอาเรย์
• Collection: ประกอบไปด้วยฟังก์ชันสำหรับจัดการกับข้อมูลประเภทคอลเล็กชัน
• Date: ประกอบไปด้วยฟังก์ชันเกี่ยวกับวันที่
• Function: ประกอบไปด้วยฟังก์ชันอำนวยความสะดวกทั่วไป
• Lang: ประกอบไปด้วยฟังก์ชันทั่วไปในภาษา JavaScript
• Math: ประกอบไปด้วยฟังก์ชันทางคณิตศาสตร์
• Number: ประกอบไปด้วยฟังก์ชันเกี่ยวกับตัวเลข
• Object: ประกอบไปด้วยฟังก์ชันเกี่ยวกับกับออบเจ็ค
• Seq: ประกอบไปด้วยฟังก์ชันสำหรับจัดการกับลำดับ
• String: ประกอบไปด้วยฟังก์ชันเกี่ยวกับ String
• Util: ประกอบไปด้วยฟังก์ชันอำนวยความสะดวกทั่วไป

ในการนำเข้าฟังก์ชันเพื่อใช้งานในโปรแกรม คุณสามารถนำเข้าฟังก์ชันทั้งหมดเพียงครั้งเดียว หรือนำเข้าเพียงหมวดหมู่ที่ต้องการชโดยระบุโมดูลย่อยของส่วนที่ต้องการนำเข้าได้ ยกตัวอย่างเช่น

// Import everything
const lodash = require('lodash');
const _ = require('lodash');

// Import from specific categories
const math = require('lodash/math');
const util = require('lodash/util');

หมายเหตุ: ในการนำเข้าโมดูล Lodash เรามักจะนำเข้าและเก็บในตัวแปร _ ซึ่งเป็นชื่อของตัวแปรที่นิยมและแนะนำโดย Lodash เอง อย่างไรก็ตาม คุณสามารถนำเข้าและเก็บไว้ในตัวแปรชื่อว่าอะไรก็ได้ตามที่ต้องการ เนื่องจากมันเป็นเพียงตัวแปร

ต่อไปมาดูตัวอย่างการใช้งานฟังก์ชันที่น่าสนใจของ Lodash ในตัวอย่างนี้ เป็นการเขียนโปรแกรมสำหรับแสดงการดำเนินการเกี่ยวกับเซ็ต โดยการใช้อาเรย์ฟังก์ชันของ Lodash เพื่อหาค่า Intersection, Union และ Difference ของเซ็ต นี่เป็นตัวอย่าง

const array = require('lodash/array');

let a = [1, 2, 3, 4, 5];
let b = [3, 4, 5, 6, 7];

console.log('Intersection:', array.intersection(a, b));
console.log('Union:', array.union(a, b));
console.log('Difference:', array.difference(a, b));

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Intersection: [ 3, 4, 5 ]
Union: [ 1, 2, 3, 4, 5, 6, 7 ]
Difference: [ 1, 2 ]

จะเห็นว่าการดำเนินการทางเซ็ตสามารถทำได้อย่างง่ายโดยการใช้ฟังก์ชันของอาเรย์จากไลบรารี Lodash เราได้ใช้สามฟังก์ชันเพืื่อหาค่า Intersection, Union และ Difference ของเซ็ต คุณสามารถเขียนฟังก์ชันเหล่านี้ได้ด้วยตัวเอง แต่นั่นไม่จำเป็นแล้วตอนนี้

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

const _ = require('lodash');

let users = [
    { name: 'chris', age: 48 },
    { name: 'barney', age: 36 },
    { name: 'fred', age: 40 },
    { name: 'barney', age: 34 }
];

let sorted = _.sortBy(users, ['name', 'age']);
console.log(sorted);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

[
  { name: 'barney', age: 34 },
  { name: 'barney', age: 36 },
  { name: 'chris', age: 48 },
  { name: 'fred', age: 40 }
]

ฟังก์ชัน sortBy ใช้สำหรับเรียงข้อมูลในอาเรย์โดยใช้ Key ของออบเจ็ค ในตัวอย่างได้ระบุ Key ในการจัดเรียงเป็น name และตามด้วย age ตามลำดับ นั่นหมายความว่าโปรแกรมจะเรียงจากชื่อก่อนจากน้อยไปมาก และถ้าหากชื่อในออบเจ็คมีค่าเท่ากัน การจัดเรียงจะถูกพิจารณาจากอายุแทน จากน้อยไปมากเช่นเดียวกัน

ในการทำงานปกติฟังก์ชัน sortBy จะเรียงข้อมูลจากน้อยไปมากเสมอ อย่างไรก็ตาม เราสามารถใช้ฟังก์ชัน orderBy เพื่อกำหนดทิศทางในการจัดเรียงข้อมูลได้ ในตัวอย่างนี้ เป็นการเรียงจากชื่อมากไปน้อย และถ้าหากชื่อเท่ากันจะเรียงตามด้วยอายุจากน้อยไปมากแทน

const _ = require('lodash');

let users = [
    { name: 'chris', age: 48 },
    { name: 'barney', age: 36 },
    { name: 'fred', age: 40 },
    { name: 'barney', age: 34 }
];

let sorted = _.orderBy(users, ['name', 'age'], ['desc', 'asc']);
console.log(sorted);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

[
  { name: 'fred', age: 40 },
  { name: 'chris', age: 48 },
  { name: 'barney', age: 34 },
  { name: 'barney', age: 36 }
]

เพื่อจัดเรียงแบบระบุทิศทาง เราใช้ฟังก์ชัน orderBy แทน และสำหรับการระบุ Key ที่ใช้ในการจัดเรียง จะกำหนดเป็นอาเรย์สองตำแหน่งซึ่งประกอบไปด้วย Key และทิศทางการจัดเรียงที่สามารถเป็น asc เพื่อเรียงจากน้อยไปมาก และ desc เพื่อเรียงจากมากไปน้อย

นี่เป็นฟังก์ชันส่วนหนึ่งของ Lodash เท่านั้น มีฟังก์ชันอีกมากมายที่ให้คุณสำรวจเพื่อนำมาใช้งานในโปรเจ็คของคุณโดยที่ไม่ต้องเสียเวลาเขียนมันขึ้นมาเอง เนื่องจากมันถูกเขียน ปรับปรุุง และทดสอบจากนักพัฒนาทั่วโลกตลอดเวลา

คู่มือการใช้งาน Lodash

ในปัจจุบัน Lodash อยู่ที่เวอร์ชัน 4.17.21 ซึ่งฟังก์ชันใหม่ได้มีการเพิ่มเข้ามาและมีการปรับปรุงตลอดเวลาตั้งแต่การเปิดตัวครั้งแรกของมัน สำหรับคู่มือการใช้งานแบบละเอียดคุณสามารถอ่านได้ที่เอกสารอย่างเป็นทางการของ Lodash ที่ https://lodash.com/

Lodash มีเอกสารที่ละเอียด ครอบคลุมและใช้งานง่าย เพียงแค่พิมพ์สิ่งที่ต้องการทำในช่องค้นหา ดูวิธีการใช้งาน และเริ่มต้นใช้ได้เลย

ในบทนี้ เราได้แนะนำให้คุณรู้จัดและการใช้งานไลบรารี Lodash ที่ประกอบไปด้วยฟังก์ชันสำหรับอำนวยความสะดวกในการเขียนโปรแกรมภาษา JavaScript มันเป็นไลบรารี่ที่มีการใช้งานมากที่สุดบน npm และช่วยลดเวลาให้กับเราในการเขียนโปรแกรมได้