Bộ lọc JavaScript:Hướng dẫn từng bước

Phương thức bộ lọc JavaScript () tạo một mảng các phần tử từ một mảng hiện có. Phương thức filter () chấp nhận một hàm gọi lại làm đối số. Hàm này đánh giá xem một phần tử có nên được thêm vào danh sách mới từ phần hiện có hay không.

Nếu bạn chưa quen với JavaScript, bạn có thể chưa nghe nói về filter () và giảm () Các hàm Javascript. Các hàm này có thể hữu ích khi bạn đang làm việc với danh sách các đối tượng, còn được gọi là mảng .

Nếu bạn đã từng muốn chỉ nhận các giá trị nhất định từ một mảng, bạn có thể sử dụng bộ lọc JavaScript () chức năng. Trong hướng dẫn này, chúng ta sẽ thảo luận, có tham chiếu đến các ví dụ, cách sử dụng hàm filter ().

Trình làm mới mảng

Một mảng JavaScript lưu trữ không hoặc nhiều mục. Các mục có thể là số, mảng khác, chuỗi hoặc sử dụng kiểu dữ liệu khác. Họ sử dụng các chỉ mục được đánh số bắt đầu từ “0” để truy cập các mục cụ thể.

Mảng cho phép bạn lưu trữ nhiều giá trị trong cùng một biến. Điều này có thể giúp bạn viết tốt hơn và rõ ràng hơn vì bạn không cần phải viết nhiều biến để lưu trữ các giá trị của mình.

Đây là một ví dụ về một mảng trong JavaScript:

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

Mảng lọc JavaScript

Phương thức JavaScript array filter () tạo một mảng mới dựa trên nội dung của một mảng hiện có. Phương thức filter () đánh giá một hàm gọi lại trên mỗi mục trong một mảng hiện có. Bất kỳ mục nào đáp ứng điều kiện trong hàm gọi lại sẽ được thêm vào danh sách mới.

Sử dụng phương pháp bộ lọc, chúng tôi có thể truy xuất các giá trị đáp ứng các tiêu chí nhất định và thêm chúng vào một mảng mới.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Cú pháp JavaScript của mảng lọc

Phương pháp bộ lọc sử dụng cú pháp sau:

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

Đoạn mã này định nghĩa một mảng được gọi là “newArr” dựa trên nội dung của mảng “oldArr”. Hàm gọi lại của chúng tôi trả về một giá trị cho mảng mới nếu một điều kiện được đáp ứng. Các điều kiện mẫu bao gồm:

• mục> 5
• item ==“Jessie”
• mục <3

Bạn có thể sử dụng các toán tử so sánh JavaScript để xây dựng các điều kiện của mình. Hoặc, bạn có thể sử dụng câu lệnh if. Sử dụng câu lệnh if cho phép bạn kiểm soát một trong nhiều giá trị được thêm vào danh sách mới.

Lọc các ví dụ JavaScript

Lọc danh sách các số

Hãy bắt đầu với một ví dụ đơn giản. Chúng tôi có một danh sách các giao dịch mua từ một quán cà phê. Chúng tôi muốn tạo một danh sách mới hiển thị các giao dịch mua trên $ 10.

Danh sách các giao dịch mua của chúng tôi trông giống như sau:

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

Chúng tôi có thể sử dụng phương thức filter () để truy xuất các giao dịch mua trị giá hơn $ 10:

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

Chương trình của chúng tôi kiểm tra xem một giao dịch mua có giá trị hơn 10 đô la hay không. Một giao dịch mua được thêm vào big_purchases của chúng tôi liệt kê nếu nó có giá trị hơn $ 10. Nếu không, giao dịch mua sẽ bị loại bỏ.

Giá trị của biến JavaScript big_purchases là:

[10.5, 12.3]

Phương thức filter () trả về tất cả các phần tử vượt qua bài kiểm tra mà chúng ta đã xác định. Bài kiểm tra này là "item> 10". Nếu chúng tôi muốn truy cập mọi giao dịch mua, chúng tôi có thể quay lại danh sách “mua hàng” ban đầu của chúng tôi. Phương thức filter () của chúng tôi trả về một mảng giá trị lớn hơn $ 10.

Lọc một mảng đối tượng

Chúng tôi có một mảng chứa tên của tất cả mọi người trong một trường học:

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
	}
];

Điều gì sẽ xảy ra nếu chúng ta chỉ muốn truy xuất những học sinh đang học lớp một? Bộ lọc () giúp bạn dễ dàng thực hiện thao tác này. Hãy viết một hàm sẽ trả về tất cả học sinh lớp một từ mảng "sinh viên":

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

Bộ lọc () nhận một tham số. Đây là một chức năng xác định thao tác bạn chạy trên dữ liệu của mình.

Bộ lọc () hàm đi qua mọi đối tượng trong mảng "sinh viên". filter () trả về những học sinh có lớp học bằng “Lớp Một”. Toán tử “===” có nghĩa là bình đẳng.

Hàm bộ lọc sẽ tạo một mảng mới với các giá trị mới này, có thể truy cập thông qua biến “firstGradeStudents”.

Kết luận

Bạn có thể sử dụng phương thức mảng filter () để tạo một mảng mới từ nội dung của một mảng hiện có. Đầu mối nằm trong tên với phương thức filter (). filter () bộ lọc lấy ra các phần tử từ một mảng hiện có.

Và thế là xong! Bây giờ bạn có thể sử dụng Reduce () bằng JavaScript với sự tự tin hơn nữa. Để tìm hiểu thêm về cách viết mã trong JavaScript, hãy đọc bài viết của chúng tôi về các hướng dẫn tốt nhất cho người mới bắt đầu JavaScript.