คู่มือฉบับสมบูรณ์สำหรับวิการค้นหาในอาร์เรย์ด้วย JavaScript และ jQuery

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. บทนำ

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

จุดประสงค์ของบทความนี้

โดยการอ่านบทความนี้ คุณจะได้เรียนรู้ประเด็นต่อไปนี้:

• เข้าใจความแตกต่างระหว่างเมธอดหลักของ JavaScript ที่ใช้ในการค้นหาอาร์เรย์
• เรียนรู้การใช้งานเฉพาะของแต่ละเมธอดผ่านตัวอย่างโค้ด
• เลือกเมธอดที่เหมาะสมตามสถานการณ์

กลุ่มเป้าหมาย

บทความนี้มุ่งเน้นไปที่:

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

ความรู้และทักษะที่คุณจะได้รับ

• พื้นฐานและการประยุกต์ใช้เมธอดการค้นหาอาร์เรย์ของ JavaScript (indexOf() , includes() , find() , findIndex())
• วิธีการใช้เมธอด inArray() ของ jQuery และข้อควรระวัง
• การเปรียบเทียบประสิทธิภาพและสถานการณ์การใช้งานจริง

เมื่อคุณเชี่ยวชาญทักษะเหล่านี้ คุณจะสามารถทำการจัดการข้อมูลด้วย JavaScript ได้อย่างมีประสิทธิภาพมากขึ้น

บทความต่อไป

ในบทความต่อไป เราจะอธิบาย “วิธีการค้นหาอาร์เรย์พื้นฐานใน JavaScript” อย่างละเอียด เราจะครอบคลุมลักษณะและการใช้งานของแต่ละเมธอดพร้อมตัวอย่างที่ชัดเจน คอยติดตามกันนะคะ
หากคุณมีคำถามหรือข้อร้องขอใด ๆ เกี่ยวกับเนื้อหานี้ โปรดติดต่อเราได้เลย

2. วิธีการค้นหาอาร์เรย์พื้นฐานใน JavaScript

JavaScript มีเมธอดหลากหลายสำหรับการค้นหาค่าภายในอาร์เรย์ ส่วนนี้จะอธิบายการทำงานของแต่ละเมธอดพร้อมตัวอย่างที่เข้าใจง่าย

2-1. เมธอด indexOf()

ภาพรวม
เมธอด indexOf() จะคืนค่าดัชนีแรกที่ค่าที่ระบุปรากฏในอาร์เรย์ หากค่าดังกล่าวไม่มีอยู่ จะคืนค่า -1

ไวยากรณ์พื้นฐาน

array.indexOf(value, fromIndex)

• value : ค่าที่ต้องการค้นหา
• fromIndex : ตัวเลือก เริ่มตำแหน่งการค้นหา (ค่าเริ่มต้นคือ 0)

ตัวอย่าง

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana')); // Output: 1
console.log(fruits.indexOf('grape'));  // Output: -1

หมายเหตุ

• indexOf() เปรียบเทียบค่าด้วยการเท่ากันอย่างเคร่งครัด (===) ค่าที่มีประเภทต่างกันจะไม่ตรงกัน
• ไม่เหมาะสำหรับการเปรียบเทียบอ็อบเจ็กต์หรืออาร์เรย์โดยตรง

2-2. เมธอด includes()

ภาพรวม
เมธอด includes() จะคืนค่า boolean (true หรือ false) เพื่อบ่งบอกว่าค่าที่ระบุมีอยู่ในอาร์เรย์หรือไม่

ไวยากรณ์พื้นฐาน

array.includes(value, fromIndex)

ตัวอย่าง

const colors = ['red', 'green', 'blue'];

console.log(colors.includes('green'));  // Output: true
console.log(colors.includes('yellow')); // Output: false

หมายเหตุ

• includes() ถูกนำมาใช้ตั้งแต่ ES6 (2015) ดังนั้นเบราว์เซอร์รุ่นเก่าอาจไม่รองรับ

2-3. เมธอด find()

ภาพรวม
เมธอด find() จะคืนค่าสมาชิกแรกที่ตรงตามเงื่อนไขที่กำหนด หากไม่มีสมาชิกใดตรงเงื่อนไข จะคืนค่า undefined

ตัวอย่าง

const numbers = [10, 20, 30, 40];

const result = numbers.find(num => num > 25);
console.log(result); // Output: 30

2-4. เมธอด findIndex()

ภาพรวม
เมธอด findIndex() จะคืนดัชนีของสมาชิกแรกที่ตรงตามเงื่อนไขที่กำหนด หากไม่มีสมาชิกใดตรงเงื่อนไข จะคืนค่า -1

ตัวอย่าง

const numbers = [10, 20, 30, 40];

const index = numbers.findIndex(num => num > 25);
console.log(index); // Output: 2

สรุป

ส่วนนี้อธิบายเมธอดการค้นหาอาร์เรย์พื้นฐานของ JavaScript: indexOf(), includes(), find(), และ findIndex()

จุดเปรียบเทียบ

• สำหรับการค้นหาค่าที่ง่าย ให้ใช้ indexOf() หรือ includes() .
• สำหรับการค้นหาตามเงื่อนไข find() หรือ findIndex() มีประโยชน์.

3. inArray() ของ jQuery คืออะไร?

แม้ว่า JavaScript จะมีเมธอดการค้นหาอาเรย์แบบเนทีฟแล้ว แต่ jQuery ก็มีเมธอดของตนเองคือ inArray() ส่วนนี้จะอธิบายลักษณะการทำงาน การใช้งาน และข้อควรระวัง

3-1. ทำไมต้องใช้ jQuery?

jQuery ถูกใช้มานานเพื่อทำให้การจัดการ DOM และการจัดการเหตุการณ์ง่ายขึ้น มันยังคงถูกใช้สำหรับ:

• การบำรุงรักษาระบบเก่า
• การเขียนโค้ดที่ง่ายขึ้น
• ความเข้ากันได้กับเบราว์เซอร์รุ่นเก่า

3-2. วิธีใช้ inArray()

ภาพรวม
inArray() คืนค่าดัชนีของค่าที่อยู่ในอาเรย์ หากค่าดังกล่าวไม่มีอยู่ จะคืนค่า -1.

ไวยากรณ์พื้นฐาน

$.inArray(value, array, [fromIndex])

ตัวอย่าง

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1
console.log($.inArray('grape', fruits));  // Output: -1

3-3. การเปรียบเทียบ: inArray() กับเมธอดเนทีฟ

ประเด็นสำคัญ:

• ใช้ inArray() เพื่อความสอดคล้องในโครงการที่ใช้ jQuery.
• ใช้เมธอดเนทีฟสำหรับโครงการสมัยใหม่.

3-4. หมายเหตุ

1. การพึ่งพาเวอร์ชันของ jQuery
inArray() ทำงานได้เฉพาะในสภาพแวดล้อมที่มี jQuery.

2. การเปรียบเทียบแบบเข้มงวด
มันเปรียบเทียบค่าด้วยการเท่ากันแบบเข้มงวด (===).

3. ความแตกต่างด้านประสิทธิภาพ
เมธอดเนทีฟทำงานได้เร็วกว่า.

สรุป

ส่วนนี้ครอบคลุม inArray() ของ jQuery.
ประเด็นสำคัญ:

• สะดวกสำหรับระบบเก่าหรือระบบที่ใช้ jQuery.
• แนะนำให้ใช้เมธอดเนทีฟสำหรับการพัฒนาใหม่.

4. คู่มือเปรียบเทียบเพื่อเลือกเมธอดการค้นหาอาเรย์

JavaScript และ jQuery มีเมธอดการค้นหาอาเรย์หลายแบบ แต่ละแบบมีลักษณะและกรณีการใช้งานที่แตกต่าง ส่วนนี้จะเปรียบเทียบเมธอดหลักและอธิบายวิธีเลือกให้เหมาะกับสถานการณ์ของคุณ.

4-1. ลักษณะและการเปรียบเทียบของแต่ละเมธอด

ด้านล่างเป็นตารางเปรียบเทียบของเมธอดการค้นหาอาเรย์หลัก.

4-2. เมธอดที่แนะนำตามสถานการณ์การใช้งาน

1. การค้นหาค่าที่ง่าย: ตรวจสอบว่าอาเรย์มีค่าที่ระบุหรือไม่.

• เมธอดที่แนะนำ:
• indexOf() → เมื่อจำเป็นต้องการดัชนี.
• includes() → เมื่อเพียงต้องการตรวจสอบการมีอยู่ของค่า.

ตัวอย่าง:

const colors = ['red', 'green', 'blue'];

console.log(colors.indexOf('green')); // Output: 1
console.log(colors.includes('green')); // Output: true

2. การค้นหาตามเงื่อนไข
ตัวอย่าง: ค้นหาข้อมูลที่ตรงตามเงื่อนไขที่กำหนด.

• เมธอดที่แนะนำ:
• find() → ดึงเอาอิลิเมนต์แรกที่ตรงกัน.
• findIndex() → ดึงดัชนีของอิลิเมนต์แรกที่ตรงกัน.

ตัวอย่าง:

const numbers = [10, 20, 30, 40];

console.log(numbers.find(num => num > 25)); // Output: 30
console.log(numbers.findIndex(num => num > 25)); // Output: 2

3. การค้นหาในระบบเก่า
ตัวอย่าง: ค้นหาข้อมูลในระบบที่ใช้ jQuery รุ่นเก่า.

• เมธอดที่แนะนำ:
• inArray() → มีประโยชน์เมื่อจำเป็นต้องใช้ jQuery.

ตัวอย่าง:

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1

4-3. การเปรียบเทียบประสิทธิภาพ

1. เมื่อจำเป็นต้องความเร็วสูง:

• indexOf() และ includes() ทำงานได้เร็ว.

2. สำหรับการค้นหาตามเงื่อนไข:

• find() และ findIndex() รองรับเงื่อนไขที่ยืดหยุ่นแต่ช้ากว่านิดหน่อย.

3. เมื่อใช้ jQuery:

• inArray() ใช้งานง่ายแต่ช้ากว่าเนื่องจากภาระของไลบรารี.

สรุป

ส่วนนี้เปรียบเทียบเมธอดการค้นหาอาเรย์หลักและอธิบายการใช้งานที่แนะนำตามสถานการณ์.
ประเด็นสำคัญ:

• ใช้ indexOf() หรือ includes() สำหรับการค้นหาที่ง่าย.
• ใช้ find() หรือ findIndex() สำหรับการค้นหาตามเงื่อนไข.
• ใช้ inArray() สำหรับสภาพแวดล้อม jQuery รุ่นเก่า.

การเลือกเมธอดที่เหมาะสมตามสภาพแวดล้อมและกรณีการใช้งานของคุณจะช่วยให้โค้ดมีประสิทธิภาพและดูแลรักษาได้ง่าย.

5. ตัวอย่างการใช้งานจริงและสถานการณ์ที่นำไปประยุกต์ใช้

ส่วนอธิบายวิธีการใช้เมธอดการค้นหาอาร์เรย์ของ JavaScript และ jQuery ในสถานการณ์จริง ผ่านตัวอย่างเชิงปฏิบัติ คุณจะทำความเข้าใจโค้ดได้ลึกซึ้งยิ่งขึ้น

5-1. การตรวจสอบข้อมูลฟอร์ม

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

const validColors = ['red', 'green', 'blue'];
const userInput = 'green';

if (validColors.includes(userInput)) {
  console.log('Valid color.');
} else {
  console.log('Invalid color.');
}

5-2. การค้นหาและดึงข้อมูลผู้ใช้

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

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
];

const result = users.find(user => user.age >= 30);
console.log(result); // Output: { id: 2, name: 'Bob', age: 30 }

const index = users.findIndex(user => user.age >= 30);
console.log(index); // Output: 1

5-3. ตัวอย่างการจัดการข้อผิดพลาด

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

const products = ['apple', 'banana', 'orange'];

const index = products.indexOf('grape');

if (index === -1) {
  console.log('Product not found.');
} else {
  console.log(`Product found at index ${index}.`);
}

5-4. การกรองข้อมูลอาร์เรย์

สถานการณ์: ดึงเฉพาะข้อมูลที่ตรงตามเงื่อนไขเฉพาะ.
วิธีแก้: ใช้ filter().
ตัวอย่างโค้ด:

const scores = [45, 72, 88, 53, 94];

const highScores = scores.filter(score => score >= 70);
console.log(highScores); // Output: [72, 88, 94]

5-5. ตัวอย่างการค้นหาใน jQuery

สถานการณ์: ตรวจสอบการมีอยู่ของข้อมูลโดยใช้ inArray() ในระบบเก่า.
วิธีแก้: ใช้ inArray() ของ jQuery.
ตัวอย่างโค้ด:

const fruits = ['apple', 'banana', 'orange'];

if ($.inArray('banana', fruits) !== -1) {
  console.log('Banana exists in the list.');
} else {
  console.log('Banana is not in the list.');
}

สรุป

ส่วนนี้ได้แนะนำตัวอย่างการใช้งานเชิงปฏิบัติบนพื้นฐานของสถานการณ์จริง.
ประเด็นสำคัญ:

• includes() เป็นวิธีง่ายและมีประโยชน์สำหรับการตรวจสอบข้อมูลอินพุต.
• find() และ findIndex() มีประสิทธิภาพสำหรับการค้นหาตามเงื่อนไขและอ็อบเจกต์.
• indexOf() มีความยืดหยุ่นสำหรับการจัดการข้อผิดพลาด.
• filter() มีประสิทธิภาพในการดึงรายการที่ตรงกันหลายรายการ.
• inArray() ช่วยในสภาพแวดล้อม jQuery รุ่นเก่า.

6. คำถามที่พบบ่อย (FAQ)

ส่วนนี้ตอบคำถามทั่วไปเกี่ยวกับการค้นหาอาร์เรย์ใน JavaScript และ jQuery.

คำถาม 1: ความแตกต่างระหว่าง indexOf() กับ includes() คืออะไร?

คำตอบ:
ทั้งสองเมธอดใช้ค้นหาองค์ประกอบในอาร์เรย์ แต่ค่าที่คืนและการใช้งานต่างกัน:

• indexOf() : คืนค่าดัชนีของค่าที่ระบุ หากไม่พบค่าจะคืนค่า -1.
• includes() : คืนค่า boolean (true หรือ false) ที่บ่งบอกว่าค่ามีอยู่ในอาร์เรย์หรือไม่.

ตัวอย่าง:

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana'));   // Output: 1
console.log(fruits.includes('banana'));  // Output: true

คำถาม 2: find() กับ filter() แตกต่างกันอย่างไร?

คำตอบ:
ทั้งสองเมธอดคืนองค์ประกอบที่ตรงกับเงื่อนไข แต่ทำงานต่างกัน:

• find() : คืนค่าอิลิเมนต์แรกที่ตรงกับเงื่อนไข.
• filter() : คืนค่าอิลิเมนต์ทั้งหมดที่ตรงกันเป็นอาร์เรย์ใหม่.

ตัวอย่าง:

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.find(num => num > 25));   // Output: 30
console.log(numbers.filter(num => num > 25)); // Output: [30, 40, 50]

คำถาม 3: ฉันจะค้นหาคู่คีย์-ค่าเฉพาะในอาร์เรย์ของอ็อบเจกต์ได้อย่างไร?

คำตอบ:
ใช้ find() หรือ findIndex() พร้อมเงื่อนไข.ตัวอย่าง:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const user = users.find(user => user.name === 'Bob');
console.log(user); // Output: { id: 2, name: 'Bob' }

คำถาม 4: ฉันควรยังคงใช้ inArray() ของ jQuery หรือไม่?

คำตอบ: inArray() ของ jQuery มีประโยชน์ในสภาพแวดล้อมที่เก่าแล้ว, แต่ JavaScript สมัยใหม่มีเมธอดเนทีฟที่ดีกว่า.
คำแนะนำ:

• สำหรับโครงการใหม่ : ใช้เมธอดเนทีฟเช่น indexOf() หรือ includes() .
• สำหรับระบบ jQuery ที่มีอยู่ : ใช้ inArray() เพื่อรักษาความสอดคล้อง.

คำถาม 5: ฉันจะเพิ่มประสิทธิภาพการค้นหาอาเรย์เพื่อประสิทธิภาพได้อย่างไร?

คำตอบ: สำหรับชุดข้อมูลขนาดใหญ่หรือการดำเนินการค้นหาบ่อย ๆ ให้คำนึงถึงจุดต่อไปนี้:
1. เลือกเมธอดที่เร็ว:

• indexOf() และ includes() เป็นที่เร็วที่สุดสำหรับการค้นหาง่าย ๆ.

2. ใช้การแคช:

• แคชผลลัพธ์การค้นหาเพื่อหลีกเลี่ยงการคำนวณซ้ำ.

3. ปรับโครงสร้างข้อมูลให้เหมาะสม:

• สำหรับชุดข้อมูลขนาดใหญ่, ใช้วัตถุ, Map หรือ Set เพื่อการค้นหาที่มีประสิทธิภาพ.

ตัวอย่าง:

const dataSet = new Set([10, 20, 30, 40]);
console.log(dataSet.has(20)); // Output: true

สรุป

ส่วนนี้อธิบายคำถามทั่วไปที่เกี่ยวกับการค้นหาอาเรย์ใน JavaScript และ jQuery.
ประเด็นสำคัญ:

• เข้าใจความแตกต่างระหว่างแต่ละเมธอดและเลือกอย่างเหมาะสม.
• find() มีประโยชน์สำหรับการค้นหาแบบมีเงื่อนไขในอาเรย์ของอ็อบเจกต์.
• เมธอดเนทีฟเป็นที่แนะนำในการพัฒนาสมัยใหม่; jQuery ส่วนใหญ่ใช้สำหรับระบบเก่า.
• ปรับประสิทธิภาพโดยเลือกโครงสร้างข้อมูลที่เหมาะสม.

7. สรุปและขั้นตอนต่อไป

บทความนี้ให้คำอธิบายโดยละเอียดเกี่ยวกับเมธอดการค้นหาอาเรย์ใน JavaScript และ jQuery. มาทบทวนประเด็นสำคัญและพูดคุยว่าคุณจะเรียนรู้และนำแนวคิดเหล่านี้ไปใช้ต่อได้อย่างไร.

7-1. สรุปประเด็นสำคัญ

1. เมธอดการค้นหาอาเรย์พื้นฐาน

• indexOf() : ค้นหาดัชนีขององค์ประกอบ.
• includes() : คืนค่า boolean ที่บ่งบอกว่าค่ามีอยู่หรือไม่.
• find() / findIndex() : ค้นหาองค์ประกอบหรือดัชนีแรกที่ตรงกับเงื่อนไข.

2. เมธอด inArray() ของ jQuery

• มีประโยชน์ในระบบที่เก่าหรือใช้ jQuery.
• แนะนำให้ใช้เมธอด JavaScript เนทีฟในการพัฒนาสมัยใหม่.

3. ตัวอย่างการใช้งานและสถานการณ์ที่นำไปใช้

• การตรวจสอบข้อมูลเข้า, การสกัดข้อมูลผู้ใช้จัดการข้อผิดพลาด, และการกรอง สามารถทำให้เรียบง่ายด้วยเมธอดเหล่านี้.

4. คำถามที่พบบ่อย

• ชี้แจงความแตกต่าง, กรณีการใช้งาน, และข้อพิจารณาด้านประสิทธิภาพ.

7-2. วิธีเลือกเมธอดที่เหมาะสม

การเลือกเมธอดขึ้นอยู่กับวัตถุประสงค์ของคุณ. ใช้ชีตสรุปด้านล่าง:

7-3. ขั้นตอนต่อไป

1. เริ่มโครงการเล็ก ๆ

• สร้างเว็บแอปง่าย ๆ และนำเมธอดที่เรียนรู้ไปใช้.
  ตัวอย่าง: รายการ TODO, การจัดการสินค้าคงคลัง, เครื่องมือกรอง.

2. เรียนรู้ JavaScript ขั้นสูงเพิ่มเติม

• ฟีเจอร์ ES6+ : ไวยากรณ์ spread, destructuring, ฟังก์ชัน arrow.
• การเขียนโปรแกรมแบบอะซิงโครนัส : เรียนรู้ Promise , async/await สำหรับการดึงข้อมูล.

3. สำรวจเฟรมเวิร์ก

• เฟรมเวิร์กเช่น React หรือ Vue.js ใช้การดำเนินการกับอาเรย์บ่อยครั้งสำหรับการเรนเดอร์ UI.

4. แหล่งข้อมูลที่แนะนำ

• MDN Web Docs : JavaScript Arrays
• W3Schools : JavaScript Array Methods
• JSFiddle / CodePen : มีประโยชน์สำหรับการทดสอบและแชร์โค้ดสแนป.

7-4. ความคิดสุดท้าย

ผ่านคู่มือนี้, คุณได้เรียนรู้ทั้งพื้นฐานและการประยุกต์ขั้นสูงของการค้นหาอาเรย์ใน JavaScript และ jQuery.
คำแนะนำสำหรับผู้อ่าน:

1. ฝึกฝนสิ่งที่เรียนโดยการเขียนและทดสอบโค้ดบ่อย ๆ.
2. ค้นคว้าฟีเจอร์และเทคนิคใหม่ของ JavaScript ต่อไป.
3. เลือกเมธอดที่เหมาะสมที่สุดตามความต้องการของคุณ.

สรุป

นี่คือบทสรุปของ “คู่มือฉบับสมบูรณ์ในการค้นหาอาร์เรย์ใน JavaScript และ jQuery.”
ต่อไปเรียนรู้และขยายทักษะการเขียนโปรแกรมของคุณเพื่อสร้างแอปพลิเคชันที่มีประสิทธิภาพและทรงพลังยิ่งขึ้น.