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 (một tập hợp con) từ một tập hợp các mục lớn hơn (một tập hợp con) dựa trên một số điều kiện / tùy chọn.

Bạn đang xem : bộ lọc phần tử từ javascript mảng

Phương thức Array.filter () được cho là phương pháp 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 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 (một tập hợp con) từ một tập hợp các mục lớn hơn (một tập hợp con) dựa trên một số điều kiện / tùy chọn.

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 bộ phim để xem, v.v.

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

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 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ủa currentItem bên trong mảng.
  • mảng : Vị trí này đại diện cho mảng đích 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 lệnh 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 (tuổi nằm trong khoảng 0 và 4).

 < code class = "language-js"> let people = [
    {name: "aaron", age: 65},
    {name: "beth", age: 2},
    {name: "cara", tuổi: 13},
    {name: "daniel", tuổi: 3},
    {name: "ella", tuổi: 25},
    {name: "fin", tuổi: 1},
    {name: "george", tuổi: 43},
]

let toddlers = people.filter (person = & gt; person.age & lt; = 3)

console.log (trẻ mới biết đi)



/ *
[{
  tuổi: 2,
  tên: "beth"
}, {
  tuổi: 3,
  tên: "daniel"
}, {
  tuổi: 1,
  tên: "vây"
}]
* /  

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 = [
{
  tên: "aaron",
    vị trí: "nhà phát triển"
 },
  {
  tên: "beth",
    vị trí: "ui designer"
  },
  {
  tên: "cara",
    vị trí: "nhà phát triển"
  },
 {
  tên: "daniel",
    chức vụ: "quản lý nội dung"
 },
  {
  tên: "ella",
    vị trí: "cto"
  },
  {
  tên: "vây",
    vị trí: "kỹ sư phụ trợ"
  },
  {
  tên: "george",
    vị trí: "nhà phát triển"
  },

]

let Develop = team.filter (member = & gt; member.position == "developer")

console.log (nhà phát triển)


/ *
[{
  tên: "aaron",
  vị trí: "nhà phát triển"
}, {
  tên: "cara",
  vị trí: "nhà phát triển"
}, {
  tên: "george",
  vị trí: "nhà phát triển"
}]
* /  

Trong ví dụ trên, chúng tôi đã lọc ra các nhà phát triển. Nhưng điều gì sẽ xảy ra nếu chúng tôi muốn lọc ra mọi thành viên không phải là nhà phát triển?

Chúng tôi có thể làm điều này:

  let team = [
{
        tên: "aaron",
   vị trí: "nhà phát triển"
  },
  {
  tên: "beth",
   vị trí: "ui designer"
 },
  {
  tên: "cara",
    vị trí: "nhà phát triển"
  },
  {
  tên: "daniel",
    chức vụ: "quản lý nội dung"
  },
  {
  tên: "ella",
    vị trí: "cto"
  },
  {
  tên: "vây",
    vị trí: "kỹ sư phụ trợ"
  },
  {
  tên: "george",
    vị trí: "nhà phát triển"
  },

]

let nondevelopers = team.filter (member = & gt; member.position! == "developer")

console.log (nondevelopers)


/ *
[
    {
  tên: "beth",
  vị trí: "ui designer"
},
    {
  tên: "daniel",
  chức vụ: "quản lý nội dung"
},
    {
  tên: "ella",
  vị trí: "cto"
},
    {
  tên: "vây",
  vị trí: "kỹ sư phụ trợ"
}
]

* /  

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 bạc và thứ ba là đồng.

Bằng cách sử dụng bộ lọc và truy cập thuộc tính index của mỗi mục trên mỗi lần lặp lại, chúng tôi có thể lọc ra từng người trong số ba người chiến thắng thành các biến khác nhau.

  let win = ["Anna", "Beth", "Cara "]

let gold = winner.filter ((người chiến thắng, chỉ số) = & gt; index == 0)
let silver = winner.filter ((người chiến thắng, chỉ mục) = & gt; index == 1)
let Bronze = winner.filter ((người chiến thắng, chỉ số) = & gt; index == 2)

console.log (Người chiến thắng vàng: $ {gold}, Người chiến thắng bạc: $ {silver}, Người chiến thắng đồng: $ {đồng})

// "Người chiến thắng vàng: Anna, Người chiến thắng bạc: Beth, Người chiến thắng đồng: 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 liệu còn một mục 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 tôi sẽ xác định một dãy 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 được giảm giá.

Để có thể làm được điều này, chúng ta cần nhận được thông tin về mảng đích trên mỗi lần lặp lại.

  let challenge = ["Anna "," Beth "," Cara "," David "]

function displayWinners (tên, chỉ mục, mảng) {
    let isNextItem = index + 1 & lt; array.length? đúng sai
    if (isNextItem) {
    console.log (`Người chiến thắng No $ {index + 1} là $ {name} .`);
    } khác {
    console.log (`Xin lỗi, $ {name} không phải là một trong những người chiến thắng. ')
    }
}

đối thủ cạnh tranh.filter ((tên, chỉ mục, mảng) = & gt; displayWinners (tên, chỉ mục, mảng))

/ *
"Người chiến thắng No1 là Anna."
"Người chiến thắng No2 là Beth."
"Người chiến thắng No 3 là Cara."
"Xin lỗi, David không phải là một trong những người chiến thắng."
* /  

sorry Rất tiếc, xin lỗi David!

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

Trong ngoài hàm gọi lại, phương thức filter () cũng có thể nhận vào một đối tượng ngữ cảnh.

  filter (callbackfn, contextobj) < / code> 

Đố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 this .

filter () Ví dụ 5: Cách truy cập đối tượng ngữ cảnh bằng this

< p> Điều này sẽ tương tự như ví dụ 1 . Chúng tôi sẽ lọc ra tất cả những người nằm 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à thuộc tính bên trong đối tượng range , sau đó chúng tôi sẽ chuyển vào filter làm đối tượng ngữ cảnh (tham số thứ hai).

  let people = [
    {name: "aaron", age: 65},
    {name: "beth", tuổi: 15},
    {name: "cara", tuổi: 13},
    {name: "daniel", tuổi: 3},
    {name: "ella", tuổi: 25},
    {name: "fin", tuổi: 16},
    {name: "george", tuổi: 18},
]

hãy để phạm vi = {
  thấp hơn: 13,
  trên: 16
}

   
let teen = people.filter (function (person) {
trả lại người.age & gt; = this.lower & amp; & amp; person.age & lt; = this.upper;
}, phạm vi)

console.log (thanh thiếu niên)

/ *
[{
  lứa tuổi 15,
  tên: "beth"
}, {
  13 tuổi,
  tên: "cara"
}, {
  tuổi: 16,
  tên: "vây"
}]
* /  

Chúng tôi đã chuyển đối tượng range làm đối số thứ hai cho filter () . Tại thời điểm đó, nó trở thành đối tượng ngữ cảnh của chúng ta. Do đó, chúng tôi có thể truy cập phạm vi trên và dưới trong hàm gọi lại của mình với tham chiếu this.upper this.lower tương ứng.

Wrapping Up

Phương thức mảng filter () lọc ra (các) mục phù hợp với biểu thức gọi lại và trả về chúng.

Ngoài hàm gọi lại, phương thức filter cũng có thể lấy đố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ừ hàm gọi lại bằng cách sử dụng this .

Tôi hy vọng bạn nhận được điều gì đó hữu ích từ bài viết này.

Tôi 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ảm ơn bạn đã đọc và hẹn gặp lại bạn sớm.

Đ ượ c > P / S < / strong> > : Nếu bạn đang học JavaScript, tôi đã tạo một sách điện tử dạy 50 chủ đề bằng JavaScript với các ghi chú kỹ thuật số vẽ tay. Hãy xem tại đây .


Xem thêm những thông tin liên quan đến chủ đề lọc các phần tử từ mảng javascript

JavaScript Tip: Deleting an Element from an Array

alt

  • Tác giả: All Things JavaScript, LLC
  • Ngày đăng: 2019-02-13
  • Đánh giá: 4 ⭐ ( 6640 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial we look at how to properly delete an element in a JavaScript array using splice instead of the delete command.

    For more resources on JavaScript:
    http://www.allthingsjavascript.com

    Courses offered on Udemy: Getting Started or Advanced Topics at a huge discount:
    https://www.udemy.com/learn-modern-javascript-getting-started/?couponCode=YOUTUBE

    https://www.udemy.com/learn-modern-javascript-advanced-topics/?couponCode=YOUTUBE

    New Mastering Regular Expressions in JavaScript:
    https://www.udemy.com/mastering-regular-expressions-in-javascript/?couponCode=YOUTUBE18

    Tutorials referred to in this video:
    Using slice and splice:
    https://youtu.be/pCqfbzj2iLY
    Understanding delete: https://youtu.be/MBNXGBy_xjA
    Copying Objects: https://youtu.be/27d_n2zoa_s
    Spread operator: https://youtu.be/ugw32Yprzjw

    javascript AllThingsJavaScriptLLC

Filter một phần tử của mảng trong Javascript

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 9147 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xin chào mọi người, sau một hồi lướt trên internet thì mình tìm được một bài khá hay về Javascript. Nên mình xin phép dịch lại nội dung bài viết đó.

Bộ lọc JavaScript:Hướng dẫn từng bước

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 4 ⭐ ( 2706 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

13 cách để Remove/Filter một phần tử của mảng trong Javascript

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

  • Tác giả: www.homiedev.com
  • Đánh giá: 5 ⭐ ( 4519 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á: 5 ⭐ ( 7030 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 đó.

Lấy phần tử trong mảng JavaScript

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 3 ⭐ ( 7624 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách lấy phần tử trong mảng JavaScript. Bạn sẽ học được 4 cách cơ bản để lấy phần tử trong mảng JavaScript sau bài học này.

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  CASE (Transact-SQL) - Máy chủ SQL - case if then sql

By ads_php