No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Regálate acceso ilimitado a todos los cursos por 1 año a precio especial de Navidad 🎄

Antes: $199

Currency
$149/año
regístrate

termina en:

16D
14H
3M
32S

ES9: expresiones regulares

25/38
Recursos

La siguiente versión de ECMAScript fue publicada en 2018. Las características de ES9 o ES2018 que aprenderás son: expresiones regulares y propiedades de propagación.

Expresiones regulares

Las expresiones regulares o RegEx (regular expresions) son patrones de búsqueda y manipulación de cadenas de caracteres increíblemente potente y están presentes en todos los lenguajes de programación.

En JavaScript se crea este patrón entre barras inclinadas (/patrón/) y se utiliza métodos para hacer coincidir la búsqueda.

const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const match = regexData.exec('2018-04-20')

Este es un tema extenso, por lo que te recomiendo seguir el curso y leer los métodos sobre expresiones regulares en JavaScript:

Propiedades de propagación

Las propiedades de propagación consisten en expandir las propiedades de un objeto utilizando el spread operator. Sirve para crear nuevos objetos a partir de otros.

const objeto = {
  nombre: "Andres",
  age: 23,
}

const usuario = {
    ...objeto,
    plataforma: "Platzi"
}

Crear copias de objetos utilizando las propiedades de propagación

Semejante a crear copias de arrays utilizando el operador de propagación, se puede realizar copias de objetos en un solo nivel mediante las propiedades de propagación.

De esta manera el segundo objeto tendrá una referencia en memoria diferente al original.

const objetoOriginal = {a: 1, b: 2}
const objetoReferencia = objetoOriginal
const objetoCopia = {...objetoOriginal}

objetoReferencia === objetoOriginal // true
objetoOriginal === objetoCopia // false

Cuidado con la copia en diferentes niveles de profundidad

El operador de propagación sirve para crear una copia en un solo nivel de profundidad, esto quiere decir que si existen objetos o arrays dentro de un objeto a copiar. Entonces los sub-elementos en cada nivel, tendrán la misma referencia en la copia y en el original.

const original = { datos: [1, [2, 3], 4, 5] }
const copia = { ...original }

original === copia // false
original["datos"] === copia["datos"] // true

La manera de solucionar esto es más compleja, tendrías que utilizar el operador de propagación para cada elemento en cada nivel de profundidad.

Sin embargo, recientemente salió una forma de crear una copia profunda con StructuredClone. Aunque es una característica muy reciente, así que revisa que navegadores tienen soporte.

const original = { datos: [1, [2, 3], 4, 5] }
const copia = structuredClone(original)

original === copia // false
original["datos"] === copia["datos"] // false

Contribución creada por Andrés Guano (Platzi Contributor).

Aportes 14

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Cuidado con la copia en diferentes niveles de profundidad

El operador de propagación sirve para crear una copia en un solo nivel de profundidad, esto quiere decir que si existen objetos o arrays dentro de un objeto a copiar. Entonces los sub-elementos en cada nivel, tendrán la misma referencia en la copia y en el original.

const original = { datos: [1, [2, 3], 4, 5] }
const copia = { ...original }

original === copia // false
original["datos"] === copia["datos"] // true

La manera de solucionar esto es más compleja, tendrías que utilizar el operador de propagación para cada elemento en cada nivel de profundidad.

Sin embargo, recientemente salió una forma de crear una copia profunda con StructuredClone. Aunque es una característica muy reciente, así que revisa que navegadores tienen soporte.

const original = { datos: [1, [2, 3], 4, 5] }
const copia = structuredClone(original)

original === copia // false
original["datos"] === copia["datos"] // false

Hola [email protected] 😃
ES9

  • Regex
const regex = /(\d{4})-(\d{2})-(\d{2})/;
const matchers = regex.exec("2022-01-01");
console.table(matchers);

  • Spread

const user = { username: "gndx", age: 34, coutry: "CO" };
const { username, ...values } = user;
console.log(username);
console.log(values);

Para quien lo quiera copiar y pegar 😄

const regex = /(\d{4})-(\d{2})-(\d{2})/;

Se añade otro curso mas a mi lista de pendientes, Curso de Expresiones Regulares - Platzi

Las expresiones regulares suelen ser un dolor de cabeza, pero hay que reconocer una vez dominadas, que son una herramienta super-potente para el programador.

Por si quieren ver una un Padled, con bastante información sobre las regular expressions. Este fue creado en base al contenido de Modulo de expresiones regulares de ManzDev

Interesante, imprimir en la consola el contenido de un array de manera mas clara en una tabla

console.table(values)

Mostrara…

(index) | Value

age | 34

country | ‘CO’

Rest Operator


.
En realidad lo que el profe Oscar explicó después de las regex no es el spread operator, sino el Rest operator.
Ambos tienen la misma sintaxis de 3 puntitos < … > pero son distintos.
.

Como se diferencia el Rest Operator del Spread Operator?

  • La sintaxis spread “expande” un array en sus elementos, mientras que la sintaxis rest recopila varios elementos y los “condensa” en un solo elemento.
    .
  • Rest tiene dos aplicaciones, como Rest property (en asignación desestructurada) y como Rest parameters.
    .
  • El ejemplo del profesor muestra el uso de Rest Property, es decir, una asignación desestructurada aplicada en un objeto.
    .
  • Los rest parameters permiten a una función aceptar una cantidad indefinida de argumentos (aunque esto no suele ser una buena práctica).
function sum(...theArgs) {
  let total = 0;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

Para más info check the Documentation.

Por aquí les dejo unos Apuntes.

Pagina para generar y probar tus regex:

Regex101

Qué son las expresiones regulares o regExp - regEx?

En resumen, son una forma mas corta de escribir condiciones de un problema por medio de patrones que son representados por cadenas de texto donde algunos simbolos utilizados tienen un significado especial; de otra manera, el código sería mucho más extenso.

En el siguiente enlace puedes ampliar éste concepto. https://lenguajejs.com/javascript/regexp/expresiones-regulares/