Các Array.filter() được cho là phương thức quan trọng nhất và được sử dụng rộng rãi để lặp qua một mảng trong JavaScript.
cách filter() phương pháp hoạt động rất đơn giản. Nó đòi hỏi phải lọc ra một hoặc nhiều mục (tập hợp con) từ bộ sưu tập mục lớn hơn (tập hợp lớn hơn) dựa trên một số điều kiện/sở thích.
Tất cả chúng ta đều làm điều này hàng ngày, cho dù chúng ta đang đọc sách, chọn bạn bè hay vợ/chồng, chọn xem bộ phim nào, v.v.
JavaScript Array.filter() Phương pháp
Các filter() phương thức nhận một hàm gọi lại và gọi hàm đó cho mọi mục mà nó lặp lại bên trong mảng đích. Hàm gọi lại có thể nhận các tham số sau:
currentItem: Đây là phần tử trong mảng hiện đang được lặp lại.index: Đây là vị trí chỉ mục củacurrentItembên trong mảng.array: Điều này đại diện cho mảng mục tiêu cùng với tất cả các mục của nó.
Phương thức bộ lọc tạo một mảng mới và trả về tất cả các mục vượt qua điều kiện được chỉ định trong hàm gọi lại.
Làm thế nào để sử dụng filter() Phương thức trong JavaScript
Trong các ví dụ sau, tôi sẽ trình bày cách bạn có thể sử dụng filter() phương pháp để lọc các mục từ một mảng trong JavaScript.
filter() Ví dụ 1: Cách lọc các mục ra khỏi mảng
Trong ví dụ này, chúng tôi lọc ra mọi người là trẻ mới biết đi (có độ tuổi từ 0 đến 4 ).
let people = [
{name: "aaron",age: 65},
{name: "beth",age: 2},
{name: "cara",age: 13},
{name: "daniel",age: 3},
{name: "ella",age: 25},
{name: "fin",age: 1},
{name: "george",age: 43},
]
let toddlers = people.filter(person => person.age <= 3)
console.log(toddlers)
/*
[{
age: 2,
name: "beth"
}, {
age: 3,
name: "daniel"
}, {
age: 1,
name: "fin"
}]
*/filter() Ví dụ 2: Cách lọc ra các mục dựa trên một thuộc tính cụ thể
Trong ví dụ này, chúng tôi sẽ chỉ lọc ra các thành viên trong nhóm là nhà phát triển.
let team = [
{
name: "aaron",
position: "developer"
},
{
name: "beth",
position: "ui designer"
},
{
name: "cara",
position: "developer"
},
{
name: "daniel",
position: "content manager"
},
{
name: "ella",
position: "cto"
},
{
name: "fin",
position: "backend engineer"
},
{
name: "george",
position: "developer"
},
]
let developers = team.filter(member => member.position == "developer")
console.log(developers)
/*
[{
name: "aaron",
position: "developer"
}, {
name: "cara",
position: "developer"
}, {
name: "george",
position: "developer"
}]
*/Trong ví dụ trên, chúng tôi đã lọc ra các nhà phát triển. Nhưng nếu chúng ta muốn lọc ra mọi thành viên là không phải một nhà phát triển thay thế?
Chúng ta có thể làm điều này:
let team = [
{
name: "aaron",
position: "developer"
},
{
name: "beth",
position: "ui designer"
},
{
name: "cara",
position: "developer"
},
{
name: "daniel",
position: "content manager"
},
{
name: "ella",
position: "cto"
},
{
name: "fin",
position: "backend engineer"
},
{
name: "george",
position: "developer"
},
]
let nondevelopers = team.filter(member => member.position !== "developer")
console.log(nondevelopers)
/*
[
{
name: "beth",
position: "ui designer"
},
{
name: "daniel",
position: "content manager"
},
{
name: "ella",
position: "cto"
},
{
name: "fin",
position: "backend engineer"
}
]
*/filter() Ví dụ 3: Cách truy cập thuộc tính chỉ mục
Đây là một cuộc thi. Trong cuộc thi này, có ba người chiến thắng. Người đầu tiên sẽ nhận được huy chương vàng, người thứ hai sẽ nhận được huy chương bạc và người thứ ba sẽ nhận được huy chương đồng.
Bằng cách sử dụng filter và truy cập vào index thuộc tính của mọi mục trên mỗi lần lặp, chúng tôi có thể lọc ra từng mục trong số ba mục chiến thắng thành các biến khác nhau.
let winners = ["Anna", "Beth", "Cara"]
let gold = winners.filter((winner, index) => index == 0)
let silver = winners.filter((winner, index) => index == 1)
let bronze = winners.filter((winner, index) => index == 2)
console.log(Gold winner: ${gold}, Silver Winner: ${silver}, Bronze Winner: ${bronze})
// "Gold winner: Anna, Silver Winner: Beth, Bronze Winner: Cara"filter() Ví dụ 4: Cách sử dụng tham số mảng
Một trong những cách sử dụng phổ biến nhất của tham số thứ ba (mảng) là kiểm tra trạng thái của mảng được lặp lại. Ví dụ: chúng ta có thể kiểm tra xem liệu còn một mục nào khác trong mảng hay không. Tùy thuộc vào kết quả, chúng tôi có thể chỉ định rằng những điều khác nhau sẽ xảy ra.
Trong ví dụ này, chúng ta sẽ định nghĩa một mảng gồm bốn người. Tuy nhiên, vì chỉ có thể có ba người chiến thắng nên người thứ tư trong danh sách sẽ phải giảm giá.
Để có thể làm được điều này, chúng ta cần lấy thông tin về mảng mục tiêu trong mỗi lần lặp.
let competitors = ["Anna", "Beth", "Cara", "David"]
function displayWinners(name, index, array) {
let isNextItem = index + 1 < array.length ? true : false
if (isNextItem) {
console.log(`The No${index+1} winner is ${name}.`);
} else {
console.log(`Sorry, ${name} is not one of the winners.`)
}
}
competitors.filter((name, index, array) => displayWinners(name, index, array))
/*
"The No1 winner is Anna."
"The No2 winner is Beth."
"The No3 winner is Cara."
"Sorry, David is not one of the winners."
*/
Cách sử dụng đối tượng bối cảnh
Ngoài chức năng gọi lại, filter() phương thức cũng có thể nhận một đối tượng bối cảnh.
filter(callbackfn, contextobj)Đối tượng này sau đó có thể được tham chiếu từ bên trong hàm gọi lại bằng cách sử dụng this từ khóa tham khảo.
filter() Ví dụ 5: Cách truy cập đối tượng bối cảnh với this
Điều này sẽ tương tự như example 1. Chúng tôi sẽ lọc ra mọi người trong độ tuổi từ 13 đến 19 (thanh thiếu niên).
Tuy nhiên, chúng tôi sẽ không mã hóa cứng các giá trị bên trong hàm gọi lại. Thay vào đó, chúng tôi sẽ xác định các giá trị 13 và 19 này là các thuộc tính bên trong range đối tượng, mà sau đó chúng ta sẽ chuyển vào filter làm đối tượng bối cảnh (tham số thứ hai).
let people = [
{name: "aaron", age: 65},
{name: "beth", age: 15},
{name: "cara", age: 13},
{name: "daniel", age: 3},
{name: "ella", age: 25},
{name: "fin", age: 16},
{name: "george", age: 18},
]
let range = {
lower: 13,
upper: 16
}
let teenagers = people.filter(function(person) {
return person.age >= this.lower && person.age <= this.upper;
}, range)
console.log(teenagers)
/*
[{
age: 15,
name: "beth"
}, {
age: 13,
name: "cara"
}, {
age: 16,
name: "fin"
}]
*/chúng tôi đã thông qua range đối tượng làm đối số thứ hai cho filter(). Tại thời điểm đó, nó đã trở thành đối tượng bối cảnh của chúng tôi. Do đó, chúng tôi có thể truy cập phạm vi trên và dưới trong chức năng gọi lại của mình với this.upper và this.lower tham khảo tương ứng.
kết thúc
Các filter() phương thức mảng lọc ra (các) mục khớp với biểu thức gọi lại và trả về chúng.
Ngoài chức năng gọi lại, filter phương thức cũng có thể lấy một đối tượng ngữ cảnh làm đối số thứ hai. Điều này sẽ cho phép bạn truy cập bất kỳ thuộc tính nào của nó từ chức năng gọi lại bằng cách sử dụng this.
Tôi hy vọng bạn có một cái gì đó hữu ích từ bài viết này.
Tôinếu bạn muốn tìm hiểu thêm về Phát triển Web, vui lòng truy cập trang web của tôi Blog.
Cảm ơn bạn đã đọc và hẹn gặp lại.
P/S: Nếu bạn đang học JavaScript, tôi đã tạo một Sách điện tử dạy 50 chủ đề về JavaScript bằng các ghi chú kỹ thuật số được vẽ bằng tay. Kiểm tra nó ra ở đây.
