HomeLập trìnhJavaScriptHướng dẫn JavaScript...

Hướng dẫn JavaScript Array.find() – Cách lặp qua các phần tử trong một mảng


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.

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

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

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

Khi tìm thấy kết quả khớp (nói cách khác, hàm gọi lại trả về true), phương thức trả về mục mảng cụ thể đó và ngay lập tức ngắt vòng lặp. Nên find() phương thức trả về phần tử đầu tiên bên trong một mảng thỏa mãn chức năng 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 currentItem bên trong mảng.
  • array: Đ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ó.

Làm thế nào để sử dụng find() Phương thức trong JavaScript

Trong các ví dụ sau, tôi sẽ trình bày cách bạn có thể sử dụng find() phương thức để truy xuất mục đầu tiên từ một mảng khớp với một điều kiện đã chỉ định trong JavaScript.

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

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

Đọc thêm  Hãy nói về dấu chấm phẩy trong JavaScript

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

Chúng ta có thể diễn đạt kịch bản này bằng JavaScript bằng cách sử dụng một bộ sưu tập mảng. Mảng được gọi 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 tương ứng của chúng. Và chúng tôi sẽ sử dụng find() phương pháp tìm con chó Chihuahua từ bên trong mảng.

let foundDogs = [{
    breed: "Beagle",
    color: "white"
  },

  {
    breed: "Chihuahua",
    color: "yellow"
  },

  {
    breed: "Pug",
    color: "black"
  },
]

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

let myDog = foundDogs.find(dog => findMyDog(dog));

console.log(myDog);


/*

{
  breed: "Chihuahua",
  color: "yellow"
}

*/

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

Có một cái gì đó rất quan trọng để nhớ về find(): nó dừng thực thi khi hàm gọi lại trả về một true bản tường trình.

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

Nhưng find() phương thức 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 lại vị trí chỉ mục của mục đó vào bảng điều khiển:

let foundDogs = [{
    breed: "Beagle",
    color: "white"
  },

  {
    breed: "Chihuahua",
    color: "yellow"
  },

  {
    breed: "Pug",
    color: "black"
  },
  
  {
    breed: "Chihuahua",
    color: "yellow"
  }
]


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


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


console.log(myDog);

/* 
1

{
  breed: "Chihuahua",
  color: "yellow"
}

*/
Trả về phiên bản đầu tiên có chỉ số là 1
tìm lợi nhuận1

Cách sử dụng Bài tập phá hủy

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 phá hủy và biểu thức hàm mũi tên.

Đọc thêm  Hướng dẫn setTimeout JavaScript – Cách sử dụng JS Tương đương với chế độ ngủ, chờ, trì hoãn và tạm dừng

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

Chúng tôi sẽ nhận được kết quả tương tự:

let foundDogs = [{
    breed: "Beagle",
    color: "white"
  },

  {
    breed: "Chihuahua",
    color: "yellow"
  },

  {
    breed: "Pug",
    color: "black"
  },
]

 


let myDog = foundDogs.find(({breed}) => breed === "Chihuahua");

console.log(myDog);

/*

{
  breed: "Chihuahua",
  color: "yellow"
}

*/

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ả lại 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 chứng tỏ một cách chúng ta có thể sử dụng index tài sản bên trong của chúng tôi callback chức năng với find() phương pháp:

let reservedPositions = [{
    name: "Anna",
    age: 24
  },

  {
    name: "Beth",
    age: 22
  },

  {
    name: "Cara",
    age: 25
  },
  
  {
    name: "David",
    age: 30
  },
  
  {
    name: "Ethan",
    age: 26
  }
]


function findByIndex(person, index) {
  return index === 3
}


let myPosition = reservedPositions.find((person, index) => findByIndex(person, index));

console.log(myPosition);

/*
{
  age: 30,
  name: "David"
}
*/

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

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

find(callback, contextObj)

Sau đó chúng ta có thể tham khảo đối tượng này từ bên trong gọi lại chức năng trên mỗi lần lặp, sử dụng this từ khóa làm tài liệu tham khảo. Điều này cho phép chúng ta 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 bối cảnh với find()

Giả sử chúng ta có một loạt đơ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 bối cảnh được gọi là criteria và đối tượng đó sau đó được chuyển dưới dạng tham số thứ hai vào find() phương pháp. Sau đó, từ bên trong chức năng gọi lại, chúng tôi truy cập đối tượng để kiểm tra xem ứng viên có phù hợp với tất cả các tiêu chí được chỉ định ở đó hay không.

let applicants = [
    {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},
]

let criteria = {
	minimumExperience: 3,
  lowerAge: 18,
  upperAge: 65
}

   
let luckyApplicant = applicants.find(function(applicant) {
	return applicant.yrsOfExperience >= this.minimumExperience && applicant.age <= this.upperAge
  && applicant.age >= this.lowerAge ;
}, criteria)

console.log(luckyApplicant);

/*
{
  age: 22,
  name: "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 họ ít nhất 18 tuổi, không quá 65 tuổi và có ít nhất 3 năm kinh nghiệm làm việc.

Đọc thêm  module.exports – Cách xuất trong Node.js và JavaScript

Tuy nhiên kể từ khi find() luôn trả về CHỈ phiên bản đầu tiên được đánh giá là đúng, hai phiên bản còn lại sẽ bị bỏ qua và vòng lặp sẽ bị hỏng.

kết thúc

Các find() phương pháp là một Array.prototype phương thức nhận hàm gọi lại và gọi hàm đó cho mọi mục trong mảng bị ràng buộc.

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

Ngoài chức năng gọi lại, find() phương thức 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 this.

Tôi hy vọng bạn có một cái gì đó hữu ích từ bài viết này.

Tôinếu bạn muốn tìm hiểu thêm về Phát triển Web, vui lòng truy cập trang web của tôi Blog.

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.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status