Bộ lọc mảng JavaScript

Phương thứ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 thức hoạt động của phương thức filter() 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.

Phương thức Array.filter() của JavaScript

Phương thức filter() 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

  • 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"
    }]
    */
    1. Đây là phần tử trong mảng hiện đang được lặp lại
  • 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"
    }]
    */
    2. Đây là vị trí chỉ mục của
    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"
    }]
    */
    1 bên trong mảng
  • 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"
    }]
    */
    4. Đ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

Cách sử dụng Phương thức filter() trong JavaScript

Trong các ví dụ sau, tôi sẽ trình bày cách bạn có thể sử dụng phương thức filter() để 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ột 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 không phải là nhà phát triển thì sao?

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 về nhất được huy chương vàng, người thứ hai được huy chương bạc, người thứ ba được huy chương đồng

Bằng cách sử dụng

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

*/
0 và truy cập thuộc tính
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"
}]
*/
2 của mọi mục trong 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 đang được lặp lại. Ví dụ, chúng ta có thể kiểm tra xem còn một phần tử nào khác trong mảng 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 trên 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."
*/
Bộ lọc mảng JavaScript
Rất tiếc, xin lỗi David

Cách sử dụng đối tượng bối cảnh

Ngoài chức năng gọi lại, phương thức filter() 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 tham chiếu từ khóa

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

*/
4

filter() Ví dụ 5. Cách truy cập đối tượng bối cảnh với 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" } ] */4

Điều này sẽ tương tự như

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

*/
7. 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 dưới dạng các thuộc tính bên trong đối tượng

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

*/
8, sau đó chúng tôi sẽ chuyển vào ____6_______0 dưới dạng đối tượng ngữ 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 đã chuyển đối tượng

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

*/
8 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 tham chiếu
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"
2 và
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"
3 tương ứng

kết thúc

Phương thức mảng filter() 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, phương thức

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

*/
0 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
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"
	}
]

*/
4

Tôi hy vọng bạn có một cái gì đó hữu ích từ bài viết này

Nếu bạn muốn tìm hiểu thêm về Phát triển Web, vui lòng truy cập Blog của tôi

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

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO


Bộ lọc mảng JavaScript
Kingsley Ubah

Giúp bạn học cách viết mã một hướng dẫn tại một thời điểm. Người sáng tạo và doanh nhân trực tuyến


Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu