Javascript (JS) es un lenguaje de scripting, utilizado principalmente en la Web. Se utiliza para mejorar las páginas HTML y suele encontrarse incrustado en el código HTML.
JavaScript hace que las páginas web sean interactivas y dinámicas. Esto permite que las páginas reaccionen a eventos, muestren efectos especiales, acepten texto variable, validen datos, creen cookies, detecten el navegador del usuario, etc.
Hola chicos, vamos a sumergirnos en algunas de las funcionalidades básicas de javascript.En este artículo voy a cubrir los fundamentos de CRUD y la desestructuración.
Vamos a discutir la funcionalidad CRUD que es como creamos, leemos, actualizamos y borramos en arrays y objetos.
Estas son 2 sintaxis para crear un array vacío.
En la declaración anterior hemos declarado y asignado valores en una sola declaración.
AÑADIR DATOS MEDIANTE PUSH
Esta es la sintaxis para empujar datos en un array- arrayname.push(item).
Cuando añadimos datos mediante push, se añaden en el fin.
AÑADIR DATOS CON UNSHIFT
Esta es la sintaxis para desplazar datos en un array- nombredelarray.unshift(elemento).
Cuando añadimos datos utilizando unshift, se añaden al principio, ya que en unshift todos los elementos del array se desplazan 1 posición hacia la derecha y se asigna el primer lugar al elemento.
En el ejemplo anterior se añaden múltiples elementos a la matriz utilizando push y unshift siguiendo la sintaxis- arrayname.push(item1,item2,item3..) o arrayname.unshift(item1,item2,item3….).
BORRAR ELEMENTOS CON POP
Esta es la sintaxis para sacar un elemento de la matriz: arrayname.pop().
Cuando eliminamos un elemento mediante pop, el elemento se elimina desde el final.
BORRADO DE ELEMENTOS CON SHIFT
Esta es la sintaxis para desplazar un elemento de la matriz: arrayname.shift().
Cuando borramos un elemento con shift, el elemento se borra desde el principio.
AÑADIR, ACTUALIZAR Y ELIMINAR ELEMENTOS MEDIANTE EL EMPALME
Aquí index denota la posición, elimina el número de elementos especificado en deletecount y luego inserta los elementos presentes desde elem1 hasta elemN.
EJEMPLO 1- BORRADO
Aquí, a partir del índice 1, hay que borrar 1 elemento.
EJEMPLO 2-BORRADO E INSERCIÓN
Aquí, a partir del índice 0, hay que eliminar 3 elementos y añadir 2 elementos deja y baila.Así que el array final tiene este aspecto.Si intentamos devolver el empalme nos devuelve el array de elementos eliminados.
EJEMPLO 3-INSERCIÓN
Aquí se menciona el deletecount como 0 y a partir del índice 2 se añaden dos elementos complejo y lenguaje.
HACER SUBARREGLOS USANDO SLICE
Aquí start denota la posición en la que quieres empezar y end denota el índice en el que quieres el final.Así que según los índices de start y end especificados la función slice reutrn una copia del array desde el principio hasta el final pero sin incluir el final.
UNIR MATRICES CON ELEMENTOS O MATRICES USANDO CONCAT
Concat devuelve un nuevo array que une arrays con los argumentos, que pueden ser ítems u otros arrays.
BUSCAR
Los métodos son similares a los utilizados para las cadenas, pero funcionan con elementos en lugar de con caracteres.
Estos métodos utilizan === para la comparación.
Si sólo queremos saber si la matriz contiene el elemento, entonces usamos includes.También includes puede manejar NaN correctamente a diferencia de indexOf y lastIndexOf.
ENCONTRAR Y ENCONTRAR ÍNDICE
La sintaxis es la mencionada anteriormente y devuelve el elemento si lo encuentra o si no se encuentra nada entonces se devuelve undefined.
Aquí arriba hemos utilizado la sintaxis de la función flecha donde item es el argumento y devolvemos el item donde item.id==1.
findIndex consigue lo mismo pero devuelve el índice del elemento encontrado en lugar del elemento real.
FILTRO
La función de filtro funciona de forma similar a la de encontrar, pero en lugar de devolver sólo el primer elemento, devuelve todos los elementos que coinciden.
A continuación, el ejemplo devuelve todos los elementos en los que item.id < 3 y sigue la convención de la función flecha.
TRANSFORMANDO UN ARRAY
A continuación hay funciones que transforman o reordenan la matriz sin cambiar la matriz original. Se considera una de las aplicaciones más importantes, así que tómate tu tiempo para entenderla.
MAPA
Aquí la variable de resultado devuelve la función que se haya operado sobre el array sin mutar el array.Por ejemplo, abajo tenemos un nuevo array en el que cada entrada del array se convierte en su longitud.
Aquí volvemos a seguir la convención de la función flecha, donde el argumento es el elemento y cada elemento se transforma en su longitud.
REDUCE
Para iterar sobre un array podemos utilizar bucles, para transformar el valor de cada entrada podemos utilizar mapas, pero si queremos devolver un único valor basado en todo el array, entonces utilizamos reduce.
El índice especifica desde dónde empezamos a aplicar la función y la inicial al final denota el valor inicial del valor anterior.
Aquí utilizamos la convención de la función flecha, en la que suma es el valor anterior y se le asigna un valor inicial de 0. La función devuelve suma+actualidad en cada llamada y, como no se especifica el índice, abarca toda la matriz, por lo que finalmente devuelve la suma de todos los elementos de la matriz.
Esta es la sintaxis para crear nuevos objetos.
Aquí hemos creado un nuevo objeto con estas propiedades.
Aquí, hemos añadido una propiedad booleana.
Aquí, eliminamos esta propiedad del objeto usuario.
Aquí vamos a ver cómo asignamos los valores de la propiedad a un objeto utilizando una función.
Aquí está la abreviatura de la misma.Ya que estamos asignando el nombre de la propiedad al nombre del argumento y del mismo modo podemos evitar la sintaxis extra y podemos ejecutar esto.
Veamos cómo podemos acceder a todos los pares clave-valor del objeto utilizando el bucle for.
MÉTODOS DEL OBJETO
Si tenemos el objeto mencionado a continuación, veamos cómo podemos aplicar los métodos del objeto para acceder a las claves, los valores y ambos (entradas).
Asignación de desestructuración es una sintaxis especial que nos permite «desempaquetar» arrays u objetos en un montón de variables, ya que a veces son más convenientes. La desestructuración también funciona muy bien con funciones complejas que tienen muchos parámetros, valores por defecto, y pronto veremos cómo se manejan también.
Aquí el array no se modifica.
Aquí se asigna el nombre arr[0] y al apellido se le asigna arr[1].
En el ejemplo anterior, el primer y el segundo elemento se saltan con sólo tener comas.
El ejemplo anterior muestra que la desestructuración no se limita a las matrices, sino que funciona con todos los iterables, como cadenas, conjuntos, etc.
En el ejemplo anterior estamos asignando propiedades de objetos mediante desestructuración.
El ejemplo anterior es un buen ejemplo en el que podemos acceder a los pares clave-valor del objeto utilizando la desestructuración en un bucle for.
VARIABLES REST
En el ejemplo anterior estamos accediendo a las variables restantes, lo que implica que todos los argumentos después de nombre2 se introducen en el array rest.
VALORES POR DEFECTO
Aquí las variables ya tienen asignados valores por defecto. Esto es útil porque en el lado derecho sólo tenemos una variable, por lo que al segundo argumento se le habría asignado un valor indefinido, pero como tiene un valor por defecto «Anónimo», podemos resolver este problema.
DESESTRUCTURACIÓN DE OBJETOS
Aquí se asignan a título,anchura,altura los valores de opciones.título,opciones.anchura,opciones.altura respectivamente.
Aquí el valor de options.width se guarda en la variable w,options.height se guarda en la variable h. Los dos puntos muestran «qué : va dónde». En el ejemplo anterior la propiedad width va a w, propiedad height va a hy title está asignado al mismo nombre.
En el ejemplo anterior hemos asignado valores por defecto.
DESESTRUCTURACIÓN ANIDADA
En el ejemplo anterior,el objeto opciones tiene dentro el objeto tamaño y el array elementos.La variable extra no se desestructura ya que en la asignación izquierda no está presente.Además como el título no está presente en el objeto toma el valor por defecto.
PARÁMETROS DE LA FUNCIÓN Y DESESTRUCTURACIÓN
Aquí los parámetros entre llaves {} se desestructuran con las opciones de los objetos, como se muestra en la última línea, de modo que el título toma el valor de options.title y, del mismo modo, la anchura y la altura toman los valores predeterminados y la matriz de elementos toma los elementos de la matriz options.items.
¿Cuál es la utilidad real de todo esto? Bueno, cuando estás construyendo realmente una webapps, estos conceptos son perjudiciales para controlar los datos presentes en arrays y objetos, mutando a veces sin tener ningún cambio en el array y a veces por algún cambio en el array original.
