Findindex trong JavaScript

findIndex() method trong javascript là một hàm built-in của javascript, nó trả về vị trí đầu tiên của phần tử trong mảng mà thỏa mãn hàm test được cung cấp. Nó trả về giá trị -1 nếu không tìm thấy phần tử nào thỏa mãn. Hãy cung w3seo tìm hiểu về phương thức này.

Ví dụ:

let numbers = [1, 2, 3, 4, 5, 6];

let index = numbers.findIndex(n => n > 3);

console.log(index); // 3

Trong ví dụ trên, hàm findIndex() sẽ trả về vị trí đầu tiên của phần tử trong mảng numbers mà giá trị của nó lớn hơn 3, đó là vị trí thứ 3.

Lưu ý: findIndex() khác với Array.prototype.indexOf() trong việc findIndex() sử dụng callback function để kiểm tra điều kiện, còn indexOf() chỉ kiểm tra giá trị của phần tử

Tại sao nên sử dụng findIndex() ?

Có nhiều lý do bạn nên sử dụng findIndex() trong javascript:

1. Tìm vị trí của phần tử trong mảng: findIndex() cho phép bạn tìm vị trí của phần tử trong mảng mà thỏa mãn điều kiện được cung cấp, giúp cho việc xử lý và thao tác dữ liệu trở nên dễ dàng hơn.
2. Tiết kiệm thời gian và bộ nhớ: findIndex() chỉ duyệt qua mảng cho đến khi tìm thấy phần tử thỏa mãn điều kiện, giúp tiết kiệm thời gian và bộ nhớ so với việc duyệt qua toàn bộ mảng bằng vòng lặp for hoặc while.
3. Sử dụng với arrow function: findIndex() hỗ trợ sử dụng arrow function, giúp cho việc viết mã ngắn gọn hơn và dễ đọc hơn.
4. Sử dụng với các hàm và method khác: findIndex() có thể kết hợp với các hàm và method khác để thực hiện các tác vụ phức tạp hơn, ví dụ như tìm và xóa phần tử trong mảng.
5. Tìm kiếm nhanh hơn: findIndex() chỉ duyệt qua mảng cho đến khi tìm thấy phần tử thỏa mãn điều kiện, giúp tìm kiếm nhanh hơn so với việc duyệt qua mảng

Sử dụng findIndex() như thế nào ?

Sử dụng findIndex() trong javascript rất đơn giản, bạn chỉ cần gọi hàm findIndex() trên một mảng và truyền vào một hàm callback để kiểm tra điều kiện:

let numbers = [1, 2, 3, 4, 5, 6];

let index = numbers.findIndex(n => n > 3);

console.log(index); // 3

Trong ví dụ trên, hàm findIndex() sẽ trả về vị trí đầu tiên của phần tử trong mảng numbers mà giá trị của nó lớn hơn 3, đó là vị trí thứ 3.

Các bạn có thể sử dụng arrow function hoặc function declaration để tạo hàm test, ví dụ như sau:

let numbers = [1, 2, 3, 4, 5, 6];

let index = numbers.findIndex(function(n) {

  return n > 3;

});

console.log(index); // 3

Bạn cũng có thể sử dụng findIndex() với các tham số của hàm callback để lấy thông tin về phần tử, vị trí, mảng:

let numbers = [1, 2, 3, 4, 5, 6];

let index = numbers.findIndex(function(element, index, array) {

  return element > 3;

});

console.log(index); // 3

Có thể sử dụng findIndex() kết hợp với các hàm và method khác để thực hiện các tác vụ phức tạp hơn.

Những lưu ý khi sử dụng  findIndex() trong JavaScript ? 

Có một số lưu ý khi sử dụng hàm findIndex() trong JavaScript:

1. Hàm findIndex() chỉ trả về chỉ mục đầu tiên của phần tử thỏa mãn điều kiện được truyền vào. Nếu không tìm thấy phần tử nào thỏa mãn, hàm sẽ trả về -1.
2. Hàm này chỉ hoạt động với các mảng có giá trị, nó sẽ không hoạt động với các mảng rỗng.
3. Khi truyền vào hàm callback, bạn phải chắc chắn rằng hàm này trả về true hoặc false, nếu trả về giá trị khác sẽ gây lỗi.
4. Nếu bạn muốn tìm kiếm theo giá trị của phần tử mà không quan tâm đến chỉ mục của nó, bạn có thể sử dụng hàm find() thay vì findIndex().
5. Hàm findIndex() chỉ hoạt động với các phần tử trong mảng, nó sẽ không hoạt động với các thuộc tính được định nghĩa trong prototype của mảng.
6. Hàm findIndex() chạy từ trái sang phải (từ chỉ mục 0 đến cuối mảng) vì vậy nếu bạn muốn tìm kiếm từ cuối mảng đến đầu mảng, bạn có thể sử dụng hàm findIndex() và for loop.
7. Hàm findIndex() chỉ hoạt động trên mảng có giá trị, nó sẽ không hoạt động với các mảng rỗng hoặc không được xác định.

Ví dụ các trường hợp thường sử dụng findIndex() trong JavaScript ?

Một vài trường hợp thường sử dụng findIndex() trong JavaScript:

1. Tìm kiếm phần tử có giá trị đặc biệt trong mảng:

let fruits = ['apple', 'banana', 'mango', 'orange'];

let index = fruits.findIndex(fruit => fruit === 'mango');

console.log(index); // 2

2. Tìm kiếm phần tử đầu tiên có giá trị lớn hơn hoặc bằng 10 trong mảng số:

let numbers = [5, 8, 11, 13, 16, 21];

let index = numbers.findIndex(num => num >= 10);

console.log(index); // 2

3. Tìm kiếm phần tử đầu tiên có trường ‘isCompleted’ là true trong mảng đối tượng:

let tasks = [

    {name: 'Task 1', isCompleted: false},

    {name: 'Task 2', isCompleted: true},

    {name: 'Task 3', isCompleted: false},

    {name: 'Task 4', isCompleted: true}

];

let index = tasks.findIndex(task => task.isCompleted === true);

console.log(index); // 1

4. Tìm kiếm phần tử đầu tiên có độ dài lớn hơn hoặc bằng 5 trong mảng chuỗi:

let words = ['hello', 'world', 'javascript', 'programming'];

let index = words.findIndex(word => word.length >= 5);

console.log(index); // 0

Các ví dụ trên chỉ là ví dụ cơ bản, hàm findIndex() có thể sử dụng để tìm kiếm trong nhiều trường hợp khác nhau.

Kết luận 

Hàm findIndex() trong JavaScript là một công cụ hữu ích để tìm kiếm phần tử đầu tiên trong mảng thỏa mãn điều kiện được truyền vào. Nó trả về chỉ mục của phần tử đầu tiên thỏa mãn điều kiện hoặc -1 nếu không tìm thấy phần tử nào. Hàm này rất hữu ích khi bạn muốn tìm kiếm phần tử đầu tiên trong mảng và làm việc với nó.