Continuando con nuestra serie de artículos de iniciación a JavaScript hoy hablaremos del método indexOf() y cómo funciona. Cuando trabajamos manipulando un string es bastante frecuente que necesitemos conocer si un elemento determinado existe y en qué posición. Por supuesto podemos crear un método que recorra todos los elementos contenidos pero existe un método más eficiente y que nos ahorrará mucho tiempo.

Así empleando el método indexOf() éste nos ofrecerá el primer índice en el que se puede encontrar un elemento dado en el array, ó en su defecto retornará el valor -1 si el elemento no está presente.

Antes de ver algunos ejemplos cabe destacar que indexOf compara cada uno de los elementos usando lo que llamamos una igualdad estricta, es decir, el mismo método que cuando se usa ===, o también conocido como operador de igualdad-triple. ¿Esto qué quiere decir? Que para indexOf “Casa y casa” no son iguales.

Sintaxis

    
        cadena.indexOf(valorBusqueda[, indiceDesde])
    

• ValorBusqueda: Una cadena que representa el valor de búsqueda.
• IndiceDesde: Indica el índice por el que se comienza la búsqueda. Por defecto es 0 pero hay que tener en cuenta varias consideraciones. La primera que si el índice es igual o mayor a la longitud del array, devolverá -1, ya que no hay nada que recorrer y por tanto en dónde buscar. Por otro lado, si el valor del índice es negativo, entonces la búsqueda se realizará se interpretará restando posiciones desde el final.

Usando indexOf()

Dicho esto, explicado en qué consiste, ahora toca mostrar algunos ejemplos de uso de IndexOf(). Un primer acercamiento para familiarizarnos pasa por localizar ciertos valores dentro de un array dado. Por ejemplo:

    
        var cadena = "Blue Whale";

cadena.indexOf("Blue")    // retorna 0
cadena.indexOf("Blute")   // retorna -1
cadena.indexOf("Whale",0) // retorna 5
cadena.indexOf("Whale",5) // retorna 5
cadena.indexOf("",9)      // retorna 9
cadena.indexOf("",10)     // retorna 10
cadena.indexOf("",11)     // retorna 10

    

El método indexOf() también puede ser empleado para manejar Arrays, como se muestra a continuación:

    
        var cadena = [2, 9, 9];

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

    

Pero qué sucede si lo que buscamos son todas las coincidencias que encontramos dentro de una cadena de caracteres o como en este ejemplo en un array. Para encontrar todas las apariciones de un elemento dado lo que haremos será recorrer el array con un bucle while y almacenar las ocurrencias mediante un array que llamaremos indices:

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

array.indexOf(searchElement[, fromIndex])

    

Rizando un poco más el rizo podemos crear un método que en que si el elemento ya existe en la matriz no se actualizará la matriz:

    
        function updateVegetablesCollection (veggies, veggie) {
    if (veggies.indexOf(veggie) === -1) {
        veggies.push(veggie);
        console.log('La nueva colección de vegetales es: ' + veggies);
    } else if (veggies.indexOf(veggie) > -1) {
        console.log(veggie + ' ya existe en la colección de verduras.');
    }
}

var veggies = ['patata', 'tomate', 'chiles', 'pimientoverde'];

updateVegetablesCollection(veggies, 'espinaca'); 
// La nueva colección de verduras es : patata, tomate, chiles, pimientoverde, espinaca
updateVegetablesCollection(veggies, 'espinaca'); 
// La espinaca ya existe en la colección de verduras.

    

Como podemos ver indexOf resulta, para este caso, una herramienta de mucha utilidad y que ofrece posibilidades muy interesantes en el desarrollo de nuestros proyectos.

Diferencia entre IndexOf y Search

Es posible que a estas alturas del artículo que para qué usar IndexOf si existe el método Search(). Ambos métodos son diferentes y responden a cubrir diferentes escenarios. Por ejemplo si IndexOf() es un método rápido y especialmente indicado para trabajar con subcadenas simples, en cambio Search() permite hacer uso de expresiones regulares, por lo que permite mayor flexibilidad al hacer coincidir patrones más sofisticados, cadenas insensibles a mayúsculas y minúsculas, etc.

Pero quizá la mejor forma de entenderlo es poniendo ambos métodos a trabajar en un mismo ejemplo para poder conocer sus diferencias.

Ejemplo:

<html>
<head>
<title>JavaScipt Example</title>
</head>

<body>
<script>		
var str = "friends say Hello";

var substr = "Hello";		
var index = str.indexOf(substr);
if(index!=-1)
	document.write(substr + " found at " + index + " position.<br>");
else
	document.write(substr + " does not exist in the " + str + ".<br>");

var substr = "Hello";		
var index = str.search(substr);
if(index!=-1)
	document.write(substr + " found at " + index + " position.<br>");
else
	document.write(substr + " does not exist in the " + str + ".<br>");

substr = "Hi";
index = str.indexOf(substr);		
if(index!=-1)
	document.write(substr + " found at " + index + " position.<br>");
else
	document.write(substr + " does not exist in the " + str + ".<br>");

substr = "Hi";
index = str.search(substr);		
if(index!=-1)
	document.write(substr + " found at " + index + " position.<br>");
else
	document.write(substr + " does not exist in the " + str + ".<br>");
</script>
</body>
</html>

Resultado:

    
        Hello found at 12 position.
Hello found at 12 position.
Hi does not exist in the friends say Hello.
Hi does not exist in the friends say Hello.

    

Del siguiente ejemplo podemos ver claramente cómo funcionan ambos métodos. Mientras que el método IndexOf() dispone de un parámetro opcional que actúa de índice, el método Search() carece de éste y simplemente toma la subcadena y comienza a buscar desde la posición indice 0.

Y con esto llegamos al final del artículo de hoy. En él hemos hablado sobre el método IndexOf(), características y modo de empleo pero también hemos tenido oportunidad de tratar acerca del método Search() que puede ser usado como alternativa y visto sus diferencias con IndexOf().

La conveniencia de utilizar uno y otro método corresponde ahora a nosotros en nuestra elección.