Hướng dẫn javascript indexof array

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ướng dẫn javascript indexof array

Hướng dẫn javascript indexof array

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.

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.

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.

Nội dung chính

  • 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
  • Return value
  • Description
  • Using indexOf()
  • Finding all the occurrences of an element
  • Finding if an element exists in the array or not and updating the array
  • Using indexOf() on sparse arrays
  • Specifications
  • Browser compatibility

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.

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.

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

Try it

Syntax

indexOf(searchElement)
indexOf(searchElement, fromIndex)

Parameters

searchElement

Element to locate in the array.

fromIndex Optional

The index to start the search at. If the index is greater than or equal to the array's length, -1 is returned, which means the array will not be searched. If the provided index value is a negative number, it is taken as the offset from the end of the array. Note: if the provided index is negative, the array is still searched from front to back. If the provided index is 0, then the whole array will be searched. Default: 0 (entire array is searched).

Return value

The first index of the element in the array; -1 if not found.

Description

indexOf() compares searchElement to elements of the Array using strict equality (the same method used by the === or triple-equals operator).

The indexOf() method skips empty slots in sparse arrays.

Examples

Using indexOf()

The following example uses indexOf() to locate values in an array.

const array = [2, 9, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

Finding all the occurrences of an element

const indices = [];
const array = ['a', 'b', 'a', 'c', 'a', 'd'];
const element = 'a';
let idx = array.indexOf(element);
while (idx !== -1) {
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}
console.log(indices);
// [0, 2, 4]

Finding if an element exists in the array or not and updating the array

function updateVegetablesCollection (veggies, veggie) {
  if (veggies.indexOf(veggie) === -1) {
    veggies.push(veggie);
    console.log(`New veggies collection is: ${veggies}`);
  } else {
    console.log(`${veggie} already exists in the veggies collection.`);
  }
}

const veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];

updateVegetablesCollection(veggies, 'spinach');
// New veggies collection is: potato,tomato,chillies,green-pepper,spinach
updateVegetablesCollection(veggies, 'spinach');
// spinach already exists in the veggies collection.

Using indexOf() on sparse arrays

You cannot use indexOf() to search for empty slots in sparse arrays.

console.log([1, , 3].indexOf(undefined)); // -1

Specifications

Specification
ECMAScript Language Specification
# sec-array.prototype.indexof

Browser compatibility

BCD tables only load in the browser

See also