Khi bạn đang làm việc với một tập hợp mảng, đôi khi bạn chỉ cần tìm hiểu xem một mục có tồn tại trong mảng hay không để bạn có thể truy xuất nó. Và bạn sẽ không quan tâm có bao nhiêu mục khác (nếu có) tồn tại trong cùng một mảng. Chà, chúng ta có thể sử dụng phương thức find () để

Bạn đang xem: < font style = "vertical-align: inherit;"> tìm mảng trong javascript

Khi bạn đang làm việc với một tập hợp mảng, đôi khi bạn ‘ Bạn sẽ chỉ cần tìm xem một mục có tồn tại trong mảng hay không để bạn có thể truy xuất nó. Và bạn sẽ không quan tâm có bao nhiêu mục khác (nếu có) tồn tại trong cùng một mảng.

Chà, chúng ta có thể sử dụng phương thức find () để làm điều đó.

Phương thức Array.find () hoạt động như thế nào

Phương thức find () là một phương thức Array.prototype (hay còn gọi là tích hợp sẵn) sử dụng trong 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 mà nó được liên kết.

Khi tìm thấy một kết quả phù hợp (nói cách khác, hàm gọi lại trả về true ), phương thức sẽ trả về mục mảng cụ thể đó và ngay lập tức phá vỡ vòng lặp. Vì vậy, phương thức find () trả về phần tử đầu tiên bên trong một mảng thỏa mãn hàm gọi lại.

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 < code> currentItem bên trong mảng.
  • mảng : Điều này đại diện cho mảng đích cùng với tất cả các mục của nó.

Cách sử dụng phương thức find () 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 find () để truy xuất mục đầu tiên từ một mảng phù hợp với điều kiện được chỉ định trong JavaScript.

Cách lấy một mục duy nhất với find ()

Giả sử bạn có một con chó bị mất tích. Bạn báo cáo nó với các cơ quan có liên quan và họ mang theo một nhóm chó đã được phục hồi.

Để có thể tìm thấy con chó của bạn, bạn cần cung cấp thông tin độc đáo về nó. Ví dụ: giống chó của bạn (Chihuahua) có thể được sử dụng để xác định nó.

Chúng tôi có thể diễn đạt tình huống này trong JavaScript bằng cách sử dụng một bộ sưu tập mảng. Mảng có tên foundDogs sẽ chứa tất cả tên của những con chó đã được phục hồi cũng như các giống chó tương ứng của chúng. Và chúng tôi sẽ sử dụng phương thức find () để tìm con chó là Chihuahua từ bên trong mảng.

  let foundDogs = [{
    giống: "Beagle",
    màu trắng"
  },

  {
    giống: "Chihuahua",
    màu vàng"
  },

  {
    giống: "Pug",
    màu đen"
  },
]

function findMyDog (dog) {
  return dog.breed === "Chihuahua"
}

let myDog = foundDogs.find (dog = & gt; findMyDog (dog));

console.log (myDog);


/ *

{
  giống: "Chihuahua",
  màu vàng"
}

* /  

Phương thức find ngừng lặp lại khi tìm thấy kết quả phù hợp.

Xem Thêm  Thanh trượt hình ảnh tự động trong Html Css [Đã cập nhật] - tự động trình chiếu hình ảnh html

Có một điều rất quan trọng cần nhớ về find () : nó ngừng thực thi sau khi hàm gọi lại trả về câu lệnh true .

Để minh họa điều này, chúng tôi sẽ sử dụng lại ví dụ con chó bị thiếu một lần nữa. Lần này, chúng tôi sẽ giả định rằng hai con Chihuahua đã được tìm thấy.

Nhưng phương thức find () sẽ chỉ trả về phiên bản đầu tiên của Chihuahua mà nó phát hiện ra trong mảng. Bất kỳ trường hợp nào khác sau đó sẽ bị bỏ qua.

Chúng ta cũng có thể dễ dàng thấy điều này bằng cách ghi vị trí chỉ mục của mục đó vào bảng điều khiển:

  let foundDogs = [{
    giống: "Beagle",
    màu trắng"
  },

  {
    giống: "Chihuahua",
    màu vàng"
  },

  {
    giống: "Pug",
    màu đen"
  },
  
  {
    giống: "Chihuahua",
    màu vàng"
  }
]


function findMyDog (dog, index) {
if (dog.breed === "Chihuahua") console.log (index);
  return dog.breed === "Chihuahua"
}


let myDog = foundDogs.find ((dog, index) = & gt; findMyDog (dog, index));


console.log (myDog);

/ *
1

{
  giống: "Chihuahua",
  màu vàng"
}

* /  

Trả về trường hợp đầu tiên có chỉ mục là 1 findreturns1

Cách sử dụng Nhiệm vụ cấu trúc

Bạn có thể làm cho mã của mình ngắn gọn hơn bằng cách kết hợp cả phép gán cấu trúc và biểu thức hàm mũi tên.

Chúng tôi sẽ sử dụng hàm hủy để chỉ trích xuất thuộc tính name từ đối tượng mà sau đó chúng tôi chuyển vào làm tham số cho hàm gọi lại.

Chúng ta sẽ nhận được cùng một kết quả:

  let foundDogs = [{
    giống: "Beagle",
    màu trắng"
  },

  {
    giống: "Chihuahua",
    màu vàng"
  },

  {
    giống: "Pug",
    màu đen"
  },
]

 


let myDog = foundDogs.find (({giống}) = & gt; giống === "Chihuahua");

console.log (myDog);

/ *

{
  giống: "Chihuahua",
  màu vàng"
}

* /  

Cách tìm một mục theo chỉ mục của nó

Trong ví dụ này , chúng tôi sẽ tìm và trả về vị trí thuộc về ‘David’ từ bên trong mảng bằng cách sử dụng giá trị chỉ mục duy nhất của nó. Điều này cho thấy một cách chúng ta có thể sử dụng thuộc tính index bên trong hàm callback với phương thức find () :

  let ReservedPositions = [{
    tên: "Anna",
    tuổi: 24
  },

  {
    tên: "Beth",
    tuổi: 22
  },

  {
    tên: "Cara",
    tuổi: 25
  },
  
  {
    tên: "David",
    tuổi: 30
  },
  
  {
    tên: "Ethan",
    tuổi: 26
  }
]


function findByIndex (person, index) {
  chỉ số trả về === 3
}


let myPosition = dành riêngPositions.find ((người, chỉ mục) = & gt; findByIndex (người, chỉ mục));

console.log (myPosition);

/ *
{
  tuổi: 30,
  tên: "David"
}
* /  

Bạn có thể sử dụng Đối tượng ngữ cảnh với find ()

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

  find (callback, contextObj)  

Sau đó, chúng tôi có thể tham chiếu đến đối tượng này từ bên trong hàm callback trên mỗi lần lặp, sử dụng từ khóa this làm tham chiếu. Điều này cho phép chúng tôi truy cập bất kỳ thuộc tính hoặc phương thức nào được xác định bên trong đối tượng ngữ cảnh.

Cách sử dụng đối tượng ngữ cảnh với find ()

Giả sử chúng tôi có một loạt các đơn xin việc và chỉ muốn chọn ứng viên đầu tiên đáp ứng tất cả các tiêu chí.

Tất cả các tiêu chí được xác định bên trong một đối tượng ngữ cảnh được gọi là tiêu chí và đối tượng đó sau đó được chuyển dưới dạng tham số thứ hai vào phương thức find () . Sau đó, từ bên trong hàm gọi lại, chúng tôi truy cập đối tượng để kiểm tra xem người đăng ký có phù hợp với tất cả các tiêu chí được chỉ định ở đó hay không.

  letants = [
    {name: "aaron", yrsOfExperience: 18, age: 66},
    {name: "beth", yrsOfExperience: 0, age: 18},
    {name: "cara", yrsOfExperience: 4, age: 22},
    {name: "daniel", yrsOfExperience: 3, age: 16},
    {name: "ella", yrsOfExperience: 5, age: 25},
    {name: "fin", yrsOfExperience: 0, age: 16},
    {name: "george", yrsOfExperience: 6, age: 28},
]

để tiêu chí = {
kinh nghiệm tối thiểu: 3,
  thấp hơn Tuổi: 18,
  trên Tuổi: 65
}

   
let luckyApplicant = application.find (function (người đăng ký) {
return application.yrsOfExperience & gt; = this.minimumExperience & amp; & amp; Application.age & lt; = this.upperAge
  & amp; & amp; Application.age & gt; = this.lowerAge;
}, tiêu chuẩn)

console.log (luckyApplicant);

/ *
{
  tuổi: 22,
  tên: "cara",
  yrsOfExperience: 4
}
* /  

Về mặt kỹ thuật, ba ứng viên (Cara, Ella và George) đều đủ điều kiện dựa trên các tiêu chí. Nói cách khác, ba người trong số họ từ 18 tuổi trở lên, không quá 65 tuổi và có ít nhất 3 năm kinh nghiệm làm việc.

Tuy nhiên, vì phương thức find () luôn CHỈ trả về trường hợp đầu tiên cho giá trị true, hai trường hợp còn lại sẽ bị bỏ qua và vòng lặp sẽ bị hỏng.

< h2 id = "wrap-up"> Wrapping Up

Phương thức find () là một phương thức Array.prototype trong đó nhận một hàm gọi lại và gọi hàm đó cho mọi mục trong mảng liên kết.

Khi hàm gọi lại đánh giá là true , phương thức này sẽ trả về mục hiện tại và ngắt vòng lặp. Nó chỉ trả về kết quả phù hợp đầu tiên – bất kỳ kết quả phù hợp nào khác có bên trong mảng sẽ bị bỏ qua.

Ngoài hàm gọi lại, phương thức find () cũng có thể sử dụng đố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.

Đ c t ủ / đăng ký < strong>

Cảm ơn bạn đã đọc và hẹn gặp lại bạn sớm.

Đ ượ c > < mạnh> Đ ượ c > P / S > < / strong> > < / 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ủ đề tìm mảng trong javascript

Javascript: 06-10 Bài tập tìm MAX

alt

  • Tác giả: Easy Frontend
  • Ngày đăng: 2021-12-02
  • Đánh giá: 4 ⭐ ( 5950 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Video này là một phần trong khoá học Javascript của mình trên Udemy.
    Đăng ký để xem full tại đây: http://course.ezfrontend.com/javascript
    ———
    js
    javascript
    javascript_tutorial
    ———
    VIDEO CHAPTERS:
    Made by: YOUR_NAME_WILL_BE_HERE
    Cảm ơn bạn nhiều nhé! ❤️
    ———
    Easy Frontend – Code xịn hơn mỗi ngày
    🔥 Khoá học Javascript: https://course.ezfrontend.com/javascript
    🎁 Khoá học ReactJS: https://course.ezfrontend.com/reactjs
    🎯 Fan cứng Easy Frontend: https://www.youtube.com/channel/UCG2ovypNCpVOTFeY1YCocmQ/join
    ———
    💰 Ủng hộ mình làm videos thì đóng góp qua MoMo/ZaloPay: 0901 309 729 nhé
    ———
    Kết nối với mình:
    – ✅ Follow facebook: https://www.facebook.com/nvhauesmn/
    – 🎉 Fan page: https://www.facebook.com/learn.easyfrontend
    – ❓ Group: https://www.facebook.com/groups/easyfrontend
    – 💻 Github: https://github.com/paulnguyen-mn
    – 💼 LinkedIn: https://www.linkedin.com/in/haunguyenmn/

Tìm hiểu về Array (mảng) trong JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 5891 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu Hôm nay mình sẽ giới thiệu cho các bạn một kiểu dữ liệu trong Javascript, đó là Array. Nó sẽ giúp bạn có thể biểu diễn được những dữ liệu phức tạp và dễ dàng hơn trong việc quản lí cũng như…

Tìm hiểu về mảng trong JavaScript

  • Tác giả: itzone.com.vn
  • Đánh giá: 3 ⭐ ( 7339 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The ITZone platform Vietnam is the community for anyone interested in news, training seminars, presentations etc in the IT industry

Mảng array trong Javascript

  • Tác giả: kungfutech.edu.vn
  • Đánh giá: 3 ⭐ ( 7780 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Array, hay được gọi là mảng, là kiểu dữ liệu mà giá trị của nó chứa nhiều giá trị khác. Mỗi giá trị của mảng được gọi là element (phần tử)

mảng trong javascript

  • Tác giả: codetutam.com
  • Đánh giá: 5 ⭐ ( 1518 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vận dụng các hàm xử lý array trong javascript sẽ giúp bạn tăng tốc công việc cũng như giảm thiểu những sai lầm không đáng có. Cùng tìm hiểu nhé!

Mảng trong javascript

  • Tác giả: longnv.name.vn
  • Đánh giá: 5 ⭐ ( 3030 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mảng trong javascript là các biến đặc biệt, nó chứa nhiều giá trị có chỉ số từ 0. Dùng mảng để lưu, sắp xếp, tìm kiếm, tính toán…

Hàm array.find() trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 5105 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách dùng hàm Array.find() trong Javascript, hàm find javascript sẽ trả về giá trị của phần tử đầu tiên trong mảng thỏa mãn được điều kiện kiểm tra

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

By ads_php