Lista De Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | |

Vamos a crear una lista de frutas nosotros mismos. Llamaremos a nuestra lista "frutas" y agregaremos los siguientes valores: plátano, melón, uva. ¡Oh, cómo me encantan las frutas! Si bien esto puede sonar como un tutorial de lista de compras, en realidad acabamos de crear una tabla.

En esta guía, repasaremos qué son las matrices, cómo funcionan y por qué debería usarlas en su código. ¡Vamos a discutir algunos tableros de muestra en acción para que pueda convertirse en un ninja de tableros de JavaScript!

¿Qué es una matriz?

Una matriz es un objeto que almacena datos. Las matrices contienen una colección ordenada de elementos y pueden almacenar cero o más elementos. Las matrices son útiles en la programación porque permiten le permite almacenar valores similares "en una variable.

No tiene que escribir diez variables simples para enumerar sus frutas favoritas, por ejemplo. Con una matriz, puede agregar todas sus frutas favoritas en una variable.

Considere el siguiente ejemplo:.

Aquí hemos creado una matriz llamada "frutas". Almacena tres valores diferentes, cada uno de los cuales refleja una fruta que queremos comprar en una tienda de comestibles. Para declarar nuestra matriz, hemos encerrado nuestra lista de elementos entre corchetes.

Declarar una matriz

Hay dos formas de declarar una matriz. La forma en que verá que la mayoría de la gente hace esto es encerrando en un círculo una lista de elementos entre corchetes, como hicimos antes:

En este ejemplo, hemos declarado una matriz con tres valores. También podemos usar el constructor de arreglos, que usa la palabra clave new para declarar un arreglo:

Estos fragmentos de código crean la misma matriz, pero usan métodos diferentes. Tenga en cuenta que en nuestro segundo ejemplo, usamos soportes circulares para declarar nuestra matriz. También usamos el constructor new Array para declarar una matriz. Es por esta razón que la mayoría de la gente prefiere el primer método; Los corchetes son mucho más fáciles de recordar y escribir más rápido

las tablas pueden no incluir el mismo tipo de datos Nuestra red puede almacenar varios tipos de datos diferentes.

Esta matriz almacena tres tipos de datos diferentes: una cadena, un número y un booleano Ahora que está familiarizado con la declaración de una matriz, está listo para acceder a su contenido.

Leer un arreglo

Los arreglos no serían muy útiles si no pudiéramos leerlos valores. Es por eso que existe la indexación. El índice es una forma de acceder a elementos individuales en objeto iterable como una lista.

A cada elemento de una matriz en una matriz se le asigna su índice entumecido er.Estos números comienzan con 0 y se pueden usar para alternar la corriente a elementos individuales en una matriz. ¿Recuerdas nuestra tabla "fruti t"?

Aquí están los valores de índice ‚Äã‚Äãasignados a esta matriz:

Usando estos números podemos acceder a los diferentes elementos de nuestra lista. Digamos que desea identificar que la fruta está en la posición de índice 1 en su matriz. Puede hacerlo indicando el valor del índice entre paréntesis después del nombre de la tabla:

Nuestro código devuelve. uvas Nos referimos a la posición 1 del índice, que almacena el valor "Pasa". Si pasó el valor 0, se devolvería "Banana". Si intenta acceder a un elemento que no existe, se devolverá "indefinido":

Salida: indefinida. Donde la indexación es particularmente útil es cuando desea recorrer elementos en una matriz. Supongamos que desea imprimir cada fruta en su plantilla en la consola. Puedes hacer esto usando un ciclo como este:

Este código devuelve:

Nuestro código pasa por cada elemento de nuestra lista, luego imprime cada elemento en la consola. También notará que hemos usado la longitud . Esta función devuelve la longitud de nuestra lista

Agregar elementos a una matriz

la mayoría de las veces, a veces desea agregar un nuevo valor a una matriz después de declararla inicialmente. Puede hacerlo usando la matriz push () .

Olvidamos agregar "Fresa" a nuestra lista de frutas. ¡Oh, no! No te preocupes, siempre podemos agregar usando el push () :

Ahora que hemos ejecutado este código, nuestra matriz se ve así:

< table class = "wp-block table cours-info table"> Plátano uvas Melón Fresa 1 2 3

Puedes agregar datos al principio de tu tabla usando el código < > unshift() . Las fresas son tan importantes en nuestra lista de la compra que queremos que aparezcan en primer lugar:

Esto haría que nuestra lista de "frutas" se viera así:

< td > fresa
plátano uvas Melón
1 2 3

quitar elementos de una matriz

Resulta que ya tenemos un melón en casa, así que no necesitamos para comprar uno ¿Cuál es el punto de comprar un melón, verdad? Como el melón está al final de nuestra lista, tenemos dos opciones para eliminarlo:

usando Let splice () como ejemplo:.

Nuestro código devuelve:

splice () acepta dos parámetros. El primero es el número de índice que se eliminará de la matriz y el segundo es el número de elementos que se eliminarán. En este caso, queríamos eliminar el elemento con el valor de índice 3, por lo que especificamos "3, 1" como nuestros parámetros.

pop() no acepta ningún parámetro . Eliminar solo el último elemento de una lista:

Nuestro código devuelve:

También puede usar shift() para eliminar un elemento del inicio de una lista:

Nuestro código devuelve:

push () y unshift () agregan elementos a la lista. Los elementos pop () y shift () se eliminan de la lista. El método de ensamblaje también se puede utilizar para eliminar un elemento de una lista en función de su valor de índice

Modificación elementos de una serie

Aunque los plátanos son una fruta sabrosa, a menudo son tan grandes que no puedes comer uno como refrigerio cuando te sientes un poco nervioso. Me atrevo a tener hambre. Los plátanos pequeños son más fáciles para comer.

Ahora digamos que queremos cambiar nuestra lista de "frutas" para comprar plátanos pequeños en lugar de plátanos normales. Podríamos hacer esto usando el operador de asignación como todas las variables:

Nuestro el código devuelve:

Modificamos la entrada en la posición de índice 0 para almacenar el valor "baby bananas". No es necesario utilizar métodos especiales para realizar este cambio; el operador de asignación se utiliza para modificar val ues ‚Äã‚Äãen una matriz.

Conclusión

Esta es la base de lo que necesita saber sobre las matrices de JavaScript. Hay más que aprender, pero eso es lo que hace que la programación sea divertida: siempre hay un nuevo desafío que abordar. Por lo menos, ha aprendido acerca de mis frutas favoritas. Aunque diría que me gusta la grosella negra, no la he mencionado en este tutorial.

Ahora está listo para comenzar a trabajar con matrices de JavaScript como un ¡experto!