Bộ lọc Mảng trong JavaScript lọc ra các phần tử của một mảng dựa trên điều kiện kiểm tra được chỉ định. Đọc tiếp để biết cú pháp và các giá trị tham số, cách nó hoạt động với ví dụ và các hạn chế.

Bạn đang xem : ví dụ về bộ lọc mảng javascript

Khi bạn thấy nhiều tùy chọn có sẵn trong khi mua sắm trực tuyến và bạn muốn thu hẹp kết quả tìm kiếm; bạn làm nghề gì? Lọc ra các tùy chọn, phải không? Đây chính xác là những gì bộ lọc mảng trong JavaScript cho phép lập trình viên để làm. Như tên cho thấy, phương pháp lọc sẽ lọc ra các phần tử của mảng dựa trên điều kiện thử nghiệm được chỉ định. Nó sẽ lặp lại qua tất cả các phần tử và ngụ ý điều kiện thử nghiệm trên chúng. Sau đó, nó sẽ trả về một mảng các phần tử mới đáp ứng điều kiện.

Chương trình Sau Đại học: Phát triển Web Full Stack

trong Hợp tác với Caltech CTME

Đăng ký ngay  Chương trình Sau đại học: Phát triển Web Full Stack

Giá trị cú pháp và tham số của bộ lọc mảng trong JavaScript

Cú pháp của bộ lọc mảng trong JavaScript là:

array.filter (callbackFn (item, index, array), thisArg)

Trong cú pháp trên:

  • CallbackFn: Đây là tham số bắt buộc chứa hàm gọi lại được cho là được triển khai trên mỗi phần tử.
  • Mục: Đây là một tham số bắt buộc chứa phần tử hiện tại đang được xử lý.
  • Chỉ mục: Đây là một tham số tùy chọn chứa giá trị chỉ mục của phần tử đang được xử lý với chỉ mục bắt đầu từ 0.
  • Mảng: Là một tham số tùy chọn chứa mảng ban đầu mà phương thức lọc được gọi.
  • ThisArg: Đây là một tham số tùy chọn, khi được truyền vào, sẽ giữ giá trị “this” cho mỗi lời gọi. Nếu đối số không được cung cấp, không xác định sẽ được sử dụng làm giá trị mặc định cho từ khóa này.

Giá trị trả về: Phương thức lọc mảng JavaScript trả về một phương thức mới chỉ có các phần tử đã vượt qua điều kiện kiểm tra.

Cách bộ lọc mảng trong JavaScript hoạt động

Hãy xem xét ví dụ dưới đây để hiểu cách bộ lọc mảng trong JavaScript hoạt động. Trong ví dụ này, chúng ta sẽ tạo một mảng với các giá trị nguyên. Tiếp theo, chúng ta sẽ sử dụng phương thức array filter () để lọc ra các số chẵn và ghi mảng kết quả vào bảng điều khiển.

hãy để num = [3, 6, 7, 12, 18, 23, 44, 62, 81];

let Even_num = num.filter (function (item) {

trả lại mặt hàng% 2 == 0; });

console.log (Even_num);

Đầu ra:

Array_Filter_in_JavaScript_1

Như bạn có thể thấy trong đầu ra, phương thức lọc mảng chỉ thêm các phần tử chẵn của mảng num vào mảng chẵn mới. Bây giờ, hãy tìm hiểu cách thức hoạt động của tính năng này từng bước.

  1. Phương thức bộ lọc được khai báo với mục trả về điều kiện thử nghiệm% 2 == 0
  2. Nó sẽ bắt đầu lặp qua các phần tử của mảng num và vượt qua điều kiện kiểm tra
  3. Nếu phần còn lại của mục chia cho 2 là 0, nó sẽ thêm mục vào mảng mới Even_num
  4. Sau khi lặp qua tất cả các phần tử, nó sẽ ghi mảng Even_num kết quả vào bảng điều khiển.
Xem Thêm  Công cụ xác thực XML trực tuyến tốt nhất - công cụ xác thực xml trực tuyến

Khóa học miễn phí: JavaScript cho người mới bắt đầu

Tìm hiểu kiến ​​thức cơ bản về JavaScript

Đăng ký ngay Khóa học miễn phí: JavaScript cho người mới bắt đầu

Bộ lọc mảng trong JavaScript: Ví dụ

Hãy xem thêm một số ví dụ về bộ lọc mảng trong JavaScript để hiểu rõ hơn về khái niệm này.

Ví dụ 1: Sử dụng bộ lọc mảng trong JavaScript với hàm mũi tên

Chúng tôi có thể sử dụng bộ lọc mảng trong JavaScript để làm cho mã ngắn hơn và dễ hiểu hơn. Trong ví dụ dưới đây, chúng tôi sẽ tạo một mảng các đối tượng người và lọc ra các đối tượng có độ tuổi lớn hơn 18.

cho phép mọi người = [

{name: ‘Rachel’, tuổi: 24},

{name: ‘David’, tuổi: 16},

{name: ‘Aakash’, tuổi: 23},

{name: ‘Franklin’, tuổi: 26},

{name: ‘Ricky’, tuổi: 17}

];

let others = people.filter (big = & gt; big.age & gt; = 18);

console.log (người lớn);

Đầu ra:

Array_Filter_in_JavaScript_2.

Ví dụ 2: Lọc các số nguyên tố bằng bộ lọc mảng trong JavaScript

Cho đến nay, chúng ta đã thấy các ví dụ trong đó chúng ta định nghĩa một hàm trong khi khai báo phương thức array.filter. Lần này, chúng tôi sẽ xác định một hàm trước tiên và sau đó sử dụng nó với phương thức bộ lọc để chỉ lọc ra các số nguyên tố cho mảng mới.

const myArray = [-5, -4, 1, 3, 7, 12, 13, 15, 17, 21, 23, 25, 27, 30];

function findPrime (item) {

for (let x = 2; item & gt; x; x ++) {

if (item% x == 0) {

trả về false;

}

}

trả lại hàng & gt; 1;

}

console.log (myArray.filter (findPrime));

Đầu ra:

Array_Filter_in_JavaScript_3.

Ví dụ 3: Lọc các giá trị trong một phạm vi bằng cách sử dụng bộ lọc mảng trong JavaScript

Đối với ví dụ này, chúng tôi sẽ khai báo một mảng gồm các phần tử khác nhau và sau đó chỉ lọc ra các mục số trong phạm vi đã cho.

hàm trongRange (item) {

if (typeof item! == ‘number’) {

trả về false;

}

trả lại mặt hàng & gt; = this.minRange & amp; & amp; item & lt; = this.maxRange;

}

let myArray = [1, 5, “this”, 12, “is”, 23, 29, “35”, “Simplilearn”, 50];

let rangeLimit = {

minRange: 1,

maxRange: 30

};

let filterArray = myArray.filter (withinRange, rangeLimit);

console.log (filterArray);

Đầu ra:

Array_Filter_in_JavaScript_4

Khóa học dành cho nhà phát triển web Full Stack

Để trở thành chuyên gia trong MEAN Stack

Xem khóa học Khóa học dành cho nhà phát triển web Full Stack

Ví dụ 4: Lọc mảng chuỗi bằng bộ lọc mảng JavaScript

Trong ví dụ này, chúng tôi sẽ khai báo một mảng có tên ô tô và lọc ra các phần tử có ký tự mong muốn trong chuỗi.

let ô tô = [‘Mercedes-Benz’, ‘Ranger’, ‘Lamborghini’, ‘Ferrari’, ‘Mahindra’]

function myFunc (myArray, searchCriteria) {

trả về myArray.filter (function (item) {

Xem Thêm  Mảng 2D trong NumPy (Python) - mảng 2d numpy lát

return item.toLowerCase (). indexOf (searchCriteria.toLowerCase ())! == -1

})

}

console.log (myFunc (ô tô, ‘er’))

Đầu ra:

Array_Filter_in_JavaScript_5

Hạn chế của bộ lọc mảng trong JavaScript

Bên cạnh việc có một số lợi ích, phương pháp lọc mảng JavaScript cũng có một số hạn chế, đó là:

  • Vì phương thức bộ lọc không thay đổi mảng ban đầu, chúng tôi cần lưu mảng đã lọc để làm việc với nó sau này.
  • Phương thức lọc mảng không hoạt động nếu mảng không có bất kỳ phần tử nào trong đó.

Các trình duyệt hỗ trợ bộ lọc mảng trong JavaScript

Sau đây là danh sách các trình duyệt hỗ trợ việc sử dụng phương pháp lọc mảng JavaScript.

  • Google Chrome
  • Microsoft Edge 9
  • Mozilla Firefox 1.5
  • Opera 9.5
  • Safari 3

Nắm vững các nguyên tắc cơ bản hoàn chỉnh về JavaScript, jQuery, Ajax, v.v. với Khóa đào tạo chứng chỉ Javascript . Hãy xem bản xem trước khóa học!

Kết luận

Trong bài viết này, bạn đã học mọi thứ về bộ lọc mảng trong JavaScript. Bạn có thể tìm hiểu thêm các nguyên tắc cơ bản về JavaScript như vậy bằng cách tham khảo JavaScript Tutorial của Simplilearn. Tuy nhiên, nếu bạn muốn tăng thêm uy tín cho kỹ năng lập trình của mình, tốt nhất bạn nên chọn tham gia Khóa học chứng chỉ JavaScript của chúng tôi. Đây là một chương trình đào tạo theo nhịp độ riêng giúp bạn thành thạo lập trình JavaScript và theo đuổi một sự nghiệp đáng kể trong đó.

Trong thế giới cạnh tranh ngày nay, các nhà tuyển dụng đang tìm kiếm những chuyên gia thông thạo nhiều ngôn ngữ lập trình. Bạn có thể đạt được điều này bằng cách đăng ký trên nền tảng SkillUp của chúng tôi và chọn tham gia Khóa học cấp chứng chỉ phát triển web full-Stack . Nền tảng SkillUp cung cấp các khóa học trực tuyến miễn phí cho nhiều ngôn ngữ lập trình, bao gồm cả JavaScript. Mặt khác, khóa học Chứng chỉ Phát triển Web Full-Stack là một chương trình đào tạo toàn diện giúp bạn làm quen với các nguyên tắc cơ bản của các ngôn ngữ phát triển phổ biến nhất. Khi hoàn thành khóa học, bạn sẽ nhận được chứng chỉ và sẵn sàng bắt đầu sự nghiệp phát triển phần mềm và web.


Xem thêm những thông tin liên quan đến chủ đề ví dụ về bộ lọc mảng javascript

Filter, Map, Reduce, and Sort | JavaScript Array Methods

alt

  • Tác giả: CodAffection
  • Ngày đăng: 2022-02-20
  • Đánh giá: 4 ⭐ ( 4701 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript Array Methods – Filter, Map, Reduce, and Sort

    These four methods are quite useful to work with JavaScript arrays, especially in real-world projects. When compared with array methods, these methods perform complex tasks with one callback function.

    So in this video, everything is explained with utmost clarity and examples.

    ➤ Content Discussed
    00:00 – Filter Method
    08:28 – Find Vs Filter
    10:23 – Map Method
    13:27 – Reduce Method
    22:50 – Sort Method

    Ask your questions on our Discord Community
    ➤ https://discord.gg/Nky4YTFEsG

    💖 Show Your Support ( Donation )
    ➤ https://bit.ly/3L36ut4 (PayPal)
    ➤ https://bit.ly/36lvWdV (Cards, Gpay, Apple Pay, UPIs)

    ✨ Recommended Courses
    ► Javascript : https://bit.ly/3krh8wB
    ► Typescript: https://bit.ly/35wiCPN
    ► React : https://bit.ly/35pLyZP
    ► Angular : https://bit.ly/35oTA5e

    📂 JavaScript Taking Project in GitHub
    ➤ https://bit.ly/3aH1KJD

    🌀 Related Videos ___
    https://bit.ly/3gE5Dmp : All Videos from this Series
    https://bit.ly/3sDDkcd : JS Array Methods ( Prev. Video )
    https://bit.ly/3v8mWTU : JSConf Video (Anjana Vakeel)
    https://bit.ly/2XnpAGO : Array Basic or Fundamentals

    Subscribe to this channel Link to this video
    ➤ https://goo.gl/RFY5C2 ➤ https://bit.ly/3v0JE0g

    📚 Must-Read Books for All Programmers
    Code Complete(2nd Edition) : https://geni.us/s6AK9t
    The Art of Computer Programming : https://geni.us/Ko4H8m
    Clean Code : https://geni.us/Jf9EBTB
    Design Patterns : https://geni.us/OMPP
    The Pragmatic Programmer : https://geni.us/8UM9F

    💰 Purchase for Developers
    💻 Laptops
    MacBook Pro with M1 Chip : https://geni.us/7KGvnCU
    Dell XPS 9570 : https://geni.us/rYB6
    Microsoft Surface:https://geni.us/BJgeM
    MacBook Air with M1 Chip : https://geni.us/fHZzRiB
    ASUS ZenBook 13 : https://geni.us/LDKE
    Lenovo Ideapad : https://geni.us/Mwvg2
    ⌨️ Keyboard : Das 4 Professional : https://geni.us/hkAdzi

    🎬 All Playlist
    http://bit.ly/2KQN9xF : Angular
    http://bit.ly/30fPDMg : Asp.Net Core
    http://bit.ly/325temF : React
    http://bit.ly/2ws4utg : Python
    https://goo.gl/viJcFs : Node.js
    https://goo.gl/gvjUJ7 : Asp.Net MVC
    https://bit.ly/3ggmmJz : Flutter
    https://goo.gl/itVayJ : Web API
    https://goo.gl/YJPPAH : MEAN Stack
    https://goo.gl/s1zJxo : C Tutorial
    https://goo.gl/GXC2aJ : Asp.Net WebForm
    https://goo.gl/vHS9Hd : C WinForm
    https://goo.gl/MLYS9e : MS SQL
    https://goo.gl/5Vou7t : Crystal Report
    https://goo.gl/qEWJCs : CG Exercises in C Program

    🌟 About this Channel
    CodAffection – [ 1 hour content weekly ].
    This channel is all about teaching and motivating software developers to build applications/
    websites in various technologies/ programming languages like Angular, React, NodeJS, Python, Asp.Net, C, JavaScript, SQL, etc.
    ► For Sponsorship Contact here: https://bit.ly/2TjOt0q

    🔗 Social Media Links
    Blog : http://www.codaffection.com
    Facebook : https://www.facebook.com/codaffection
    Twitter : https://twitter.com/codaffection
    Youtube : https://youtube.com/codaffection
    GitHub : https://github.com/codaffection

    JavaScript JavaScriptBeginnersTutorial CodAffection

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

  • Tác giả: galaxyz.net
  • Đánh giá: 3 ⭐ ( 8803 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ó:

Bộ lọc Bloom

  • Tác giả: nvanha.github.io
  • Đánh giá: 3 ⭐ ( 9967 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bản đồ mảng JavaScript ()

  • Tác giả: vi.wiki-base.com
  • Đánh giá: 5 ⭐ ( 6087 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Javascript: 15 ví dụ sử dụng map, reduce và filter

  • Tác giả: topdev.vn
  • Đánh giá: 4 ⭐ ( 5050 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: javascript có rất nhiều chức năng khác nhau và cách sử dụng của map, reduce và filter khác nhau, dưới đây là một vài ví dụ cho điều đó.

Một số hàm xử lí mảng trong Javascript

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 1806 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu – Xin chào mọi người hôm này mình xin phép chia sẽ 1 chút về một số hàm xử lý mảng trong js . Có thể là các bạn đã và đang dùng nó hàng ngày nhưng có thể bạn không hiểu được mục đích sử dụn…

[Angular][Phần 5]AngularJS Filter – Bộ lọc

  • Tác giả: dotnet.edu.vn
  • Đánh giá: 3 ⭐ ( 9311 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bộ lọc được thêm vào biểu thức và chỉ thị trên HTML bằng cách viết sau ký tự

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  Phương thức Window open () - javascript window.open target trống

By ads_php