Bốn phương pháp để tìm kiếm thông qua các mảng trong JavaScript

Trong JavaScript, có rất nhiều cách hữu ích để tìm các mục trong Mảng . Bạn luôn có thể sử for vòng lặp for cơ bản, nhưng với ES6 +, có rất nhiều phương pháp để lặp qua mảng và tìm thấy thứ bạn cần một cách dễ dàng.

Với rất nhiều phương pháp khác nhau, bạn sử dụng cái nào và trong trường hợp nào? Ví dụ, khi tìm kiếm trong một mảng, bạn có muốn biết phần tử đó có nằm trong mảng hay không? Bạn cần index của phần tử hay chính phần tử đó?

Với mỗi phương thức khác nhau mà ta sẽ đề cập, điều quan trọng là phải hiểu rằng chúng đều là các phương thức được tích hợp sẵn trên Array.prototype. Điều đó nghĩa là bạn chỉ cần chuỗi chúng vào bất kỳ mảng nào có ký hiệu dấu chấm. Điều đó cũng nghĩa là các phương thức này không khả dụng trên các đối tượng hoặc bất kỳ thứ gì khác ngoài Mảng (mặc dù có sự chồng chéo với Chuỗi).

Ta sẽ xem xét các phương thức Array sau:

Array.includes
Array.find
Array.indexOf
Array.filter

bao gồm

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.includes("thick scales"); // returns true

Phương thức .includes() trả về một giá trị boolean và hoàn hảo để cho bạn biết liệu một phần tử có tồn tại trong một mảng hay không. Nó đưa ra một câu trả lời đơn giản true hoặc false . Đây là cú pháp cơ bản:

arr.includes(valueToFind, [fromIndex]);

Bây giờ như bạn thấy trong ví dụ của ta , ta chỉ có một tham số - valueToFind. Đây là giá trị cần khớp trong mảng. FromIndex tùy chọn là một số, cho biết bạn muốn bắt đầu tìm index nào (mặc định là 0, vì vậy toàn bộ mảng được tìm kiếm). Vì vậy, vì trong ví dụ của ta , mục 'vảy dày' ở chỉ số 0, giá trị sau sẽ là sai: alligator.includes('thick scales', 1); vì nó bắt đầu tìm kiếm từ index 1 trở đi.

Bây giờ, có một số điều quan trọng cần lưu ý. Phương thức .includes() này sử dụng so sánh chặt chẽ. Điều đó nghĩa là , từ ví dụ trên, giá trị sau sẽ trả về false: alligator.includes('80'); Đó là bởi vì mặc dù 80 == '80' là đúng, 80 === '80' là sai - các kiểu khác nhau sẽ không vượt qua so sánh chặt chẽ.

tìm thấy

.find() khác với phương thức .find() như thế nào? Nếu trong ví dụ của ta , ta chỉ thay đổi văn bản "bao gồm" thành "tìm thấy", ta sẽ gặp lỗi này:

Uncaught TypeError: thick scales is not a function

Đó là bởi vì phương thức find yêu cầu một hàm phải được truyền vào. Đó là bởi vì phương thức find sẽ không chỉ sử dụng toán tử so sánh đơn giản như “include ()”. Thay vào đó, nó sẽ chuyển từng phần tử vào hàm của bạn và xem liệu nó trả về true hay false. Vì vậy, mặc dù điều này hoạt động: alligator.find(() => 'thick scales'); , bạn có thể cần đặt toán tử so sánh của bạn trong hàm để nó trả về bất kỳ thứ gì có liên quan.

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.find(el => el.length < 12); // returns '4 foot tail'

Hàm đơn giản này trong phương thức tìm kiếm của ta xem xét từng phần tử của mảng, với alias là 'el' mà ta đã gán cho nó và dừng lại khi nó tìm thấy phần tử đầu tiên đúng. Trong trường hợp của ta , true có thuộc tính độ dài nhỏ hơn 12 (các số không có thuộc tính độ dài). Tất nhiên, bạn có thể làm cho chức năng này phức tạp khi cần thiết, làm cho tình trạng thực sự của bạn đáp ứng nhu cầu của bạn.

Cũng lưu ý, điều này không trở lại true . Phương thức find không trả về boolean mà thay vào đó trả về phần tử phù hợp đầu tiên. Nếu không có phần tử phù hợp - như trong không có gì tồn tại đáp ứng các tiêu chí được xác định trong hàm của bạn - nó sẽ trả về undefined . Cũng lưu ý nó trả về phần tử đầu tiên, vì vậy nếu có nhiều hơn một phần tử trong mảng đáp ứng tiêu chí, nó sẽ chỉ lấy phần tử đầu tiên. Trong ví dụ của ta , nếu có một chuỗi khác có độ dài nhỏ hơn 12 sau 'cao 4 feet' thì nó sẽ không thay đổi kết quả của ta .

Trong ví dụ của ta , ta chỉ sử dụng lệnh gọi lại với một tham số. Bạn cũng có thể thêm các tham số để tham chiếu index của phần tử hiện tại. Một tham số khác có thể là toàn bộ mảng, nhưng tôi thấy điều này hiếm khi được sử dụng. Đây là một ví dụ sử dụng index :

alligator.find((el, idx) => typeof el === "string" && idx === 2); // returns '4 foot tall'

Ta biết trong mảng của ta , có 3 phần tử khác nhau đáp ứng điều kiện đầu tiên (typeof el === 'string'). Nếu đây là tình trạng duy nhất của ta , nó sẽ trả về tình trạng đầu tiên, 'vảy dày'. Nhưng sự khác biệt là, chỉ có một người có chỉ số là 2 và đó là 'cao 4 feet'.

Nói về index , một phương thức mảng tương tự là .findIndex() . Phương thức này cũng nhận một hàm, nhưng như bạn có thể đoán, nó trả về chỉ số của phần tử phù hợp thay vì chính phần tử đó.

Chỉ số

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.indexOf("rounded snout"); // returns 3

Giống như .includes() phương pháp, .indexOf() sử dụng so sánh nghiêm ngặt, không phải là một chức năng như ta đã thấy với .find() phương pháp. Tuy nhiên, không giống như include includes() , nó trả về index của phần tử, chứ không phải là boolean. Bạn cũng có thể cho biết index nào trong mảng để bắt đầu tìm kiếm.

Tôi thấy indexOf() rất hữu ích. Nó nhanh chóng và dễ dàng, có thể cho bạn biết vị trí của phần tử trong mảng và có thể cho bạn biết liệu phần tử có tồn tại hay không. Làm thế nào nó cho bạn biết nếu phần tử tồn tại? Về cơ bản, ta có thể biết phần tử tồn tại nếu nó trả về một số dương và nếu nó trả về -1, ta biết phần tử không tồn tại.

alligator.indexOf("soft and fluffy"); // returns -1
alligator.indexOf(80); // returns 1
alligator.indexOf(80, 2); // returns -1

Và như bạn thấy , mặc dù ta có thể lấy các phương thức find() hoặc findIndex() để cung cấp cho ta cùng một thông tin, nhưng điều này là rất ít để viết. Ta không cần phải viết ra một hàm để so sánh, vì nó đã nằm trong phương thức indexOf .

Bây giờ, giống như những cái khác, indexOf() cũng trả về index của phần tử phù hợp đầu tiên mà nó tìm thấy. JavaScript cung cấp cho ta một phương thức mảng thay thế .lastIndexOf() . Như bạn có thể đoán, điều này thực hiện tương tự như indexOf() nhưng bắt đầu từ index cuối cùng của mảng và hoạt động ngược lại. Bạn cũng có thể chỉ định một tham số thứ hai, nhưng hãy nhớ các index không thay đổi, chỉ vì bạn đang sử dụng một phương thức khác.

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

alligator.indexOf(80); // returns 1
alligator.lastIndexOf(80); // returns 4
alligator.indexOf(80, 2); // returns 4
alligator.lastIndexOf(80, 4); // returns 4
alligator.lastIndexOf(80, 3); // returns 1

Phần thưởng: bộ lọc

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

alligator.filter(el => el === 80); //returns [80, 80]

Phương thức filter() giống như phương thức find() , ở chỗ nó yêu cầu một hàm được truyền và một điều kiện cho những gì sẽ được trả về. Sự khác biệt chính là, filter() luôn trả về một mảng, ngay cả khi chỉ có một phần tử phù hợp. Nhưng nó sẽ trả về tất cả các phần tử phù hợp, trong khi find() chỉ trả về kết quả phù hợp đầu tiên.

Điều quan trọng với bộ lọc là nó trả về tất cả các phần tử phù hợp với tiêu chí của bạn. Nó chỉ có thể là tôi, nhưng tôi có thể bị lẫn lộn, suy nghĩ “đây là những yếu tố Tôi muốn lọc out ”, khi trung thực, bạn cho biết các yếu tố mà bạn muốn lọc in .

Kết luận

Phương pháp dễ nhất mà tôi thấy để sử dụng, khi tìm kiếm thứ gì đó là phương thức find() , nhưng như bạn thấy , nó thực dependencies vào trường hợp của bạn.

Bạn chỉ cần biết nếu nó tồn tại? Sử dụng .includes() .
Bạn có cần lấy chính phần tử đó không? Sử dụng .find() hoặc .filter() cho nhiều mục.
Bạn có cần tìm chỉ số của phần tử không? Sử dụng .indexOf() hoặc findIndex() để tìm kiếm phức tạp hơn.

Các mảng trong các ví dụ ở đây rất đơn giản. Bạn có thể thấy mình với một loạt các đối tượng. Dưới đây là một số ví dụ rất cơ bản dưới đây để chuyển trong khu rừng của các đối tượng lồng nhau:

const jungle = [
  { name: "frog", threat: 0 },
  { name: "monkey", threat: 5 },
  { name: "gorilla", threat: 8 },
  { name: "lion", threat: 10 }
];

// break the object down in order to use .includes() or .indexOf()
const names = jungle.map(el => el.name); // returns ['frog', 'monkey', 'gorilla', 'lion']
console.log(names.includes("gorilla")); // returns true
console.log(names.indexOf("lion")); // returns 3 - which corresponds correctly assuming no sorting was done

// methods we can do on the array of objects
console.log(jungle.find(el => el.threat == 5)); // returns object - {name: "monkey", threat: 5}
console.log(jungle.filter(el => el.threat > 5)); // returns array - [{name: "gorilla", threat: 8}, {name: 'lion', threat: 10}]

Tags:

Các tin liên quan