Sử dụng phương thức Array.find trong JavaScript

Phương thức Array.find JavaScript là một cách thuận tiện để find và trả về lần xuất hiện đầu tiên của một phần tử trong một mảng, trong một hàm kiểm tra đã xác định. Khi bạn muốn có một kim duy nhất từ đống cỏ khô, đạt cho find() !

Khi nào sử dụng Array.find

Hàm và cú pháp của find() rất giống với phương thức Array.filter , ngoại trừ nó chỉ trả về một phần tử duy nhất . Một điểm khác biệt nữa là khi không tìm thấy gì, phương thức này trả về giá trị undefined .

Vì vậy, nếu bạn chỉ cần một giá trị duy nhất, hãy sử dụng find() ! Thay vào đó, khi bạn cần tìm / trả về nhiều giá trị, hãy tiếp cận filter() .

Cách sử dụng Array.find

Sử dụng find() rất dễ dàng! Tham số bắt buộc duy nhất của phương pháp này là một chức năng kiểm tra và nó có thể đơn giản hoặc phức tạp nếu cần. Ở dạng cơ bản nhất của nó:

array.find(testingFunction); // that's it!

Ví dụ đơn giản:

Đây là một ví dụ đơn giản với một mảng các chuỗi:

const trees = [ 
  "birch", 
  "maple", 
  "oak", 
  "poplar" 
];

const result = trees.find(tree => tree.startsWith("m"));

// "maple"

Ở dạng không viết tắt, không phải ES6:

const result = trees.find(function(tree) {
  return tree.startsWith("m");
});

// "maple"

Sử dụng với các đối tượng:

Ta cũng có thể sử dụng find() để dễ dàng tìm kiếm các mảng đối tượng!

const trees = [
  { name: "birch", count: 4 },
  { name: "maple", count: 5 },
  { name: "oak", count: 2 }
];

const result = trees.find(tree => tree.name === "oak");

// { name: "oak", count, 2 }

Sử dụng cùng một ví dụ, hãy lưu ý nếu ta sử dụng find() khi một bài kiểm tra có nhiều kết quả, ta chỉ nhận được giá trị đầu tiên được tìm thấy:

const result = trees.find(tree => tree.count > 2);

// { name: "birch", count: 4 }

Đây là một trường hợp mà bạn có thể nên sử dụng filter() để thay thế. Thấy sự khác biệt?

Mẹo: Tách chức năng kiểm tra

Đôi khi bạn cần sử dụng lại cùng một hàm kiểm tra find() ở nhiều nơi. Trong trường hợp đó, có thể thực sự hữu ích khi tạo một chức năng kiểm tra riêng biệt.

Hãy demo kỹ thuật này, mở rộng trên các ví dụ trước của ta :

const deciduous = [
  { name: "birch", count: 4 },
  { name: "maple", count: 5 },
  { name: "oak", count: 2 }
];

const evergreens = [
  { name: "cedar", count: 2 },
  { name: "fir", count: 6 },
  { name: "pine", count: 3 }
];

// our testing function
const hasFiveOrMore = el => el.count >= 5;

const decResult = deciduous.find(hasFiveOrMore);
// { name: "maple", count: 5 }

const evgResult = evergreens.find(hasFiveOrMore);
// { name: "fir", count: 6 }

Đơn giản, nhưng mạnh mẽ! 💪

Sử dụng tham số index

Giống như filter() , có một tham số index tùy chọn mà ta có thể sử dụng. Đây là một ví dụ cuối cùng, sử dụng nó như một phần của chức năng thử nghiệm của ta :

const evergreens = [
  { name: "cedar", count: 2 },
  { name: "fir", count: 6 },
  { name: "pine", count: 3 }
];

// suppose we need to skip the first element
const result = evergreens.find((tree, i) => {
  if (tree.count > 1 && i !== 0) return true;
});

// { name: "fir", count: 6 }

index có thể không phải là thứ bạn cần thường xuyên - nhưng thật tuyệt khi bạn luôn có sẵn.

Kết luận

Array.find là một phương pháp đơn giản nhưng cực kỳ hữu ích để tìm kiếm các mảng JavaScript. Đó là một trong số các phương pháp hữu ích có sẵn trên Mảng, để có hướng dẫn đầy đủ hơn, hãy xem Cách sử dụng các phương thức Mảng trong JavaScript: Các phương pháp lặp lại .

Chỉ cần nhớ rằng: chỉ sử dụng find khi bạn muốn trả về một phần tử duy nhất và nó trả về undefined nếu không tìm thấy gì! Nếu không, hãy sử dụng phương pháp filter khi bạn cần trả về nhiều phần tử.

Tags:

Các tin liên quan