Una matriz en JavaScript es una estructura de datos que se utiliza para almacenar múltiples valores en una sola variable. Puede contener varios tipos de datos y permite un cambio de tamaño dinámico. Se accede a los elementos por su índice, comenzando desde 0.

Matriz de JavaScript

Tiene dos formas de crear matrices de JavaScript: usando el constructor de matrices o el sintaxis literal de matriz abreviada , que son solo corchetes. Las matrices son de tamaño flexible, por lo que pueden crecer o reducirse a medida que agrega o elimina elementos.

Tabla de contenidos

• ¿Qué es una matriz en JavaScript?
• Terminologías básicas de matriz JavaScript
• Declaración de una matriz
• Operaciones básicas en matrices de JavaScript
• Diferencia entre matrices y objetos de JavaScript
• ¿Cuándo utilizar matrices y objetos de JavaScript?
• Reconocer una matriz de JavaScript
• Referencia completa de matriz de JavaScript
• Ejemplos de matrices de JavaScript
• Hoja de trucos de JavaScript

Terminologías básicas de matriz JavaScript

• Formación: Una estructura de datos en JavaScript que le permite almacenar múltiples valores en una sola variable.
• Elemento de matriz: Cada valor dentro de una matriz se llama elemento. Se accede a los elementos por su índice.
• Índice de matriz: Una representación numérica que indica la posición de un elemento en la matriz. Las matrices de JavaScript tienen un índice cero, lo que significa que el primer elemento está en el índice 0.
• Longitud de la matriz: El número de elementos de una matriz. Se puede recuperar utilizando la propiedad de longitud.

Declaración de una matriz

Básicamente, hay dos formas de declarar una matriz, es decir, Array Literal y Array Constructor.

1. Crear una matriz usando Array Literal

Crear una matriz usando un literal de matriz implica el uso de corchetes [] para definir e inicializar la matriz. Este método es conciso y ampliamente preferido por su simplicidad.

reemplazo de cadena java

Sintaxis:

let arrayName = [value1, value2, ...];>

Ejemplo:

// Creating an Empty Array let names = []; console.log(names); // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ]>

2. Crear una matriz usando Array Constructor (nueva palabra clave de JavaScript)

El constructor de matrices se refiere a un método para crear matrices invocando la función constructora de matrices. Este enfoque permite la inicialización dinámica y se puede utilizar para crear matrices con una longitud o elementos específicos.

Sintaxis:

let arrayName = new Array();>

Ejemplo:

// Declaration of an empty array  // using Array constructor let names = new Array(); console.log(names); // Creating and Initializing an array with values let courses = new Array('HTML', 'CSS', 'Javascript', 'React'); console.log(courses); // Initializing Array while declaring let arr = new Array(3); arr[0] = 10; arr[1] = 20; arr[2] = 30; console.log(arr);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ] [ 10, 20, 30 ]>

Nota: Los dos métodos anteriores hacen exactamente lo mismo. Utilice el método literal de matriz para mayor eficiencia, legibilidad y velocidad.

Operaciones básicas en matrices de JavaScript

1. Accediendo a elementos de una matriz

Se puede acceder a cualquier elemento de la matriz mediante el número de índice. El índice de las matrices comienza con 0.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Accessing Array Elements console.log(courses[0]); console.log(courses[1]); console.log(courses[2]); console.log(courses[3]);>

HTML CSS Javascript React>

2. Accediendo al primer elemento de una matriz

La indexación de la matriz comienza desde 0, por lo que podemos acceder al primer elemento de la matriz utilizando el número de índice.

ejemplo de java hola mundo

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing First Array Elements let firstItem = courses[0]; console.log('First Item: ', firstItem);>

First Item: HTML>

3. Accediendo al último elemento de una matriz

Podemos acceder al último elemento de la matriz usando el número de índice [array.length – 1].

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing Last Array Elements let lastItem = courses[courses.length - 1]; console.log('First Item: ', lastItem);>

First Item: React>

4. Modificación de los elementos de la matriz

Los elementos de una matriz se pueden modificar asignando un nuevo valor a su índice correspondiente.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses); courses[1]= 'Bootstrap'; console.log(courses);>

[ 'HTML', 'CSS', 'Javascript', 'React' ] [ 'HTML', 'Bootstrap', 'Javascript', 'React' ]>

5. Agregar elementos a la matriz

Se pueden agregar elementos a la matriz usando métodos como push() y unshift().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Add Element to the end of Array courses.push('Node.js'); // Add Element to the beginning courses.unshift('Web Development'); console.log(courses);>

[ 'Web Development', 'HTML', 'CSS', 'Javascript', 'React', 'Node.js' ]>

6. Eliminar elementos de una matriz

Elimine elementos utilizando métodos como pop(), shift() o splice().

correo electrónico

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; console.log('Original Array: ' + courses); // Removes and returns the last element let lastElement = courses.pop(); console.log('After Removed the last elements: ' + courses); // Removes and returns the first element let firstElement = courses.shift(); console.log('After Removed the First elements: ' + courses); // Removes 2 elements starting from index 1 courses.splice(1, 2); console.log('After Removed 2 elements starting from index 1: ' + courses);>

Producción

Original Array: HTML,CSS,Javascript,React,Node.js After Removed the last elements: HTML,CSS,Javascript,React After Removed the First elements: CSS,Javascript,React After Removed 2 elements starting from index 1: CSS>

7. Longitud de la matriz

Obtenga la longitud de una matriz usando la propiedad de longitud.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; let len = courses.length; console.log('Array Length: ' + len);>

Array Length: 5>

8. Aumentar y disminuir la longitud de la matriz

Podemos aumentar y disminuir la longitud de la matriz usando la propiedad de longitud de JavaScript.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; // Increase the array length to 7 courses.length = 7; console.log('Array After Increase the Length: ', courses); // Decrease the array length to 2 courses.length = 2; console.log('Array After Decrease the Length: ', courses)>

Array After Increase the Length: [ 'HTML', 'CSS', 'Javascript', 'React', 'Node.js', ] Array After Decrease the Length: [ 'HTML', 'CSS' ]>

9. Iterando a través de elementos de matriz

Podemos iterar una matriz y acceder a los elementos de la matriz usando los bucles for y forEach.

Ejemplo: Es un ejemplo de bucle for.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through for loop for (let i = 0; i < courses.length; i++) {  console.log(courses[i]) }>

HTML CSS JavaScript React>

Ejemplo: es el ejemplo de matriz.para cada() bucle.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through forEach loop courses.forEach(function myfunc(elements) {  console.log(elements); });>

HTML CSS JavaScript React>

10. Concatenación de matrices

Combine dos o más matrices usando el método concat(). Ir devuelve una nueva matriz que contiene elementos de matrices unidos.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; let otherCourses = ['Node.js', 'Expess.js']; // Concatenate both arrays let concateArray = courses.concat(otherCourses); console.log('Concatenated Array: ', concateArray);>

Concatenated Array: [ 'HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Expess.js' ]>

11. Conversión de una matriz a una cadena

Tenemos un método incorporado Encadenar() para convertir una matriz en una cadena.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Convert array ot String console.log(courses.toString());>

HTML,CSS,JavaScript,React>

12. Verifique el tipo de matriz

El JavaScript tipo de El operador se utiliza para comprobar el tipo de matriz. Devuelve un objeto para matrices.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Check type of array console.log(typeof courses);>

object>

Diferencia entre matrices y objetos de JavaScript

• Las matrices de JavaScript utilizan índices como números.
• Los objetos usan índices como nombres.

¿Cuándo utilizar matrices y objetos de JavaScript?

• Las matrices se utilizan cuando queremos que los nombres de los elementos sean numéricos.
• Los objetos se utilizan cuando queremos que los nombres de los elementos sean cadenas.

Reconocer una matriz de JavaScript

Hay dos métodos mediante los cuales podemos reconocer una matriz de JavaScript:

eol en pitón

• Mediante el uso matriz.isArray() método
• Mediante el uso en vez de método

A continuación se muestra un ejemplo que muestra ambos enfoques:

const courses = ['HTML', 'CSS', 'Javascript']; console.log('Using Array.isArray() method: ', Array.isArray(courses)) console.log('Using instanceof method: ', courses instanceof Array)>

Using Array.isArray() method: true Using instanceof method: true>

Nota: Se enfrenta un error común al escribir las matrices:

const numbers = [5] // and const numbers = new Array(5)>

const numbers = [5] console.log(numbers)>

Las dos declaraciones anteriores no son lo mismo.

Producción: Esta declaración crea una matriz con un elemento [5].

devolviendo una matriz java

[5]>

const numbers = new Array(5)  console.log(numbers)>

[ ]>

Referencia completa de matriz de JavaScript

Tenemos una lista completa de Javascript Array, para verificarlos, consulte esto Referencia de matriz de JavaScript artículo. Contiene una descripción detallada y ejemplos de todas las propiedades y métodos de la matriz.

Ejemplos de matrices de JavaScript

Los ejemplos de JavaScript Array contienen una lista de preguntas que se formulan principalmente en las entrevistas. Por favor revisa este artículo Ejemplos de matrices de JavaScript para más detalles.

Hoja de trucos de JavaScript

Tenemos una hoja de trucos sobre Javascript donde hemos cubierto todos los temas importantes de Javascript. Para verificarlos, consulte Hoja de referencia de Javascript: una guía básica de JavaScript .