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ủacurrentItem
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ể 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"
}
*/

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.
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.
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.