Phương thức JavaScript Array filter[] được sử dụng để tạo một mảng mới từ một mảng đã cho chỉ bao gồm các phần tử từ mảng đã cho thỏa mãn một điều kiện được đặt bởi phương thức đối số.
cú pháp.
array.filter[callback[element, index, arr], thisValue]
Thông số. Phương pháp này chấp nhận năm tham số như đã đề cập ở trên và được mô tả bên dưới.
- gọi lại. Tham số này giữ chức năng được gọi cho từng phần tử của mảng
- thành phần. Tham số giữ giá trị của các phần tử đang được xử lý hiện tại
- mục lục. Tham số này là tùy chọn, nó giữ chỉ số của phần tử hiện tại trong mảng bắt đầu từ 0
- mảng. Tham số này là tùy chọn, nó chứa toàn bộ mảng trên đó Array. mỗi cái được gọi là
- giá trị này. Tham số này là tùy chọn, nó chứa ngữ cảnh được truyền vì điều này sẽ được sử dụng trong khi thực hiện chức năng gọi lại. Nếu bối cảnh được thông qua, nó sẽ được sử dụng như thế này cho mỗi lần gọi hàm gọi lại, nếu không thì undefined được sử dụng làm mặc định
Giá trị trả về. Phương thức này trả về một mảng mới chỉ bao gồm những phần tử thỏa mãn điều kiện của hàm_arg.
ví dụ 1. Trong ví dụ này, phương thức filter[] tạo một mảng mới chỉ bao gồm những phần tử thỏa mãn điều kiện được kiểm tra bởi hàm canVote[]
JavaScript
[24,33,40]4
[24,33,40]5
[24,33,40]6
[24,33,40]5
[24,33,40]8
[24,33,40]9
[24,33,40]0
[24,33,40]1
[24,33,40]2
[24,33,40]5
[24,33,40]4
[24,33,40]5
[24,33,40]5
[24,33,40]8
[24,33,40]8
[24,33,40]0
[112,52,944]0
[112,52,944]1
[24,33,40]0
[112,52,944]3
[24,33,40]5
[24,33,40]4
[24,33,40]5
[112,52,944]7
[112,52,944]8
đầu ra.
[24,33,40]
Ví dụ 2. Trong ví dụ này, phương thức filter[] tạo một mảng mới chỉ bao gồm những phần tử thỏa mãn điều kiện được kiểm tra bởi hàm isPositive[].
Javascript
[24,33,40]4
[24,33,40]5
[24,33,40]8
[24,33,40]52
[24,33,40]53
[24,33,40]1
[24,33,40]55
[24,33,40]5
[24,33,40]4
[24,33,40]5
[24,33,40]5
[112,52,944]0
[24,33,40]41
[24,33,40]5
[112,52,944]3
[112,52,944]8
đầu ra.
[112,52,944]
ví dụ 3. Trong ví dụ này, phương thức filter[] tạo một mảng mới chỉ bao gồm những phần tử thỏa mãn điều kiện được kiểm tra bởi hàm isEven[].
Javascript
[24,33,40]4
[24,33,40]5
[24,33,40]8
[24,33,40]48
[24,33,40]53
[24,33,40]1
[24,33,40]51
[24,33,40]5
[24,33,40]4
[24,33,40]5
[24,33,40]5
[112,52,944]0
[24,33,40]57
[24,33,40]5
[112,52,944]3
[112,52,944]8
đầu ra.
[24,33,40]5
Chúng tôi có một danh sách đầy đủ các phương thức Mảng Javascript, để kiểm tra những phương thức đó, vui lòng xem qua bài viết tham khảo đầy đủ Mảng Javascript này
Trình duyệt được hỗ trợ. Các trình duyệt được phương thức JavaScript Array filter[] hỗ trợ được liệt kê bên dưới.
- Google Chrome
- Microsoft Cạnh 9. 0
- Mozilla Firefox 1. 5
- Cuộc đi săn
- Ô-pê-ra
Chúng tôi có một Cheat Sheet về Javascript, nơi chúng tôi đề cập đến tất cả các chủ đề quan trọng của Javascript để kiểm tra những chủ đề đó, vui lòng xem qua Javascript Cheat Sheet-Hướng dẫn cơ bản về JavaScript
Phương thức
[112,52,944]4 đượ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
[112,52,944]5 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 pháp JavaScript [112,52,944]
4
Phương thức
[112,52,944]5 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
[24,33,40]
11. Đây là phần tử trong mảng hiện đang được lặp lại[24,33,40]
12. Đây là vị trí chỉ mục của[24,33,40]
11 bên trong mảng[24,33,40]
14. Đ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 [112,52,944]
5 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 pháp
[112,52,944]5 để lọc các mục từ một mảng trong JavaScript
[112,52,944]
5 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 ]
[24,33,40]5
[112,52,944]
5 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
[24,33,40]1
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
[24,33,40]7
[112,52,944]
5 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
[24,33,40]70 và truy cập thuộc tính
[24,33,40]12 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
[24,33,40]0
[112,52,944]
5 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
[24,33,40]1
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
[112,52,944]5 cũng có thể nhận một đối tượng ngữ cảnh
[24,33,40]2
Đố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
[24,33,40]74
[112,52,944]
5 Ví dụ 5. Cách truy cập đối tượng ngữ cảnh bằng [24,33,40]
74
Điều này sẽ tương tự như
[24,33,40]77. 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 thuộc tính bên trong đối tượng
[24,33,40]78, sau đó chúng tôi sẽ chuyển vào ____370 dưới dạng đối tượng ngữ cảnh [tham số thứ hai]
[24,33,40]8
Chúng tôi đã chuyển đối tượng
[24,33,40]78 làm đối số thứ hai cho
[112,52,944]5. 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
[24,33,40]02 và
[24,33,40]03 tương ứng
kết thúc
Phương thức mảng
[112,52,944]5 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
[24,33,40]70 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
[24,33,40]74
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
Nhà phát triển web. Nhà văn kỹ thuật. Nhà giáo dục 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