JavaScript: cómo obtener el número de elementos en una matriz

En este tutorial, aprenda cómo obtener la cantidad de elementos en una matriz/lista de JavaScript, usando la propiedad de longitud, un manual de bucle for con un contador, cómo contar elementos de matrices anidadas aplanando matrices y contando manualmente, etc. con ejemplos prácticos de código.

Introducción

Una matriz se utiliza para almacenar una colección ordenada de valores. Estos valores pueden ser una combinación del mismo tipo de datos o de varios tipos de datos: enteros, flotantes, cadenas, booleanos, objetos y mucho más.

Obtener la cantidad de elementos en una matriz con JavaScript es una operación común cuando se consumen datos o se trabaja con API en JavaScript. Esto se puede lograr utilizando la propiedad longitud o iterando a través de una matriz y contando los elementos.

En este artículo, aprenderemos cómo obtener la cantidad de elementos en una matriz con JavaScript y mucho más: cómo contar elementos únicos y cómo contar elementos de una matriz en función de ciertas condiciones.

Uso de la propiedad longitud integrada {#uso de la propiedad de longitud integrada}

La forma estándar de obtener el número total de elementos en una matriz es usar la propiedad longitud incorporada:

1
2
3
4
5
6
7
let myArray = [99, 101.5, "John Doe", true, { age: 44 }];
let total = myArray.length;
console.log(total); // Output: 5

// Alternatevly:
let total = [99, 101.5, "John Doe", true, { age: 44 }].length;
console.log(total); // Output: 5

{.icon aria-hidden=“true”}

Nota: longitud se refiere a un valor almacenado en caché de la longitud de la matriz, calculado cuando se crea la matriz. Por lo tanto, no itera la matriz llamando a longitud explícitamente, ni implícitamente. Esto garantiza que la longitud se escale hasta un nivel arbitrario y no afecte el rendimiento de su aplicación, como el impacto que sentiría al realizar un bucle manual.

Uso de bucles en JavaScript

Los bucles de JavaScript también se pueden usar para contar la longitud de una matriz iterando a través de la matriz e incrementando la variable contador en uno para cada elemento de la matriz. Esto se usa principalmente cuando desea realizar ciertas operaciones en los elementos mismos o en un elemento en particular, ya que estamos iterando a través de todos los elementos de la matriz.

{.icon aria-hidden=“true”}

Nota: Este enfoque es más difícil en comparación con la propiedad longitud descrita anteriormente, sin embargo, es bastante simple en sí mismo. Vale la pena señalar que las matrices más largas tardan más en iterarse, mientras que length devuelve el valor almacenado en caché con un tiempo de búsqueda constante.

for Bucle

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let myArray = [99, 101.5, "John Doe", true, { age: 44 }];

// Counter variable
let total = 0;

for (let i = 0; i < myArray.length; i++) {
    total++;
}

console.log(total); // Output: 5

para...en Bucle

1
2
3
4
5
6
7
8
let myArray = [99, 101.5, "John Doe", true, { age: 44 }];

let total = 0;
for (i in myArray) {
    total++;
}

console.log(total); // Output: 5

Obtener el número de elementos únicos en una matriz

Las matrices en JavaScript pueden tener múltiples elementos de diferentes tipos de datos y estos elementos pueden incluir algunos duplicados. Si queremos obtener el número de elementos únicos, podemos usar el constructor Set().

Crea un conjunto a partir de la matriz pasada como argumento. Por lo tanto, nos ayuda a eliminar duplicados y solo devuelve elementos únicos (un conjunto es una colección de elementos únicos). Cuando se eliminan los duplicados, podemos usar la propiedad longitud para obtener la cantidad de elementos únicos.

{.icon aria-hidden=“true”}

Hint: If you want to learn more about how to remove duplicates from an array in JavaScript, you should read Cómo eliminar duplicados de una matriz en JavaScript!

Por ejemplo, supongamos que tenemos una matriz de nombres que tiene un total de 7 elementos, entre los cuales 6 son únicos. Podemos obtener primero los elementos únicos y luego hacer uso de la propiedad longitud para obtener la longitud:

1
2
3
4
5
let names = ["John", "Dan", "Jane", "Sam", "Alisa", "John", "Pete"];
let uniqueNames = [...new Set(names)];
let totalPeople = uniqueNames.length;

console.log(totalPeople); // Output: 6

{.icon aria-hidden=“true”}

Nota: Esto también puede funcionar con bucles. Después de que tengamos los elementos únicos almacenados en una nueva matriz, todo lo que tenemos que hacer es recorrerlo y contar los elementos como lo hemos hecho antes.

¿Qué sucede si una matriz contiene otras matrices como elementos? {#qué pasa si una matriz contiene otras matrices como elementos}

Como dijimos antes, las matrices en JavaScript pueden contener elementos de muchos tipos de datos, incluido un tipo de datos Array. Esto puede ser un poco confuso al principio, pero cuando comprenda cómo la propiedad longitud cuenta esos subconjuntos, podrá manejar esta situación sin ningún problema.

El primer método que probablemente te viene a la mente es usar la propiedad longitud:

1
2
3
4
let myArray = [["John", "Pete"], [90, 2], [], [34, 45, 2], [9,4], "John Doe", true, [19]];
let total = myArray.length;

console.log(total); // Output: 8

Observe cómo la propiedad longitud trata cada subarreglo como un elemento. No considera el contenido de los subarreglos; no importa si está vacío o tiene una gran cantidad de elementos, se cuenta como un elemento del arreglo original (en este caso, myArray).

Obtenga el número de elementos en una matriz que contiene otras matrices {#obtenga la cantidad de elementos en una matriz que contiene otras matrices}

Ahora aprendamos cómo contar el número de todos los elementos en una matriz, incluidos esos elementos dentro de elementos de subarreglo. Podemos usar un par de enfoques, como un bucle for o un for...in, etc.

Primero inicializaremos totalLength a 0, luego crearemos una función (myLength()) que se usará para recorrer la matriz y contar el número de sus elementos. En primer lugar, debemos recorrer la matriz original y considerar cada uno de sus elementos. Si el elemento no es un arreglo, simplemente aumentaremos totalLength en 1. Por otro lado, si el elemento actual es un arreglo (subarreglo del arreglo original), llamaremos recursivamente a myLength ` método para calcular el número de sus elementos:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
let myArray = [["John", "Pete"], [90, 2], [], [34, 45, 2], [9,4], "John Doe", true, [19]];

let totalLength = 0;
const myLength = (array) => {
    // For each element of the `myArray`
    for (let i in array) {
        // If the element is an array
        // recursively call `myLength` to calculate
        // the length of the current element
        // Otherwise, just increment the `totalLength`
        if (Array.isArray(array[i])) {
            myLength(array[i]);
        } else {
            totalLength++;
        }
    }
};

myLength(myArray);
console.log(totalLength); // Output: 12

Alternativamente, puede simplemente llamar al método flat() en myArray, que lo aplana al concatenar recursivamente todos los elementos en una matriz 1D, y luego llamar a longitud en la nueva matriz:

1
console.log(myArray.flat().length) // Output: 12

Recuento basado en condiciones

Como mencionamos anteriormente, también podemos contar la cantidad de elementos en una matriz en función de ciertas condiciones. Por ejemplo, supongamos que tenemos una matriz de estudiantes que consta de objetos, cada uno de los cuales contiene el nombre y la puntuación de los estudiantes:

1
2
3
4
5
6
7
const students = [
    { name: "John Doe", score: 70 },
    { name: "Jane Doe", score: 40 },
    { name: "Sarah Jane", score: 33 },
    { name: "John Tough", score: 84 },
    { name: "Jabes Tough", score: 64 }
];

Podemos contar el número total de estudiantes que obtienen una puntuación superior a 60, recorriendo cada elemento y contando los que pasaron la condición predefinida:

1
2
3
4
5
6
7
8
9
let total = 0;

students.forEach((student) => {
    if (student.score >= 60) {
        total++;
    }
});

console.log(total); // Output: 3

Esto también funcionaría para otros métodos de iteración como el bucle for:

1
2
3
4
5
6
7
8
9
let total = 0;

for (let i = 0; i < students.length; i++) {
    if (students[i].score >= 60) {
        total++;
    }
}

console.log(total); // Output: 3

Conclusión

En este artículo, aprendimos cómo obtener la cantidad de elementos en una matriz y vimos varios escenarios que podrían garantizarnos obtener la longitud de una matriz y cómo podríamos lograr cada uno de ellos.