Tìm kiếm theo điều kiện trong mảng JavaScript (findIndex, find, some, every) | Laptrinhcanban.com

HOME › >>

Tìm kiếm theo điều kiện trong mảng JavaScript (findIndex, find, some, every)

Hướng dẫn cách tìm kiếm trong mảng JavaScript. Bạn sẽ học được sử dụng các phương thức findIndex(), find(), some() và every() để tìm phần tử theo điều kiện trong mảng JavaScript sau bài học này.

Chúng ta có 4 phương pháp tìm kiếm trong mảng JavaScript theo điều kiện như sau:

  • Phương thức findIndex(): Tìm index của phần tử thỏa mãn điều kiện chỉ định trong mảng JavaScript
  • Phương thức find(): Tìm giá trị của phần tử thỏa mãn điều kiện chỉ định trong mảng JavaScript
  • Phương thức some(): Kiểm tra có ít nhất 1 phần tử trong mảng thỏa mãn điều kiện hay không?
  • Phương thức every(): Kiểm tra tất cả phần tử trong mảng có thỏa mãn điều kiện hay không?

Tìm index của phần tử thỏa mãn điều kiện trong mảng JavaScript

Phương thức findIndex trong JavaScript

Phương thức findIndex là phương thức thành viên trong Array Object, có tác dụng tìm kiếm và trả về index của phần tử đầu tiên thỏa mãn điều kiện chỉ định trong một mảng JavaScript.

Phương thức findIndex hoạt động theo cơ chế:

  1. Lấy từng phần tử trong mảng theo thứ tự từ đầu mảng
  2. Chuyển chúng đến đối số của phương thức là một hàm callback chứa các biểu thức điều kiện dùng để kiểm tra
  3. Sau đó kiểm tra phần tử đó có thỏa mãn các điều kiện không, và trả về index của phần tử đầu tiên thỏa mãn điều kiện được tìm thấy.

Chúng ta sử dụng findIndex để tìm index của phần tử theo điều kiện trong mảng JavaScript với 3 kiểu cú pháp sau đây:

arr.findIndex(callbackFn(value));
arr.findIndex(callbackFn(value, index));
arr.findIndex(callbackFn(value, index, array));

Trong đó:

  • arr là mảng ban đầu
  • callbackFN là hàm callback chứa các biểu thức điều kiện. Hàm callback sẽ nhận từng phần tử từ mảng arr để kiểm tra
  • value là tên một biến dùng để gán giá trị của phần tử đang được lấy từ mảng để truyền vào callbackFN
  • index là tên một biến dùng để gán index của phần tử đang được lấy từ mảng để truyền vào callbackFN
  • array là tên một biến dùng để gán cả mảng ban đầu để truyền vào callbackFN

Phương thức findIndex() sẽ nhận từng phần tử từ mảng, truyền vào callback function, kiểm tra điều kiện trong đó. Và nếu hàm callback trả về giá trị true (khi điều kiện đúng), phương thức findIndex() sẽ trả về index của phần tử được kiểm tra.

Tìm index của phần tử thỏa mãn điều kiện bằng findIndex

Chúng ta tìm index của phần tử thỏa mãn điều kiện trong mảng JavaScript bằng findIndex như ví dụ sau đây:

let num = [75, 68, 92, 84, 90];

let result = num.findIndex(function(element){
return element > 85;
});

console.log(result);
// 2

Trong ví dụ này, chúng ta sử dụng biến element để nhận lần lượt các phần tử từ trong mảng ban đầu, và kiểm tra phần tử đó có thỏa mãn điều kiện element > 85 hay không.

Các phần tử result[0] rồi result[1] sẽ được kiểm tra, tuy nhiên đều không thỏa mãn điều kiện chỉ định. Chỉ cho tới khi phần tử result[2] với giá trị là 92 mới thỏa mãn điều kiện element > 85, do đó phương thức findIndex() dừng lại tại đây và trả về kết quả là index = 2 như trên.

Sử dụng phương thức findIndex nâng cao

Ngoài việc truyền giá trị của phần tử vào hàm như trên, chúng ta cũng có thể truyền cả index của phần tử đó vào hàm callback để kiểm tra, giống như ví dụ sau:

let num = [75, 68, 92, 84, 90];

let result = num.findIndex(function(element, index){
return (element > 85 && index > 2);
});

console.log(result);
// 4

Trong ví dụ này, chúng ta sử dụng cặp biến là elementindex gán giá trị và index của phần tử đang xét vào hàm callback.

Và do điều kiện trong hàm callback là giá trị element phải lớn hơn 85, và index phải lớn hơn 2, nên kết quả là result[4] thỏa mãn điều kiện, và kết quả index = 4 được trả về.

Ngoài cách này, chúng ta cũng có thể truyền thêm toàn bộ cả mảng vào trong hàm callback để xét điều kiện nếu muốn.

Lại nữa, chúng ta cũng có thể sử dụng arrow function để rút gọn hàm callback, như cách viết sau đây:

let result = [75, 68, 92, 84, 90];

let passIndex = result.findIndex(element => element > 85);
console.log(passIndex);
// 2

Tìm giá trị của phần tử thỏa mãn điều kiện trong mảng JavaScript

Phương thức find trong JavaScript

Phương thức find là phương thức thành viên trong Array Object, có tác dụng tìm kiếm và trả về giá trị của phần tử đầu tiên thỏa mãn điều kiện chỉ định trong một mảng JavaScript.

Phương thức này khá giống với phương thức findIndex mà Kiyoshi đã giới thiệu ở trên, tuy nhiên thay vì trả về index thì find() sẽ trả về giá trị của phần tử thỏa mãn điều kiện đầu tiên được tìm thấy.

Và tương tự thì phương thức find hoạt động theo cơ chế:

  1. Lấy từng phần tử trong mảng theo thứ tự từ đầu mảng
  2. Chuyển chúng đến đối số của phương thức là một hàm callback chứa các biểu thức điều kiện dùng để kiểm tra
  3. Sau đó kiểm tra phần tử đó có thỏa mãn các điều kiện không, và trả về giá trị của phần tử đầu tiên thỏa mãn điều kiện được tìm thấy.

Chúng ta sử dụng find để tìm giá trị của phần tử theo điều kiện trong mảng JavaScript với 3 kiểu cú pháp sau đây:

arr.find(callbackFn(value));
arr.find(callbackFn(value, index));
arr.find(callbackFn(value, index, array));

Trong đó:

  • arr là mảng ban đầu
  • callbackFN là hàm callback chứa các biểu thức điều kiện. Hàm callback sẽ nhận từng phần tử từ mảng arr để kiểm tra
  • value là tên một biến dùng để gán giá trị của phần tử đang được lấy từ mảng để truyền vào callbackFN
  • index là tên một biến dùng để gán giá trị của phần tử đang được lấy từ mảng để truyền vào callbackFN
  • array là tên một biến dùng để gán cả mảng ban đầu để truyền vào callbackFN

Phương thức find() sẽ nhận từng phần tử từ mảng, truyền vào callback function, kiểm tra điều kiện trong đó. Và nếu hàm callback trả về giá trị true (khi điều kiện đúng), phương thức find() sẽ trả về giá trị của phần tử được kiểm tra.

Tìm giá trị của phần tử thỏa mãn điều kiện bằng find

Chúng ta tìm giá trị của phần tử thỏa mãn điều kiện trong mảng JavaScript bằng find như ví dụ sau đây:

let num = [75, 68, 92, 84, 90];

let result = num.find(function(element){
return element > 85;
});

console.log(result);
// 92

Trong ví dụ này, chúng ta sử dụng biến element để nhận lần lượt các phần tử từ trong mảng ban đầu, và kiểm tra phần tử đó có thỏa mãn điều kiện element > 85 hay không.

Các phần tử result[0] rồi result[1] sẽ được kiểm tra, tuy nhiên đều không thỏa mãn điều kiện chỉ định. Chỉ cho tới khi phần tử result[2] với giá trị là 92 mới thỏa mãn điều kiện element > 85, do đó phương thức find() dừng lại tại đây và trả về kết quả là 92 như trên.

Sử dụng phương thức find nâng cao

Ngoài việc truyền giá trị của phần tử vào hàm như trên, chúng ta cũng có thể truyền cả giá trị của phần tử đó vào hàm callback để kiểm tra, giống như ví dụ sau:

let num = [75, 68, 92, 84, 90];

let result = num.find(function(element, index){
return (element > 85 && index > 2);
});

console.log(result);
// 90

Trong ví dụ này, chúng ta sử dụng cặp biến là elementindex gán giá trị và giá trị của phần tử đang xét vào hàm callback.

Và do điều kiện trong hàm callback là giá trị element phải lớn hơn 85, và index phải lớn hơn 2, nên kết quả là result[4] thỏa mãn điều kiện, và kết quả 90 được trả về.

Ngoài cách này, chúng ta cũng có thể truyền thêm toàn bộ cả mảng vào trong hàm callback để xét điều kiện nếu muốn.

Lại nữa, chúng ta cũng có thể sử dụng arrow function để rút gọn hàm callback, như cách viết sau đây:

let result = [75, 68, 92, 84, 90];

let passValue = result.find(element => element > 85);
console.log(passValue);
// 92

Có ít nhất 1 phần tử trong mảng thỏa mãn điều kiện hay không?

Phương thức some trong JavaScript

Phương thức some là phương thức thành viên trong Array Object, có tác dụng kiểm tra xem có ít nhất 1 phần tử trong mảng JavaScript thỏa mãn điều kiện được chỉ định hay không.

Phương thức some hoạt động theo cơ chế:

  1. Lấy từng phần tử trong mảng theo thứ tự từ đầu mảng
  2. Chuyển chúng đến đối số của phương thức là một hàm callback chứa các biểu thức điều kiện dùng để kiểm tra
  3. Sau đó kiểm tra phần tử đó có thỏa mãn các điều kiện không.

Chúng ta sử dụng some để kiểm tra xem có ít nhất 1 phần tử trong mảng thỏa mãn điều kiện hay không với 3 kiểu cú pháp sau đây:

arr.some(callbackFn(value));
arr.some(callbackFn(value, index));
arr.some(callbackFn(value, index, array));

Trong đó:

  • arr là mảng ban đầu
  • callbackFN là hàm callback chứa các biểu thức điều kiện. Hàm callback sẽ nhận từng phần tử từ mảng arr để kiểm tra
  • value là tên một biến dùng để gán giá trị của phần tử đang được lấy từ mảng để truyền vào callbackFN
  • index là tên một biến dùng để gán giá trị của phần tử đang được lấy từ mảng để truyền vào callbackFN
  • array là tên một biến dùng để gán cả mảng ban đầu để truyền vào callbackFN

Phương thức some() sẽ nhận từng phần tử từ mảng, truyền vào callback function, kiểm tra điều kiện trong đó. Nếu tìm thấy dù chỉ 1 phần tử thỏa mãn điều kiện chỉ định, phương thức sẽ được kết thúc và trả về true. Và nếu đã kiểm tra toàn bộ phần tử nhưng không tìm thấy phần tử nào thỏa mãn điều kiện, giá trị false sẽ được trả về.

Kiểm tra có ít nhất 1 phần tử trong mảng thỏa mãn điều kiện bằng some

Chúng ta kiểm tra xem có ít nhất 1 phần tử trong mảng thỏa mãn điều kiện hay không bằng phương thức some() như ví dụ sau đây:

let num = [75, 68, 92, 84, 90];

let result = num.some(function(element){
return element > 85;
});

console.log(result);
// true

Trong ví dụ này, chúng ta sử dụng biến element để nhận lần lượt các phần tử từ trong mảng ban đầu, và kiểm tra phần tử đó có thỏa mãn điều kiện element > 85 hay không.

Các phần tử result[0] rồi result[1] sẽ được kiểm tra, tuy nhiên đều không thỏa mãn điều kiện chỉ định. Chỉ cho tới khi phần tử result[2] với giá trị là 92 mới thỏa mãn điều kiện element > 85, do đó phương thức some() dừng lại tại đây và trả về kết quả là true như trên.

Sử dụng phương thức some nâng cao

Ngoài việc truyền giá trị của phần tử vào hàm như trên, chúng ta cũng có thể truyền cả giá trị của phần tử đó vào hàm callback để kiểm tra, giống như ví dụ sau:

let num = [75, 68, 92, 84, 90];

let result = num.some(function(element, index){
return (element > 85 && index > 2);
});

console.log(result);
// true

Trong ví dụ này, chúng ta sử dụng cặp biến là elementindex gán giá trị và giá trị của phần tử đang xét vào hàm callback.

Và do điều kiện trong hàm callback là giá trị element phải lớn hơn 85, và index phải lớn hơn 2, nên kết quả là result[4] thỏa mãn điều kiện, và kết quả true được trả về.

Ngoài cách này, chúng ta cũng có thể truyền thêm toàn bộ cả mảng vào trong hàm callback để xét điều kiện nếu muốn.

Lại nữa, chúng ta cũng có thể sử dụng arrow function để rút gọn hàm callback, như cách viết sau đây:

let result = [75, 68, 92, 84, 90];

let checkOver85 = result.some(element => element > 85);
console.log(checkOver85);
// true

Tất cả phần tử trong mảng có thỏa mãn điều kiện hay không?

Phương thức every trong JavaScript

Phương thức every là phương thức thành viên trong Array Object, có tác dụng kiểm tra xem có tất cả phần tử trong mảng JavaScript có thỏa mãn điều kiện được chỉ định hay không.

Phương thức every hoạt động theo cơ chế:

  1. Lấy từng phần tử trong mảng theo thứ tự từ đầu mảng
  2. Chuyển chúng đến đối số của phương thức là một hàm callback chứa các biểu thức điều kiện dùng để kiểm tra
  3. Sau đó kiểm tra phần tử đó có có thỏa mãn các điều kiện không.

Chúng ta sử dụng every để kiểm tra xem tất cả phần tử trong mảng có thỏa mãn điều kiện hay không với 3 kiểu cú pháp sau đây:

arr.every(callbackFn(value));
arr.every(callbackFn(value, index));
arr.every(callbackFn(value, index, array));

Trong đó:

  • arr là mảng ban đầu
  • callbackFN là hàm callback chứa các biểu thức điều kiện. Hàm callback sẽ nhận từng phần tử từ mảng arr để kiểm tra
  • value là tên một biến dùng để gán giá trị của phần tử đang được lấy từ mảng để truyền vào callbackFN
  • index là tên một biến dùng để gán giá trị của phần tử đang được lấy từ mảng để truyền vào callbackFN
  • array là tên một biến dùng để gán cả mảng ban đầu để truyền vào callbackFN

Phương thức every() sẽ nhận từng phần tử từ mảng, truyền vào callback function, kiểm tra điều kiện trong đó. Nếu tất cả phần tử đều thỏa mãn điều kiện thì true được trả về.

Kiểm tra tất cả phần tử trong mảng có thỏa mãn điều kiện bằng every

Chúng ta kiểm tra xem tất cả phần tử trong mảng có thỏa mãn điều kiện hay không bằng phương thức every() như ví dụ sau đây:

let num = [75, 68, 92, 84, 90];

let result = num.every(function(element){
return element > 85;
});

console.log(result);
// false

Trong ví dụ này, chúng ta sử dụng biến element để nhận lần lượt các phần tử từ trong mảng ban đầu, và kiểm tra phần tử đó có có thỏa mãn điều kiện element > 85 hay không. Do trong mảng tồn tại phần tử không thỏa mãn điều kiện, nên phương thức đã trả về kết quả là false như trên.

Sử dụng phương thức every nâng cao

Ngoài việc truyền giá trị của phần tử vào hàm như trên, chúng ta cũng có thể truyền cả giá trị của phần tử đó vào hàm callback để kiểm tra, giống như ví dụ sau:

let num = [75, 68, 92, 84, 90];

let result = num.every(function(element, index){
return (element > 10 && index > -1);
});

console.log(result);
// true

Trong ví dụ này, chúng ta sử dụng cặp biến là elementindex gán giá trị và giá trị của phần tử đang xét vào hàm callback.

Và do điều kiện trong hàm callback là giá trị element phải lớn hơn 10, và index phải lớn hơn -1, nên tất cả các phần tử trong mảng đều thỏa mãn điều kiện, do đó phương thức every() đã trả về kết quả true như trên.

Ngoài cách này, chúng ta cũng có thể truyền thêm toàn bộ cả mảng vào trong hàm callback để xét điều kiện nếu muốn.

Lại nữa, chúng ta cũng có thể sử dụng arrow function để rút gọn hàm callback, như cách viết sau đây:

let result = [75, 68, 92, 84, 90];

let checkOver85 = result.every(element => element > 60);
console.log(checkOver85);
// true

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách tìm kiếm trong mảng JavaScript theo điều kiện bằng cách sử dụng findIndex, find, some và every rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/tim-kiem-trong-mang-javascript/

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME  › >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.