Có bao nhiêu cách tìm một phần tử trong một mảng, Cảm ơn anh đã đến phỏng vấn và xin chào!

#javascript #es6 #object #web_development

Nội dung bài viết

Video học lập trình mỗi ngày

Đôi khi chúng ta muốn sử dụng một điều kiện nào đó để tìm xem có phần tử nào trong mảng thỏa mãn điều kiện thay đổi hay không, rồi trả về phần tử hoặc giá trị chỉ số của phần tử. Javascript cung cấp cho chúng ta nhiều phương thức khác nhau, chủ yếu được chia thành tìm kiếm theo giá trị và tìm kiếm theo điều kiện nhất định. Bài viết này giới thiệu các phương pháp này.


1. Array.prototype.includes()

Phương thức includes() được sử dụng để xác định xem một mảng(array) có chứa một giá trị được chỉ định hay có tồn tại hay không, nếu nó chứa thì trả về true, ngược lại thì trả về false. 

## Cú pháp

arr.includes(valueToFind[, fromIndex])

Phương thức này hỗ trợ hai tham số valueToFind, fromIndex(Optional) 

## Các tham số 

  • Tham số đầu tiên valueToFind phải là giá trị của phần tử cần tìm kiếm. 
  • Tham số thứ hai fromIndex là chỉ mục cần tìm.

Lưu ý: Khi kiểm tra chuỗi hoặc kí tự, includes() sẽ phân biệt hoa thường. Khi fromIndex mang giá trị âm (sử dụng giá trị tuyệt đối của fromIndex làm số lượng kí tự tính từ cuối mảng làm vị trí bắt đầu). Giá trị mặc định là 0. 

Ví dụ:

var a = [1,2,3,4,5,6]

a.includes(2)  // true
a.includes(2,3)  // false
a.includes(5,-2)  // true
a.includes(5,-1)  // false

2. Array.prototype.indexOf()

Phương thức indexOf() sẽ trả về giá trị index đầu tiên của mảng, nơi mà nó đc tìm thấy trong mảng, hoặc trả về -1 nếu không tồn tại trong mảng. 

## Cú pháp

arr.indexOf(searchElement[, fromIndex])

## Các tham số 

  • searchElement: Phần tử cần tìm trong mảng. 
  • fromIndex (Optional): Vị trí index nơi bắt đầu tìm kiếm. Nếu index lớn hơn hoặc bằng số phần tử trong mảng, -1 sẽ được trả về, việc tìm kiếm sẽ không xảy ra. Nếu giá trị fromIndex là một số âm, vị trí index được tính từ cuối mảng.

 Lưu ý: cho dù fromIndex là số âm, kết quả tìm kiếm vẫn tính từ đầu mảng trở về sau. Nếu index bằng 0, cả mảng sẽ được tìm kiếm. Mặc định: 0 (cả mảng sẽ được tìm kiếm) 

Ví dụ:

var array = [2, 5, 9];

array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

3. Array.prototype.lastIndexOf ()

Phương thức lastIndexOf() trả về chỉ mục cuối cùng của phần tử được chỉ định trong mảng hoặc -1 nếu nó không tồn tại. Mảng được tìm kiếm ngược lại, bắt đầu từ fromIndex. 

## Cú pháp

arr.lastIndexOf(searchElement[, fromIndex])

## Tham số 

  • searchElement: Phần tử cần tìm trong mảng. 
  • fromIndex (Optional): Chỉ mục để bắt đầu tìm kiếm ngược lại. Mặc định độ dài của mảng trừ đi một (arr.length - 1) , tức là toàn bộ mảng sẽ được tìm kiếm. Nếu chỉ số lớn hơn hoặc bằng độ dài của mảng, toàn bộ mảng sẽ được tìm kiếm. Nếu âm, nó được lấy làm phần bù từ cuối mảng.

Lưu ý rằng ngay cả khi chỉ số âm, mảng vẫn được tìm kiếm từ sau ra trước. Nếu chỉ số được tính toán nhỏ hơn 0, -1 được trả về, tức là mảng sẽ không được tìm kiếm 

Ví dụ:

var array = [2, 5, 9, 2];

array.lastIndexOf(2);      // 3
array.lastIndexOf(7);      // -1
array.lastIndexOf(2, 3);   // 3
array.lastIndexOf(2, 2);   // 0
array.lastIndexOf(2, -2);  // 0
array.lastIndexOf(2, -1);  // 3

Tips: Sử dụng indexOf() và lastIndexOf() khác nhau như thế nào trong thực tế.

4. Array.prototype.some ()

Phương thức some() kiểm tra xem có ít nhất một phần tử của mảng thoả điều kiện ở hàm được truyền vào hay không. Kết quả trả về có kiểu Boolean. 

## Cú pháp

arr.some(callback(element[, index[, array]])[, thisArg])

## Các tham số 

  • callback: Hàm dùng để kiểm tra từng phần tử, nhận vào ba đối số: 
  • element: Phần tử đang được kiểm tra. 
  • index Optional: Chỉ mục của phần tử đang được kiểm tra. arrayOptional: Là bản thân mảng đã gọi phương thức some() ở trên. 
  • thisArgOptional: Được sử dụng làm giá trị this khi thực thi hàm callback.


Ví dụ sau kiểm tra xem có phần tử lớn hơn 10 trong mảng hay không.

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

Bạn cũng có thể sử dụng các arrow function để đạt được hiệu quả tương tự.

[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

5. Array.prototype.every ()

Phương thức every() sẽ kiểm tra xem mọi phần tử bên trong một array được truyền vào có vượt qua được bài kiểm tra khi thực hiện với function được cung cấp không. every() sẽ return về một kết quả Boolean. Có thể bạn nào tinh ý sẽ chú ý, nó hơi giống với phương thức some().Ồ không nó khác đấy. Bởi vậy cho nên chúng tôi đã cố gắng viết một bài riêng cho hai thằng này, các bạn nhớ ghé qua đó để xem tránh những sai lầm không đáng có. 

## Cú pháp

arr.every(callback(element[, index[, array]])[, thisArg])

## Các tham số

  • callback: Một function với chức năng là kiểm tra từng phần tử trong mảng được cung cấp cho every(), nhận vào 3 đối số: 
  • element: Là phần tử hiện tại của mảng đang được function xử lý. 
  • index Optional: Index của phần tử trên. 
  • array Optional: Mảng mà every() gọi. 
  • thisArg Optional: A value to use as this when executing callback.

Kiểm tra xem tất cả các phần tử trong mảng có lớn hơn 10 hay không.

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

6. Array.prototype.filter ()

Phương thức filter() dùng để tạo một mảng mới với tất cả các phần tử thỏa điều kiện của một hàm test. 

## Cú pháp

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

## Tham số 

  • callback: Đây là hàm thử, dùng để kiểm tra từng phần tử của mảng. Trả về true để giữ lại phần tử, hoặc false để loại nó ra. Nó được gọi với ba tham số: 
  • element: Phần tử đang được xử lý trong mảng. 
  • indexOptional: Chỉ mục (index) của phần tử đang được xử lý. 
  • arrayOptional: Mảng nguồn mà hàm filter đang xử lý. 
  • thisArg Optional: Không bắt buộc. Giá trị của this bên trong hàm callback.


Các tham số của phương thức này giống như some (), every (), callback là một hàm dùng để kiểm tra từng phần tử của mảng. Trả về true nghĩa là phần tử vượt qua bài kiểm tra và tìm kiếm được phần tử đó, false nghĩa là phần tử đó không tìm thấy. 


Ví dụ sau sử dụng bộ lọc để tạo một mảng mới có các phần tử được cấu tạo bởi các phần tử có giá trị lớn hơn 10 trong mảng ban đầu.

function isBigEnough(element) {
  return element >= 10;
}

var filtered = [12, 5, 8, 130, 35].filter(isBigEnough);
// filtered is [12, 130, 35]

7. Array.prototype.find ()

Phương thức find()  sẽ trả về giá trị đầu tiên tìm thấy ở trong mảng được cung cấp. Hoặc có thể trả về undefined . 

## Cú Pháp

arr.find(callback(element[, index[, array]])[, thisArg])

## Parameters ( thông số đầu vào ) 

  • callback: Hàm thực thi với mỗi giá trị trong mảng, chuyền vào 3 giá trị : 
  • element: Phần tử hiện tại đang được xử lý trong mảng. 
  • index Optional: Thứ tự của phần tử hiện tại đang được xử lý trong mảng.. 
  • array Optional: Mảng được gọi. 
  • thisArg Optional: Đối tượng tùy chọn để sử dụng như thế này khi thực hiện callback.


Ví dụ: Sử dụng thuộc tính đối tượng để tìm các đối tượng trong mảng.

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'orange', quantity: 5}
];

function findOranges(fruit) { 
    return fruit.name === 'orange';
}

console.log(inventory.find(findOrange));
// { name: 'orange', quantity: 5 }

8. Array.prototype.findIndex ()

Phương thức findIndex() trả về chỉ số (index) của phần tử đầu tiên trong mảng thỏa mãn hàm truyền vào. Nếu không phần tử nào thỏa mãn, phương thức trả lại -1. ## Cú pháp

arr.findIndex(callback[, thisArg])

## Tham số 

  • callback: Hàm kiểm tra, được thực thi cho mỗi phần tử của mảng, có thể chứa 3 tham số: 
  • element: Phần tử đang xét. index: Chỉ số của phần tử đang xét. 
  • array: Mảng được gọi. 
  • thisArg: Optional. Object to use as this when executing callback.


Ví dụ: Tìm chỉ số của đối tượng có tên màu cam trong mảng.

var inventory = [
    {name: 'apple', quantity: 2},
    {name: 'banana', quantity: 0},
    {name: 'orange', quantity: 5}
];

function findOrange(fruit) { 
    return fruit.name === 'orange';
}

console.log(inventory.findIndex(findOrange));
// { name: 'orange', quantity: 5 }

Tuyệt chiêu nhớ dai

Để tiện cho việc tìm kiếm và ghi nhớ, Chúng tôi tham khảo trên internet và đã tóm tắt các phương pháp này thành một bảng dưới đây.

Find index in array js

Ref: https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects

Có thể bạn đã bị missing

DMCA.com Protection Status

© 2024 Anonystick | Made by Anonystick