ARRAY FUNCTION
NUMBER FUNCTION
STRING FUNCTION
DATE / TIME FUNCTION
MATH FUNCTION
GLOBAL FUNCTION
BOOLEAN FUNCTION
DOM FUNCTION
appendChild Javascript parentElement Javascript parentNode Javascript insertAfter Javascript insertBefore javascript innerHTML Javascript insertAdjacentHTML javascript nextSibling javascript activeElement Javascript adoptNode Javascript anchors Javascript baseURI Javascript Document.body Javascript characterSet Javascript createAttribute Javascript Hàm document.createComment() trong Javascript Hàm document.createDocumentFragment() trong Javascript Hàm document.createElement() trong Javascript Hàm document.createTextNode() trong Javascript Hàm document.doctype trong Javascript Hàm document.documentElement trong Javascript Hàm document.documentMode trong Javascript Hàm document.documentURI trong Javascript Hàm document.domain trong Javascript Hàm document.embeds trong Javascript Hàm document.forms trong Javascript Hàm document.hasFocus() trong Javascript Hàm document.head trong Javascript Hàm document.images trong Javascript Hàm document.implementation trong Javascript Hàm document.importNode() trong Javascript Hàm document.inputEncoding trong Javascript Hàm document.lastModified trong Javascript Hàm document.links trong Javascript Hàm document.normalize() trong Javascript Hàm document.scripts trong Javascript Hàm document.querySelector() trong Javascript Hàm document.readyState trong Javascript Hàm document.removeEventListener() trong Javascript Hàm document.querySelectorAll() trong Javascript Hàm document.title trong Javascript Hàm document.URL trong Javascript Hàm document.write() trong Javascript Hàm document.writeln() trong Javascript Hàm document.getElementById() trong Javascript Hàm document.getElementsByClassName() trong Javascript Hàm document.getElementsByName() trong Javascript Hàm document.getElementsByTagName() trong Javascript
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Hàm array.indexOf() trong javascript

Trong bài này chúng ta sẽ tìm hiểu hàm Array indexOf trong javascript, đây là hàm dùng để tìm kiếm phần tử trong mảng javascript.

Hàm indexOf sẽ tìm kiếm một phần tử trong mảng dựa vào giá trị của phần tử, hàm sẽ trả về vị trị( khóa) của phần tử nếu tìm thấy và trả về -1 nếu không tìm thấy.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Array indexOf javascript là gì?

Array indexOf trong javascript là một phương thức của đối tượng mảng, nó dùng để tìm kiếm một phần tử trong mảng dựa vào giá trị truyền vào tham số của hàm.

  • Việc tìm kiếm sẽ bắt đầu từ vị trí xác định, nếu không truyền vào thì mặc định sẽ tìm từ đầu.
  • Nếu có nhiều hơn một phần tử được tìm thấy, phần tử tìm thấy đầu tiên sẽ được trả về.
  • Vị trí các phần tử của mảng bắt đầu từ: 0, 1, 2 ..vv.
  • Nếu bạn muốn tìm từ cuối mảng, sử dụng hàm lastIndexOf.

Cú pháp của array indexOf như sau:

 array.indexOf(item, start)

Trong đó:

  • item là giá trị của phần tử cần tìm.
  • start là vị trí bắt đầu tìm kiếm.

Ví dụ: Cho mảng gồm 6 phần tử như sau.

var scores = [10, 20, 30, 10, 40, 20];

Mình sẽ thực hiện thao tác tìm kiếm trên mảng này như sau:

console.log(scores.indexOf(10)); // 0
console.log(scores.indexOf(30)); // 2
console.log(scores.indexOf(50)); // -1
console.log(scores.indexOf(20)); // 1

Trong dòng code thứ 3 trả về -1 tại vì giá trị 50 không tìm thấy trong mảng.

Mặc định thì hàm này sẽ sử dụng thuật toán tìm kiếm tuyến tính, tức là nó sẽ dò từ đầu mảng đến cuối mảng, phần tử nào bằng với giá trị truyền vào thì sẽ được trả về.

Nếu bạn muốn bắt đầu tìm từ một vị trí nào đó thì hãy sử dụng tham số start nhé.

Như ví dụ trên, mình chắc chắn 3 phần tử đầu là không có giá trị 40, vì vậy mình sẽ yêu cầu hàm indexOf tìm từ phần tử thứ 4 (tức là chỉ mục 3) trở đi.

console.log(scores.indexOf(40, 3)); // 4

2. Một ví dụ về hàm indexOf trong javascript

Ví dụ: Sử dụng hàm indexof để tìm kiếm vị trí xuất hiện của phần tử PHP.

Code RUN
demoP = document.getElementById("demo");

function myFunction(item, index) {
    var subject = ["html", "php", "php", "c#"];
    var a = subject.indexOf("php");
    document.getElementById("demo").innerHTML = a;
}

3. Sử dụng hàm array indexOf với mảng chứa các object

Nếu các phần tử trong mảng là các object thì lúc này bạn không thể sử dụng hàm indexOf được.

Ví dụ dưới đây mặc dù trong mảng guests và giá trị cần tìm truyền vào hàm có trùng nhau nhưng kết quả vẫn trả về -1. Lý do là javascript đã xem đây là hai đối tượng khác nhau.

var guests = [
    {name: 'John Doe', age: 30},
    {name: 'Lily Bush', age: 20},
    {name: 'William Gate', age: 25}
];

console.log(guests.indexOf({
    name: 'John Doe',
    age: 30
})); // -1

Như bạn thấy, phần tử đầu tiên và giá trị mình truyền vào hàm indexOf hoàn toàn giống nhau nhưng kết quả trả về vẫn là -1.

Để khắc phục vấn đề này thì ta sẽ kết hợp một vài hàm khác nữa như sau:

  • Sử dụng hàm map để duyệt qua từng phần tử của mảng, sau đó trả về một mảng mới và các phần tử là giá trị cần tìm.
  • Sử dụng hàm indexOf để tìm trên mảng mới đó.
var guests = [
    {name: 'John Doe', age: 30},
    {name: 'Lily Bush', age: 20},
    {name: 'William Gate', age: 25}
];

// Tìm theo key name
let flag = guests.map(function(e){
    return e.name;
}).indexOf("John Doe");

console.log(flag); // 0

// Tìm theo key age
let flag = guests.map(function(e){
    return e.age;
}).indexOf(30);

console.log(flag); // 0

Trên là cách dùng hàm array indexOf trong Javascript. Hàm này rất hữu ích trong trường hợp bạn muốn kiểm tra một giá trị nào đó có tồn tại trong mảng hay không.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top