10 ฟังก์ชัน Lodash ที่สำคัญสำหรับนักพัฒนา JavaScript

สำหรับนักพัฒนา JavaScript Lodash ไม่จำเป็นต้องมีการแนะนำ อย่างไรก็ตาม ห้องสมุดนั้นกว้างใหญ่และมักจะรู้สึกท่วมท้น ไม่อีกแล้ว!

โลดัช โลดัช โลดัช . . . ฉันจะเริ่มต้นที่ไหน! 🤔

มีช่วงเวลาที่ระบบนิเวศของ JavaScript เกิดขึ้นใหม่ มันสามารถเปรียบเทียบได้กับป่าตะวันตกหรือป่าดงดิบหากคุณต้องการ ซึ่งมีหลายอย่างเกิดขึ้น แต่มีคำตอบน้อยมากสำหรับความผิดหวังและประสิทธิภาพการทำงานของนักพัฒนาในแต่ละวัน

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

สวัสดี Lodash!

และวันนี้ Lodash อยู่ที่ไหน? มันยังคงมีสารพัดทั้งหมดที่เสนอในตอนแรกและบางส่วน แต่ดูเหมือนว่าจะสูญเสียความคิดในชุมชน JavaScript ทำไม ฉันนึกถึงเหตุผลสองสามข้อ:

• ฟังก์ชั่นบางอย่างในไลบรารี Lodash (และยังคงช้า) เมื่อนำไปใช้กับรายการขนาดใหญ่ แม้ว่าสิ่งนี้จะไม่ส่งผลกระทบต่อ 95% ของโปรเจ็กต์ที่มีอยู่ แต่ผู้พัฒนาที่มีอิทธิพลจาก 5% ที่เหลือทำให้ Lodash มีปัญหาและผลกระทบก็ลดลงไปจนถึงระดับรากหญ้า
• มีแนวโน้มในระบบนิเวศ JS (อาจพูดแบบเดียวกันเกี่ยวกับชาว Golang) ที่ความโอหังเป็นเรื่องธรรมดามากกว่าที่จำเป็น ดังนั้นการพึ่งพาบางอย่างเช่น Lodash จึงถูกมองว่าโง่และถูกโจมตีในฟอรัมเช่น StackOverflow เมื่อมีคนแนะนำวิธีแก้ปัญหาดังกล่าว (“อะไรนะ! ใช้ไลบรารีทั้งหมดสำหรับสิ่งนี้ ฉันสามารถรวม filter() กับ reduce() เพื่อให้บรรลุ สิ่งเดียวกันในฟังก์ชันง่าย ๆ!”)
• Lodash แก่แล้ว อย่างน้อยตามมาตรฐาน JS มันออกมาในปี 2012 ในขณะที่เขียนก็เกือบสิบปีแล้ว API มีความเสถียรและไม่สามารถเพิ่มสิ่งที่น่าตื่นเต้นได้ทุกปี (เพียงเพราะไม่จำเป็น) ซึ่งสร้างความเบื่อหน่ายให้กับนักพัฒนา JS โดยเฉลี่ยที่ตื่นเต้นมากเกินไป

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

จากที่กล่าวมา เรามาเจาะลึกถึงฟังก์ชัน Lodash ทั่วไป (หรือไม่!) และดูว่าไลบรารี่นี้มีประโยชน์และสวยงามเพียงใด

โคลน . . ล้ำลึก!

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

let people = [
  {
    name: 'Arnold',
    specialization: 'C++',
  },
  {
    name: 'Phil',
    specialization: 'Python',
  },
  {
    name: 'Percy',
    specialization: 'JS',
  },
];

// Find people writing in C++
let folksDoingCpp = people.filter((person) => person.specialization == 'C++');

// Convert them to JS!
for (person of folksDoingCpp) {
  person.specialization = 'JS';
}

console.log(folksDoingCpp);
// [ { name: 'Arnold', specialization: 'JS' } ]

console.log(people);
/*
[
  { name: 'Arnold', specialization: 'JS' },
  { name: 'Phil', specialization: 'Python' },
  { name: 'Percy', specialization: 'JS' }
]
*/

สังเกตว่าในความบริสุทธิ์ของเราและแม้ว่าเราจะตั้งใจดี แต่กลุ่มคนดั้งเดิมก็กลายพันธุ์ในกระบวนการ (ความเชี่ยวชาญพิเศษของ Arnold เปลี่ยนจาก C ++ เป็น JS) – ผลกระทบครั้งใหญ่ต่อความสมบูรณ์ของระบบซอฟต์แวร์พื้นฐาน! อันที่จริง เราต้องการวิธีสร้างสำเนาอาร์เรย์ดั้งเดิม (ลึก) ที่แท้จริง

สวัสดีเดฟ พบกับเดฟ!

คุณอาจจะเถียงว่านี่เป็นวิธีที่ “โง่” ในการเขียนโค้ดใน JS; อย่างไรก็ตาม ความเป็นจริงค่อนข้างซับซ้อน ใช่ เรามีตัวดำเนินการทำลายล้างที่น่ารักอยู่แล้ว แต่ใครก็ตามที่พยายามทำลายวัตถุและอาร์เรย์ที่ซับซ้อนก็รู้ดีถึงความเจ็บปวด จากนั้น มีแนวคิดในการใช้การทำให้เป็นอนุกรมและการลบซีเรียลไลซ์เซชัน (อาจเป็น JSON) เพื่อให้ได้การคัดลอกแบบละเอียด แต่จะทำให้โค้ดของคุณยุ่งเหยิงสำหรับผู้อ่านเท่านั้น

ในทางตรงกันข้าม ดูว่าวิธีแก้ปัญหาที่หรูหราและกระชับอย่างน่าอัศจรรย์เมื่อใช้ Lodash:

const _ = require('lodash');

let people = [
  {
    name: 'Arnold',
    specialization: 'C++',
  },
  {
    name: 'Phil',
    specialization: 'Python',
  },
  {
    name: 'Percy',
    specialization: 'JS',
  },
];

let peopleCopy = _.cloneDeep(people);

// Find people writing in C++
let folksDoingCpp = peopleCopy.filter(
  (person) => person.specialization == 'C++'
);

// Convert them to JS!
for (person of folksDoingCpp) {
  person.specialization = 'JS';
}

console.log(folksDoingCpp);
// [ { name: 'Arnold', specialization: 'JS' } ]

console.log(people);
/*
[
  { name: 'Arnold', specialization: 'C++' },
  { name: 'Phil', specialization: 'Python' },
  { name: 'Percy', specialization: 'JS' }
]
*/

สังเกตว่าอาร์เรย์ผู้คนไม่ถูกแตะต้องหลังจากการโคลนนิ่งลึก (อาร์โนลด์ยังคงเชี่ยวชาญใน C ++ ในกรณีนี้) แต่ที่สำคัญกว่านั้นคือโค้ดนั้นเข้าใจง่าย

ลบรายการที่ซ้ำกันออกจากอาร์เรย์

การลบรายการที่ซ้ำกันออกจากอาร์เรย์ดูเหมือนจะเป็นปัญหาในการสัมภาษณ์/การใช้ไวท์บอร์ดที่ยอดเยี่ยม (โปรดจำไว้ว่า หากมีข้อสงสัย ให้โยน hashmap ไปที่ปัญหา!) และแน่นอน คุณสามารถเขียนฟังก์ชันแบบกำหนดเองเพื่อทำเช่นนั้นได้ แต่ถ้าคุณพบกับสถานการณ์ต่างๆ ที่ทำให้อาร์เรย์ของคุณมีเอกลักษณ์เฉพาะตัวล่ะ คุณสามารถเขียนฟังก์ชันอื่น ๆ สำหรับสิ่งนั้น (และเสี่ยงต่อการเกิดข้อผิดพลาดเล็กน้อย) หรือคุณสามารถใช้ Lodash!

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

const _ = require('lodash');

const userIds = [12, 13, 14, 12, 5, 34, 11, 12];
const uniqueUserIds = _.uniq(userIds);
console.log(uniqueUserIds);
// [ 12, 13, 14, 5, 34, 11 ]

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

const _ = require('lodash');

const users = [
  { id: 10, name: 'Phil', age: 32 },
  { id: 8, name: 'Jason', age: 44 },
  { id: 11, name: 'Rye', age: 28 },
  { id: 10, name: 'Phil', age: 32 },
];

const uniqueUsers = _.uniqBy(users, 'id');
console.log(uniqueUsers);
/*
[
  { id: 10, name: 'Phil', age: 32 },
  { id: 8, name: 'Jason', age: 44 },
  { id: 11, name: 'Rye', age: 28 }
]
*/

ในตัวอย่างนี้ เราใช้เมธอด uniqBy() เพื่อบอก Lodash ว่าเราต้องการให้อ็อบเจ็กต์ไม่ซ้ำกันในคุณสมบัติ id ในหนึ่งบรรทัด เราแสดงสิ่งที่อาจใช้ 10-20 บรรทัด และแนะนำขอบเขตเพิ่มเติมสำหรับจุดบกพร่อง!

มีหลายสิ่งหลายอย่างที่พร้อมใช้งานในการทำให้สิ่งต่าง ๆ ไม่เหมือนใครใน Lodash และฉันแนะนำให้คุณดูที่ เอกสาร.

ความแตกต่างของสองอาร์เรย์

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

สวัสดี A. ลาก่อน B!

มาเริ่มต้นเส้นทางแห่งความแตกต่างกันโดยใช้สถานการณ์ง่ายๆ คุณได้รับรายการ ID ผู้ใช้ทั้งหมดในระบบแล้ว เช่นเดียวกับรายการของผู้ที่มีบัญชีใช้งานอยู่ คุณจะค้นหารหัสที่ไม่ใช้งานได้อย่างไร ง่ายใช่มั้ย?

const _ = require('lodash');

const allUserIds = [1, 3, 4, 2, 10, 22, 11, 8];
const activeUserIds = [1, 4, 22, 11, 8];

const inactiveUserIds = _.difference(allUserIds, activeUserIds);
console.log(inactiveUserIds);
// [ 3, 2, 10 ]

และเกิดอะไรขึ้นถ้ามันเกิดขึ้นในฉากที่เหมือนจริงมากขึ้น คุณต้องทำงานกับอาร์เรย์ของอ็อบเจ็กต์แทนที่จะเป็นแบบธรรมดา ดี Lodash มีวิธี differentBy() ที่ดีสำหรับสิ่งนี้!

const allUsers = [
  { id: 1, name: 'Phil' },
  { id: 2, name: 'John' },
  { id: 3, name: 'Rogg' },
];
const activeUsers = [
  { id: 1, name: 'Phil' },
  { id: 2, name: 'John' },
];
const inactiveUsers = _.differenceBy(allUsers, activeUsers, 'id');
console.log(inactiveUsers);
// [ { id: 3, name: 'Rogg' } ]

เรียบร้อยใช่มั้ย!

เช่นเดียวกับความแตกต่าง มีวิธีการอื่นๆ ใน Lodash สำหรับการดำเนินการชุดทั่วไป: ยูเนี่ยน ทางแยก ฯลฯ

อาร์เรย์ที่ราบเรียบ

ความจำเป็นในการทำให้อาร์เรย์เรียบขึ้นค่อนข้างบ่อย กรณีการใช้งานหนึ่งคือคุณได้รับการตอบสนอง API และจำเป็นต้องใช้คำสั่งผสม map() และ filter() ในรายการที่ซับซ้อนของอ็อบเจ็กต์/อาร์เรย์ที่ซ้อนกันเพื่อดึงออก พูด รหัสผู้ใช้ และตอนนี้คุณก็เหลืออยู่ อาร์เรย์ของอาร์เรย์ นี่คือข้อมูลโค้ดที่แสดงสถานการณ์นี้:

const orderData = {
  internal: [
    { userId: 1, date: '2021-09-09', amount: 230.0, type: 'prepaid' },
    { userId: 2, date: '2021-07-07', amount: 130.0, type: 'prepaid' },
  ],
  external: [
    { userId: 3, date: '2021-08-08', amount: 30.0, type: 'postpaid' },
    { userId: 4, date: '2021-06-06', amount: 330.0, type: 'postpaid' },
  ],
};

// find user ids that placed postpaid orders (internal or external)
const postpaidUserIds = [];

for (const [orderType, orders] of Object.entries(orderData)) {
  postpaidUserIds.push(orders.filter((order) => order.type === 'postpaid'));
}
console.log(postpaidUserIds);

คุณเดาได้ไหมว่าตอนนี้ postPaidUserIds เป็นอย่างไร? คำแนะนำ: มันน่าขยะแขยง!

[
  [],
  [
    { userId: 3, date: '2021-08-08', amount: 30, type: 'postpaid' },
    { userId: 4, date: '2021-06-06', amount: 330, type: 'postpaid' }
  ]
]

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

const flatUserIds = _.flatten(postpaidUserIds);
console.log(flatUserIds);
/*
[
  { userId: 3, date: '2021-08-08', amount: 30, type: 'postpaid' },
  { userId: 4, date: '2021-06-06', amount: 330, type: 'postpaid' }
]
*/

โปรดทราบว่า flatten() จะลึกลงไปเพียงระดับเดียวเท่านั้น นั่นคือถ้าวัตถุของคุณติดอยู่ระดับลึกสอง สาม หรือมากกว่านั้น ให้แบน () พวกมันจะทำให้คุณผิดหวัง ในกรณีเหล่านี้ Lodash มีเมธอด flattenDeep() แต่โปรดทราบว่าการใช้วิธีนี้กับโครงสร้างขนาดใหญ่มากอาจทำให้สิ่งต่างๆ ช้าลงได้ (ในเบื้องหลังจะมีการดำเนินการแบบเรียกซ้ำในที่ทำงาน)

วัตถุ/อาร์เรย์ว่างเปล่าหรือไม่

ขอบคุณค่าและประเภทที่ “ผิดพลาด” ใน JavaScript บางครั้งบางสิ่งที่ง่ายพอ ๆ กับการตรวจสอบความว่างเปล่าส่งผลให้เกิดความน่าสะพรึงกลัว

จะตรวจสอบได้อย่างไรว่าอาร์เรย์ว่างเปล่า? คุณสามารถตรวจสอบว่าความยาวของมันคือ 0 หรือไม่ ทีนี้ คุณจะตรวจสอบได้อย่างไรว่าวัตถุนั้นว่างเปล่า? ก็…เดี๋ยวก่อน! นี่คือจุดเริ่มต้นของความรู้สึกไม่สบายใจ และตัวอย่าง JavaScript ที่มีเนื้อหาเช่น [] == false และ {} == false เริ่มวนเวียนหัวของเรา เมื่ออยู่ภายใต้แรงกดดันที่จะนำเสนอคุณลักษณะ ทุ่นระเบิดเช่นนี้เป็นสิ่งสุดท้ายที่คุณต้องการ — พวกมันจะทำให้รหัสของคุณเข้าใจยาก และจะทำให้เกิดความไม่แน่นอนในชุดทดสอบของคุณ

การทำงานกับข้อมูลที่ขาดหายไป

ในโลกแห่งความเป็นจริง data รับฟังเรา ไม่ว่าเราจะต้องการมันมากแค่ไหน มันก็ไม่ค่อยคล่องตัวและมีเหตุผล ตัวอย่างทั่วไปอย่างหนึ่งคือไม่มีออบเจ็กต์/อาร์เรย์ว่างในโครงสร้างข้อมูลขนาดใหญ่ที่ได้รับการตอบสนอง API

สมมติว่าเราได้รับวัตถุต่อไปนี้เป็นการตอบสนอง API:

const apiResponse = {
  id: 33467,
  paymentRefernce: 'AEE3356T68',
  // `order` object missing
  processedAt: `2021-10-10 00:00:00`,
};

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

if (
  apiResponse.order &&
  apiResponse.order.payee &&
  apiResponse.order.payee.address
) {
  console.log(
    'The order was sent to the zip code: ' +
      apiResponse.order.payee.address.zipCode
  );
}

🤢🤢 ใช่ เขียนน่าเกลียดมาก อ่านน่าเกลียดมาก น่าเกลียดมากที่จะรักษา และอื่น ๆ โชคดีที่ Lodash มีวิธีจัดการกับสถานการณ์ดังกล่าวอย่างตรงไปตรงมา

const zipCode = _.get(apiResponse, 'order.payee.address.zipCode');
console.log('The order was sent to the zip code: ' + zipCode);
// The order was sent to the zip code: undefined

นอกจากนี้ยังมีตัวเลือกที่ยอดเยี่ยมในการให้ค่าเริ่มต้นแทนการไม่ได้กำหนดไว้สำหรับสิ่งที่ขาดหายไป:

const zipCode2 = _.get(apiResponse, 'order.payee.address.zipCode', 'NA');
console.log('The order was sent to the zip code: ' + zipCode2);
// The order was sent to the zip code: NA

ฉันไม่รู้เกี่ยวกับคุณ แต่ get() เป็นหนึ่งในสิ่งที่ทำให้ฉันน้ำตาไหล มันไม่ได้ฉูดฉาดอะไร ไม่มีการปรึกษาหารือหรือตัวเลือกในการท่องจำ แต่ดูที่จำนวนความทุกข์ทรมานร่วมกันที่สามารถบรรเทาได้! 😇

ดีเด้ง

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

ลองนึกภาพเว็บไซต์อีคอมเมิร์ซที่มีแถบค้นหา (เช่น เว็บไซต์/เว็บแอปใดๆ ในปัจจุบัน!) เพื่อ UX ที่ดีขึ้น เราไม่ต้องการให้ผู้ใช้ต้องกด Enter (หรือแย่กว่านั้น ให้กดปุ่ม “ค้นหา”) เพื่อแสดงคำแนะนำ/การแสดงตัวอย่างตามคำค้นหา แต่คำตอบที่ชัดเจนคือค่อนข้างโหลด: ถ้าเราเพิ่มตัวฟังเหตุการณ์ใน onChange() สำหรับแถบค้นหาและปิดการเรียก API สำหรับการกดแป้นทุกครั้ง เราจะสร้างฝันร้ายสำหรับแบ็กเอนด์ของเรา จะมีการเรียกที่ไม่จำเป็นมากเกินไป (เช่น หากค้นหา “แปรงพรมสีขาว” จะมีคำขอทั้งหมด 18 รายการ) และเกือบทั้งหมดจะไม่เกี่ยวข้องเพราะการป้อนข้อมูลของผู้ใช้ยังไม่เสร็จสิ้น

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

กลยุทธ์โดยรวมที่ฉันอธิบายนั้นซับซ้อน และฉันจะไม่ดำดิ่งสู่การซิงโครไนซ์การจัดการตัวจับเวลาและการยกเลิก อย่างไรก็ตาม กระบวนการ debounding ที่เกิดขึ้นจริงนั้นง่ายมาก หากคุณใช้ Lodash

const _ = require('lodash');
const axios = require('axios');

// This is a real dogs' API, by the way!
const fetchDogBreeds = () =>
  axios
    .get('https://dog.ceo/api/breeds/list/all')
    .then((res) => console.log(res.data));

const debouncedFetchDogBreeds = _.debounce(fetchDogBreeds, 1000); // after one second
debouncedFetchDogBreeds(); // shows data after some time

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

const debouncedFetchDogBreeds = _.debounce(fetchDogBreeds, 150, { maxWait: 2000 }); // debounce for 250ms, but send the API request after 2 seconds anyway

ตรวจสอบอย่างเป็นทางการ เอกสาร เพื่อการดำน้ำลึก เต็มไปด้วยของสำคัญมากมาย!

ลบค่าออกจากอาร์เรย์

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

const greetings = ['hello', 'hi', 'hey', 'wave', 'hi'];
_.pull(greetings, 'wave', 'hi');
console.log(greetings);
// [ 'hello', 'hey' ]

โปรดทราบสองสิ่ง:

อาร์เรย์เดิมมีการเปลี่ยนแปลงในกระบวนการ

เมธอด pull() จะลบอินสแตนซ์ทั้งหมดแม้ว่าจะมีซ้ำกันก็ตาม

มีอีกวิธีหนึ่งที่เกี่ยวข้องเรียกว่า pullAll() ที่ยอมรับอาร์เรย์เป็นพารามิเตอร์ตัวที่สอง ทำให้ง่ายต่อการลบหลายรายการพร้อมกัน จริงอยู่ที่เราสามารถใช้ pull() กับตัวดำเนินการสเปรดได้ แต่จำไว้ว่า Lodash มาในช่วงเวลาที่ตัวดำเนินการสเปรดไม่ใช่แม้แต่ข้อเสนอในภาษา!

const greetings2 = ['hello', 'hi', 'hey', 'wave', 'hi'];
_.pullAll(greetings2, ['wave', 'hi']);
console.log(greetings2);
// [ 'hello', 'hey' ]

ดัชนีสุดท้ายขององค์ประกอบ

วิธีการ indexOf() ดั้งเดิมของ JavsScript นั้นยอดเยี่ยม ยกเว้นเมื่อคุณสนใจที่จะสแกนอาร์เรย์จากทิศทางตรงกันข้าม! และอีกครั้ง ใช่ คุณสามารถเขียนการวนซ้ำแบบลดค่าและค้นหาองค์ประกอบได้ แต่ทำไมไม่ใช้เทคนิคที่หรูหรากว่านี้อีกล่ะ

นี่เป็นวิธีแก้ปัญหา Lodash อย่างรวดเร็วโดยใช้เมธอด lastIndexOf():

const integers = [2, 4, 1, 6, -1, 10, 3, -1, 7];
const index = _.lastIndexOf(integers, -1);
console.log(index); // 7

น่าเสียดายที่ไม่มีวิธีการนี้ที่เราสามารถค้นหาวัตถุที่ซับซ้อนหรือแม้แต่ส่งผ่านฟังก์ชันการค้นหาที่กำหนดเองได้

ซิป. เปิดเครื่องรูด!

เว้นแต่คุณจะเคยทำงานใน Python มาก่อน zip/unzip เป็นยูทิลิตี้ที่คุณอาจไม่เคยสังเกตเห็นหรือจินตนาการเลยในอาชีพการงานทั้งหมดของคุณในฐานะนักพัฒนา JavaScript และอาจเป็นเหตุผลที่ดี: แทบไม่มีความจำเป็นอย่างยิ่งที่จะต้องทำการ zip/unzip เนื่องจากมีตัวกรอง () เป็นต้น อย่างไรก็ตาม มันเป็นหนึ่งในยูทิลิตี้ที่ไม่ค่อยมีคนรู้จักมากที่สุดและสามารถช่วยคุณสร้างโค้ดที่กระชับได้ในบางสถานการณ์ .

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

const animals = ['duck', 'sheep'];
const sizes = ['small', 'large'];
const weight = ['less', 'more'];

const groupedAnimals = _.zip(animals, sizes, weight);
console.log(groupedAnimals);
// [ [ 'duck', 'small', 'less' ], [ 'sheep', 'large', 'more' ] ]

สามอาร์เรย์ดั้งเดิมถูกแปลงเป็นอาร์เรย์เดียวที่มีสองอาร์เรย์เท่านั้น และแต่ละอาร์เรย์ใหม่เหล่านี้เป็นตัวแทนของสัตว์ตัวเดียวที่มีทั้งหมดอยู่ในที่เดียว ดังนั้น ดัชนี 0 บอกเราว่ามันคือสัตว์ประเภทใด ดัชนี 1 บอกขนาดของมัน และดัชนี 2 บอกน้ำหนักของมัน ด้วยเหตุนี้ ข้อมูลจึงทำงานได้ง่ายขึ้น เมื่อคุณใช้การดำเนินการใดๆ ที่คุณต้องการกับข้อมูลแล้ว คุณสามารถแยกย่อยอีกครั้งโดยใช้ unzip() และส่งกลับไปยังแหล่งที่มาเดิม:

const animalData = _.unzip(groupedAnimals);
console.log(animalData);
// [ [ 'duck', 'sheep' ], [ 'small', 'large' ], [ 'less', 'more' ] ]

ยูทิลิตี้ zip/unzip ไม่ใช่สิ่งที่จะเปลี่ยนชีวิตคุณในชั่วข้ามคืน แต่มันจะเปลี่ยนชีวิตคุณในวันหนึ่ง!

สรุป 👨‍🏫

(ฉันใส่ซอร์สโค้ดทั้งหมดที่ใช้ในบทความนี้ ที่นี่ ให้คุณได้ลองโดยตรงจากบราวเซอร์!)

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