Hướng dẫn này chỉ cho bạn cách sử dụng phương pháp lọc mảng JavaScript để lọc các phần tử trong một mảng dựa trên một điều kiện được chỉ định.

Bạn đang xem : phương pháp lọc mảng javascript

Tóm tắt : trong hướng dẫn này, bạn sẽ học cách sử dụng phương thức JavaScript Array filter () để lọc các phần tử trong một mảng.

Giới thiệu về mảng JavaScript filter ( ) method

Một trong những tác vụ phổ biến nhất khi làm việc với mảng là tạo một mảng mới chứa một tập hợp con các phần tử của mảng ban đầu.

Giả sử bạn có một mảng các đối tượng thành phố trong đó mỗi đối tượng chứa hai thuộc tính: name dân số .

 

let

city = [ {

name

:

'Los Angeles'

,

dân số :

3792621

}, {

name

:

'New York'

,

dân số :

8175133

}, {

name

:

'Chicago'

,

dân số

:

2695598

}, {

name

:

'Houston'

,

dân số

:

2099451

}, {

name

:

'Philadelphia'

,

dân số

:

1526006

} ];

Ngôn ngữ mã:

JavaScript

(

javascript

)

Để tìm thành phố có dân số lớn hơn 3 triệu, bạn thường lặp lại các phần tử của mảng bằng vòng lặp for và kiểm tra xem giá trị của thuộc tính dân số có thỏa mãn điều kiện không, như sau:

 

let

bigCities = [];

cho

(

let

i =

0

; i & lt; thành phố.length; i ++) {

if

(thành phố [i] .population & gt;

3000000

) { bigCities.push (thành phố [i]); } }

console

.log (bigCities);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đầu ra:

 

[ {

name

:

'Los Angeles'

,

dân số :

3792621

}, {

name

:

'New York'

,

dân số :

8175133

} ]

Ngôn ngữ mã:

JavaScript

(

javascript

)

Mảng JavaScript cung cấp phương thức filter () cho phép bạn thực hiện tác vụ này một cách ngắn gọn và rõ ràng hơn.

Ví dụ sau trả về kết quả tương tự như ví dụ trên:

 

let

bigCities = city.filter (

function

(

e

)

{

trả về

e.population & gt;

3000000

; });

console

.log (bigCities);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Trong ví dụ này, chúng tôi gọi phương thức filter () của đối tượng mảng thành phố và chuyển một hàm kiểm tra từng phần tử.

Bên trong hàm, chúng tôi kiểm tra xem dân số của mỗi thành phố trong mảng có lớn hơn 3 triệu hay không. Nếu đúng như vậy, hàm trả về true hoặc false nếu không.

Phương thức filter () bao gồm các phần tử duy nhất trong mảng kết quả nếu chúng đáp ứng kiểm tra trong hàm gọi lại.

Bắt đầu với ES6, bạn có thể sử dụng chức năng mũi tên để làm cho nó ngắn gọn hơn:

 

let

bigCities = city.filter (

city

= & gt;

city.population & gt;

3000000

);

console

.log (bigCities);

Ngôn ngữ mã:

JavaScript

(

javascript

)

chi tiết phương thức JavaScript Array filter ()

Phần sau minh họa cú pháp của phương thức filter () :

 

arrayObject

. filter

(

callback

,

contextObject

);

Ngôn ngữ mã:

CSS

(

css

)

filter () < / code> phương thức tạo một mảng mới với tất cả các phần tử vượt qua bài kiểm tra được thực hiện bởi cal hàm lback () .

Bên trong, phương thức filter () lặp qua từng phần tử của mảng và chuyển từng phần tử tới callback Chức năng. Nếu hàm callback trả về true , thì nó sẽ bao gồm phần tử trong mảng trả về.

Phương thức filter () chấp nhận hai đối số được đặt tên: một hàm callback và một đối tượng tùy chọn.

Giống như các phương thức lặp khác của đối tượng Array, chẳng hạn như every () , some () , map () forEach () < / span>, hàm callback có dạng sau:

 

function

gọi lại

(

currentElement, index, array

)

{ }

Ngôn ngữ mã:

JavaScript

(

javascript

)

callback hàm nhận ba đối số:

  • Đối số currentElement là phần tử hiện tại trong mảng đang được xử lý bởi hàm callback .
  • index của currentElement đang được xử lý bởi hàm callback .
  • Đối tượng mảng đang được duyệt.

Các đối số index array là tùy chọn.

< p> Đối số ContexObject của phương thức filter () là tùy chọn. Nếu bạn chuyển giá trị this , bạn có thể tham chiếu nó bằng cách sử dụng từ khóa this bên trong hàm callback .

Đó là điều quan trọng cần lưu ý là phương thức filter () không thay đổi mảng ban đầu.

Thêm các ví dụ về phương thức JavaScript Array filter ()

< p> Vì phương thức filter () trả về một mảng mới, bạn có thể xâu chuỗi kết quả với các phương thức mảng khác như sort () và < code> map () .

Ví dụ: phần sau minh họa cách liên kết ba phương thức: filter (), sort (), map ():

 

thành phố .filter (

city

= & gt;

city.population & lt;

3000000

) .sort (

(

c1, c2

) = & gt;

c1.population - c2.population) .map (

city

= & gt;

console

.log (city.name +

':'

+ city.population));

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đầu ra:

 

Philadelphia

: 1526006

Houston

: 2099451

Chicago

: 2695598

Ngôn ngữ mã:

CSS

(

css

)

Cách thức hoạt động.

  • Đầu tiên, lọc các thành phố có dân số dưới 3 triệu người bằng phương pháp filter () .
  • Thứ hai, sắp xếp các thành phố kết quả theo dân số theo thứ tự giảm dần bằng cách sử dụng Phương thức sort () .
  • Thứ ba, xuất phần tử mảng ra bảng điều khiển bằng phương thức map () .

< p> Ví dụ sau minh họa việc sử dụng đối số contextObject chỉ định một đối tượng có thể được tham chiếu trong hàm callback () bằng cách sử dụng this từ khóa

 

function

isInRange

(

value

)

{

if

(

typeof

value! ==

'number' ) {

return

false

; }

trả về

value & gt; =

this

.lower & amp; & amp; value & lt; =

this

.upper; }

let

data = [

10

,

20

,

"30"

,

1

,

5

,

'JavaScript filter'

,

undefined

,

'example' ];

let

range = {

thấp hơn

:

1

,

upper

:

10

};

let

numberInRange = data.filter (isInRange, range);

console

.log (numberInRange);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đầu ra:

 

[

10

,

1

,

5

]

Ngôn ngữ mã:

JSON / JSON với Nhận xét

(

json

)

Cách hoạt động.

  • Đầu tiên, hãy xác định hàm isInRange () để kiểm tra nếu đối số của nó là một số và trong phạm vi được chỉ định bởi các thuộc tính Lower upper của một đối tượng.
  • Tiếp theo, hãy xác định một mảng dữ liệu hỗn hợp chứa số , chuỗi không xác định .
  • Sau đó, xác định đối tượng range với hai thuộc tính under upper .
  • Sau đó, hãy gọi < code> filter () của mảng data và chuyển vào hàm isInRange () và đối tượng range . Vì chúng tôi chuyển đối tượng range , bên trong hàm isInRange () , từ khóa this tham chiếu đến range đối tượng.
  • Cuối cùng, hiển thị mảng kết quả trong bảng điều khiển.

Trong hướng dẫn này, bạn đã học cách sử dụng bộ lọc Mảng JavaScript () < / code> phương thức để lọc các phần tử trong một mảng dựa trên bài kiểm tra do hàm gọi lại cung cấp.

Hướng dẫn này có hữu ích không?


Xem thêm những thông tin liên quan đến chủ đề phương pháp lọc mảng javascript

Array map() method trong javascript

  • Tác giả: F8 Official
  • Ngày đăng: 2020-03-04
  • Đánh giá: 4 ⭐ ( 8022 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Map() method là một trong những phương thức được sử dụng rất nhiều khi làm việc với Array.

    🔥 Hãy chia sẻ các khóa học, vì ngoài kia có rất nhiều người đang cần nó ❤️
    🔥 Truy cập http://fullstack.edu.vn (miễn phí) để quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.
    🔥 Tham gia nhóm Học lập trình tại F8 trên Facebook: https://www.facebook.com/groups/f8official/

    hoclaptrinh mienphi frontend backend devops
    ---------------------------------------
    HỌC LẬP TRÌNH MIỄN PHÍ
    1. Khóa Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
    2. Khóa HTML, CSS: https://fullstack.edu.vn/courses/html-css
    3. Khóa Responsive web design: https://fullstack.edu.vn/courses/responsive-web-design
    ---------------------------------------
    LIÊN KẾT HỮU ÍCH
    1. Học lập trình: http://fullstack.edu.vn
    2. Viết CV xin việc: http://mycv.vn
    -----------------------------------------------------------
    LIÊN HỆ
    1. Facebook: https://fb.com/sondnmc
    2. Email: sondnf8@gmail.com

    Yêu các bạn ❤️

Các phương thức của mảng trong JavaScript

  • Tác giả: completejavascript.com
  • Đánh giá: 3 ⭐ ( 4191 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có rất nhiều phương thức của mảng trong JavaScript. Nhờ đó, việc xử lý mảng trở nên dễ dàng hơn. Sau đây là các phương thức xử lý mảng phổ biến nhất.

JavaScript, cách lọc một mảng

  • Tác giả: tech-wiki.online
  • Đánh giá: 3 ⭐ ( 3535 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

mảng lọc javascript của các đối tượng

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 3051 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn có thể sử dụng jQuery.grep(): var found_names = $.grep(names, function(v) { return v.name === "Joe"…

[JavaScript] Các phương thức xử lý mảng (Array) phổ biến trong JavaScript

  • Tác giả: vncoder.vn
  • Đánh giá: 4 ⭐ ( 1612 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài chia sẻ này một phần giúp các bạn mới học nắm chắc kiến thức hơn về các phương thức xử lý mảng trong JavaScript.

filter () Phương thức mảng trong JavaScript

  • Tác giả: galaxyz.net
  • Đánh giá: 3 ⭐ ( 3974 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phương thức filter() Array tạo ra một mảng mới với các phần tử thuộc một tiêu chí nhất định từ một mảng hiện có:

Các phương thức xử lý mảng (Array) phổ biến trong JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 7742 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xin chào các bạn, tips về CSS nhiều rồi hôm nay ta đổi gió một chút với JavaScript. Chủ đề hôm nay mình muốn chia sẻ đó là "Các phương thức xử lý mảng (Array) phổ biến trong JavaScript". Những method...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tham chiếu cú ​​pháp dao cạo cho ASP.NET Core - asp net foreach dao cạo râu

By ads_php