Javascript – Comparar dos arrays

Seguimos con ejemplos de Javascript, en este caso veremos dos maneras de comparar el conrtenido de dos arrays.

JavaScript Tutoriales

Hay muchas maneras de comparar los contenidos de dos Arrays en JavaScript. Nosotros veremos dos maneras en las que añadiremos más funciones especiales. Son dos ejemplos que sólo pretenden mostrar maneras de hacerlo, y dependerá de vosotros escoger y adaptar el que más os convenga, o simplemente, descartar si no se adapta.

Importante: Lo primero que debemos tener en cuenta es que una string en JavaScript puede ser tratada como un Array.

Comparar posición a posición

El ejercicio consiste en pedir al usuario dos palabras, y comparar si son iguales o no mostrándolo por la consola del navegador.

    <script>
    var index= 0;     // Índice para recorrar el Array
    var iguals= true; // Si encontramos dos caracteres diferentes

    // Pedimos en ventanas emergentes las dos palabras
    var word1 = prompt("Escribe la 1a palabra:");
    var word2 = prompt("Escribe la 2a palabra:");
    
    // Si las dos palabras tienen la misma longitud
    if ( word1.length == word2.length ){

      // Mientras no recorramos toda la Array y los caracteres sean iguales
      while ( index < word1.length && iguals == true ){
        // Si los caracteres de la misma posición de las dos tablas son diferentes
        if ( word1[index] != word2[index]){
          iguals= false;
        }

        // Vamos al siguiente caráctes
        index++;
      }

      // Si acabado el bucle, la variable iguals sigue siendo true, entonces es que las palabras son iguales
      if (iguals){
        console.log("Las dos palabras son iguales");
      } else {
        console.log("Las dos palabras son diferentes");
      }
    
    // Si no tienen la misma longitud
    } else {
      console.log("Las palabras no tienen la misma longitud");
    }
    </script>

Si os fijáis, primero miramos si tienen la misma longitud. Si la tienen, pasamos a comparar las dos arrays posición a posición. Si son iguales los contenidos de cada posición (carácter), sigue.

En el caso que dos caracteres sean diferentes, la variable «iguals» pasa a ser false, y se acaba el bucle. Esto es importante. Nos ahorramos ver el resto de la palabra. Imaginad un texto de miles de caracteres. Si el segundo carácter, ya es diferente, qué sentido tiene mirar el resto de miles de caracteres que quedan…

Comparar sin tener en cuenta mayúsculas y minúsculas

En este ejercicio, haremos lo mismo, pero haciendo que la comparación no tenga en cuenta si las letras están en mayúsculas o no. Así pues, «hola» y «HOLA» deberá mostrar que son iguales.

<script>
    var word1 = prompt("Escriu la 1a paraula:");   // Pedimos en una ventana la 1a palabra
    var word2 = prompt("Escriu la 2a paraula:");   // Pedimos en una ventana la 2a palabra
    
    // Si las dos palabras tienen la misma longitud
    if ( word1.length == word2.length ){

        // Pasamos las dos palabras a minúsculas
        word1lowcase= word1.toLowerCase();
        word2lowcase= word2.toLowerCase();
        
        // Si las dos palabras en minúsculas son iguales
        if ( word1lowcase.localeCompare(word2lowcase) == 0 ){
            console.log("Las dos palabras son iguales");

        // Si las dos palabras en minúsculas no son iguales
        } else {
            console.log("Las dos palabras son diferentes");
        }

    // Si las dos palabras no tienen la misma longitud
    } else {
      console.log("Las dos palabras no tienen la misma longitud");
    }
    </script>

Debemos fijarnos en cómo pedimos en el navegador las dos palabras (con prompt), como pasamos las dos palabras a minúsculas en JaVaScript ( contoLowerCase) y cómo comparamos las dos palabras con (localeCompare).

Por último como mostramos con (console.log) el resultado en consola del navegar.

Si queŕeis ir haciendo pruebas online, podéis hacerlo en javaScript Tutor, pero ya os aviso que hay muchas funciones que no acaban de funcionar muy bien (prompt, por ejemplo). otra opción es CodePen, pero os tendréis que dar de alta. O la manera más sencilla, creaís el .html en vuestro disco duro y lo habrís con el navegador.

Pues ale, ya tenemos uno más en nuestro listado de tutoriales de JavaScript


Más información