Continuamos viendo las novedades que presenta ES6. En esta ocasión, vamos a ver la asignación por destructing que nos permite extraer los valores de un array o un objeto y asignarlos a variables.
Arrays
Primero vamos a ver cómo hacerlo para los arrays. Vamos a ver un ejemplo y lo explicamos paso a paso:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// declaración de array const array = [1, 2, 3, 4]; console.log(array); // [ 1, 2, 3, 4 ] // destructuring del array a través de la variable const [a, b, c] = array; console.log(a, b, c); // 1 2 3 // destructuring del array directamente const [x, y, z] = [5, 6, 7]; console.log(x, y, z); // 5 6 7 // asignamos el primer valor a la variable "primero" y el resto a "resto" const [primero, ...resto] = array; console.log(primero, resto) |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Destructing-Array
El ejemplo es simple, pero se puede ver muy fácilmente el funcionamiento. Primero de todo declaramos un array con unos valores. Después, hacemos una asignación por destructing de las valores del array a las variables a, b, c y d. También, se podría hacer directamente desde un array, sin tener que asignarlo a una variable previamente.
En las últimas líneas del ejemplo, lo que estamos haciendo es asignar el primer valor a la variable primero y el resto de valores a la variable resto, para ello utilizamos el operador SPREAD (explicado en esta entrada).
Objetos
Para los objetos funciona más o menos igual que para los arrays. Vamos a ver un ejemplo y explicamos las diferencias:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// declaración de un objeto const obj = {a:"a", b:"b", c:"c"}; console.log(obj); // { a: 'a', b: 'b', c: 'c' } // destructing del objeto a través de la variable // nombre de la variable igual que la propiedad const {b, c} = obj; console.log(b, c); // b c // destructing del objeto directamente // nombre diferente al de la propiedad const {x:nuevo_nombre, y} = {x:"x", y:"y"}; console.log(nuevo_nombre, y); // x y // asignamos el primer valor a la variable "a" y el resto a "resto" const {a, ...resto} = obj; console.log(a, resto) |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Destructing-Object
Como ya he dicho anteriormente, funciona prácticamente igual que con los arrays, pero con algunas diferencias. Una de las diferencias es que en vez de utilizar [] se utilizan {} para asignar las variables. La otra es que tenemos que tener en cuenta que el nombre de la variable debe ser igual que el de la propiedad que queremos asignar ( const {b, c} = obj; ). Si quisiéramos que la variable tenga un nombre diferente al de la propiedad, lo tendríamos que indicar con <nombre de la propiedad>:<nombre de la variable>( const {x:nuevo_nombre, y} = {x:"x", y:"y"}; ).
-
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR