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.

test php

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

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.

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:

Bài viết này được đăng tại [free tuts .net]

 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:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Hàm array.indexOf() trong javascript

1. Array indexOf javascript là gì?

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

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

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

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

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 insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Hàm array.indexOf() trong javascript

1. Array indexOf javascript là gì?

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

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

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

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

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 insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript