ตัวกรอง JavaScript:คำแนะนำทีละขั้นตอน

วิธีการกรอง JavaScript() สร้างอาร์เรย์ขององค์ประกอบจากอาร์เรย์ที่มีอยู่ เมธอด filter() ยอมรับฟังก์ชันเรียกกลับเป็นอาร์กิวเมนต์ ฟังก์ชันนี้จะประเมินว่าควรเพิ่มองค์ประกอบในรายการใหม่จากรายการที่มีอยู่หรือไม่

หากคุณเพิ่งเริ่มใช้ JavaScript คุณอาจไม่เคยได้ยิน filter() และ reduce() ฟังก์ชันจาวาสคริปต์ ฟังก์ชันเหล่านี้มีประโยชน์เมื่อคุณทำงานกับรายการวัตถุ หรือที่เรียกว่า อาร์เรย์ .

หากคุณเคยต้องการรับเฉพาะค่าบางค่าจากอาร์เรย์ คุณสามารถใช้ JavaScript filter() การทำงาน. ในบทช่วยสอนนี้ เราจะพูดถึงวิธีการใช้ฟังก์ชัน filter() โดยมีการอ้างอิงถึงตัวอย่าง

ทบทวนอาร์เรย์

อาร์เรย์ JavaScript เก็บรายการตั้งแต่ศูนย์ขึ้นไป รายการอาจเป็นตัวเลข อาร์เรย์อื่นๆ สตริง หรือใช้ข้อมูลประเภทอื่น พวกเขาใช้ดัชนีที่มีตัวเลขตั้งแต่ “0” เพื่อเข้าถึงรายการเฉพาะ

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

นี่คือตัวอย่างอาร์เรย์ใน JavaScript:

let names = ["Alex", "Bill", "Connor", "Daniel", "Edna"];

อาร์เรย์ตัวกรอง JavaScript

JavaScript array filter() วิธีการสร้างอาร์เรย์ใหม่ตามเนื้อหาของอาร์เรย์ที่มีอยู่ เมธอด filter() จะประเมินฟังก์ชันการเรียกกลับของแต่ละรายการในอาร์เรย์ที่มีอยู่ รายการที่ตรงตามเงื่อนไขในฟังก์ชันเรียกกลับจะถูกเพิ่มในรายการใหม่

เมื่อใช้วิธีการกรอง เราสามารถดึงค่าที่ตรงตามเกณฑ์ที่กำหนดและเพิ่มลงในอาร์เรย์ใหม่ได้

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

กรองอาร์เรย์ JavaScript ไวยากรณ์

วิธีการกรองใช้ไวยากรณ์ต่อไปนี้:

var newArr = oldArr.filter(function(item) {
	return yourCondition;
});

รหัสนี้กำหนดอาร์เรย์ที่เรียกว่า "newArr" ตามเนื้อหาของอาร์เรย์ "oldArr" ฟังก์ชันเรียกกลับของเราจะคืนค่าไปยังอาร์เรย์ใหม่หากตรงตามเงื่อนไข เงื่อนไขตัวอย่าง ได้แก่:

• รายการ> 5
• รายการ ==“เจสซี่”
• รายการ <3

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

กรองตัวอย่าง JavaScript

กรองรายการตัวเลข

มาเริ่มกันด้วยตัวอย่างง่ายๆ เรามีรายการซื้อจากร้านกาแฟ เราต้องการสร้างรายการใหม่ที่แสดงการซื้อมากกว่า $10

รายการซื้อของเรามีลักษณะดังนี้:

var purchases = [2.50, 2.70, 10.50, 12.30, 9.60, 2.30, 3.40];

เราสามารถใช้วิธี filter() เพื่อดึงข้อมูลการซื้อที่มีมูลค่ามากกว่า $10:

var big_purchases = purchases.filter(function(purchase) {
	return purchase > 10;
});

โปรแกรมของเราจะตรวจสอบว่าการซื้อมีมูลค่ามากกว่า $10 หรือไม่ มีการเพิ่มการซื้อใน big_purchases ระบุว่ามีมูลค่ามากกว่า 10 ดอลลาร์หรือไม่ มิฉะนั้น ถือว่าสละสิทธิ์

ค่าของตัวแปร big_purchases JavaScript คือ:

[10.5, 12.3]

filter() วิธีการส่งกลับองค์ประกอบทั้งหมดที่ผ่านการทดสอบที่เราได้กำหนดไว้ การทดสอบนี้คือ “รายการ> 10” หากเราต้องการเข้าถึงทุกการสั่งซื้อ เราสามารถอ้างอิงกลับไปที่รายการ “การซื้อ” เดิมของเราได้ วิธีการ filter() ของเราจะคืนค่าอาร์เรย์ของค่าที่มากกว่า $10

กรองอาร์เรย์ของวัตถุ

เรามีอาร์เรย์ที่มีชื่อของทุกคนในโรงเรียน:

var students = [
	{
		id: 1,
		name: "Alex",
		class: "First Grade",
		age: 5
	},
{
		id: 2,
		name: "Bill",
		class: "First Grade",
		age: 5
	},
{
		id: 3,
		name: "Connor",
		class: "Second Grade",
		age: 6
	}
];

เกิดอะไรขึ้นถ้าเราต้องการเรียกเฉพาะนักเรียนที่อยู่ชั้นประถมศึกษาปีแรก? ตัวกรอง() ทำให้ง่ายต่อการดำเนินการนี้ มาเขียนฟังก์ชันที่จะคืนค่านักเรียนระดับประถมทั้งหมดจากอาร์เรย์ "นักเรียน":

var firstGradeStudents = students.filter(function (student) {
	return student.class === “First Grade”;
});

ตัวกรอง() ใช้ในพารามิเตอร์เดียว นี่คือฟังก์ชันที่กำหนดการดำเนินการที่คุณเรียกใช้กับข้อมูลของคุณ

ตัวกรอง() ฟังก์ชันจะผ่านทุกอ็อบเจ็กต์ในอาร์เรย์ "นักเรียน" filter() ส่งคืนนักเรียนที่มีชั้นเรียนเท่ากับ "ชั้นประถมศึกษาปีแรก" ตัวดำเนินการ “===” หมายถึงความเท่าเทียมกัน

ฟังก์ชันตัวกรองจะสร้างอาร์เรย์ใหม่ด้วยค่าใหม่เหล่านี้ ซึ่งสามารถเข้าถึงได้ผ่านตัวแปร "firstGradeStudents"

บทสรุป

คุณสามารถใช้ filter() วิธีการอาร์เรย์เพื่อสร้างอาร์เรย์ใหม่จากเนื้อหาของอาร์เรย์ที่มีอยู่ เบาะแสอยู่ในชื่อด้วยเมธอด filter() filter() ตัวกรอง ออกจากองค์ประกอบจากอาร์เรย์ที่มีอยู่

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