Notas Javascript contra el olvido

Feb 3, 2021.

Definitivamente tengo mala memoria. Y aunque escriba el código una y otra vez hay detalles que siempre tengo que buscar. Voy a tener este post y lo iré actualizando con esas ayudas que siempre tengo que buscar. Y en vez de buscar en google busco en mi blog.

Incluyo las referencias de cada tema si quieren más información.

1. Destructure

Me encanta destruct objectos y arreglos pero hay detallitos que se me olvidan

Renombrar

const person = {
name: 'José',
lastname: 'González',
};

// Destruct y Renombrar
const { name: nombre, lastname: apellidos } = person;

Objetos anidados

const student = {
name: 'John Doe',
age: 16,
scores: {
maths: 74,
english: 63,
},
};

// We define 3 local variables: name, maths, science
const {
name,
scores: { maths, science = 50 },
} = student;

console.log(
`${name} scored ${maths} in Maths and ${science} in Elementary Science.`
);

// John Doe scored 74 in Maths and 50 in Elementary Science.

Ignorar items en un arreglo

const rgb = [200, 255, 100];

// Skip the first two items
// Assign the only third item to the blue variable
const [, , blue] = rgb;

console.log(`Blue: ${blue}`);
// Blue: 100

ES6 Destructuring: The Complete Guid

2. Mutation Methods

Parece un tontería pero muchas veces no recuerdo cuáles métodos mutan el arreglo inicial y cual devuelven un nuevo array. A veces puedes estar horas rompiendote la cabeza con una lista en vue que no se entera de los cambios.

Mutan

  • push Inserta un nuevo elemento al final del arreglo
  • pop Elimina el último elemento
  • shift Elimina el primer elemento
  • unshift Inserta uno o más elemento al inicio del arreglo
  • splice Cambia el contenido de un array eliminando y/o agregando nuevos elementos
  • sort Ordena los elementos de un arreglo
  • reverse Invierte el orden de los elementos

Nuevo Arreglo

  • filter Filtrar elementos que cumplan la condición implementada mediante una función
  • concat Concatena dos o más arreglos
  • slice Devuelve una copia de una parte del arreglo
  • map Crea un nuevo areglo con los resultados de la función indicada aplicados a cada uno de sus elementos.
  • flat Crea una nueva matriz con todos los elementos de sub-array concatenados recursivamente hasta la profundidad especificada.

MDM Web Docs / Array

3. Clonar Objetos / Array

Existen y varios métodos para clonar arreglos y objetos a me gusta usando sintaxis extendida ...

const arr = [1, 2, 3, 4];
const arrClone = [...arr];

const obj = { a: 1, b: 2, c: 3 };
const objClone = { ...obj };

Este método es sencillo y elegante pero es superficial y si tienes objetos o arreglos anidados no funciona para esto lo reconmendable es usando JSON

const objNested = { a: 1, b: 2, c: { a: 2 } };
const objClone = JSON.parse(JSON.stringify(obj));

How to clone an array in JavaScript 3 Ways to Clone Objects in JavaScript

4. Sistanxis Extendida spread

Estos tres punticos son un vacilón ... y pudiera llamarse el destripador porque a los efectos lo que hace es desmembrar objetos y arreglos, solo hay que imaginarse al arreglo sin los [] y el objeto sin {}. Ya vimos que podemos clonar obj y arreglos pero también nos permite hacer más:

Concatenar

Aunque existe arr1.concat(arr2) es mucho más elegante con spread

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];

// [1,2,3,4,5,6]

Sobreescribir Propiedades

Si lo que quieres es actualizar las

const obj = { a: 1, b: 2 };

const obj2 = { ...obj, b: 3 };

console.log(obj2);

// { a: 1, b:3 }

Sintáxis Spread

Luego seguimos, este post quiero actualizarlo en la medidad que crece mi mala memoria.

Nos vemos en la próxima aventura y si te gusta no seas tacaño y comparte.

Siguiente

Cartelón, proyecto para generar imágenes con texto

Anterior

6 Super-utlidades de Tailwindcss que amarás