JavaScript
Tarea de destrucción

Introducción

Sintaxis

• vamos [x, y] = [1, 2]
• dejar [primero, ... descansar] = [1, 2, 3, 4]
• sea ​​[uno,, tres] = [1, 2, 3]
• dejar [val = 'valor por defecto'] = []
• sea ​​{a, b} = {a: x, b: y}
• sea ​​{a: {c}} = {a: {c: 'anidado'}, b: y}
• sea ​​{b = 'valor predeterminado'} = {a: 0}

Observaciones

Destrucción de los argumentos de la función.

Extraiga las propiedades de un objeto pasado a una función. Este patrón simula parámetros nombrados en lugar de confiar en la posición del argumento.

let user = {
    name: 'Jill',
    age: 33,
    profession: 'Pilot'
}    

function greeting ({name, profession}) {
    console.log(`Hello, ${name} the ${profession}`)
}

greeting(user)

Esto también funciona para matrices:

let parts = ["Hello", "World!"];

function greeting([first, second]) {
    console.log(`${first} ${second}`);
}

Renombrando variables mientras se destruye

La destrucción nos permite hacer referencia a una clave en un objeto, pero declararla como una variable con un nombre diferente. La sintaxis se parece a la sintaxis clave-valor para un objeto JavaScript normal.

let user = {
  name: 'John Smith',
  id: 10,
  email: '[email protected]',
};

let {user: userName, id: userId} = user;

console.log(userName) // John Smith
console.log(userId) // 10

Matrices de destrucción

const myArr = ['one', 'two', 'three']
const [ a, b, c ] = myArr

// a = 'one', b = 'two, c = 'three'

Podemos establecer el valor predeterminado en la matriz de desestructuración, vea el ejemplo de Valor predeterminado durante la desestructuración.

Con la matriz de desestructuración, podemos intercambiar los valores de 2 variables fácilmente:

var a = 1;
var b = 3;

[a, b] = [b, a];
// a = 3, b = 1

Podemos especificar espacios vacíos para omitir valores innecesarios:

[a, , b] = [1, 2, 3] // a = 1, b = 3

Destrucción de objetos

La destrucción es una forma conveniente de extraer propiedades de objetos en variables.

Sintaxis básica:

let person = {
  name: 'Bob',
  age: 25
};

let { name, age } = person;

// Is equivalent to
let name = person.name; // 'Bob'
let age = person.age;   // 25

Desestructuración y cambio de nombre:

let person = {
  name: 'Bob',
  age: 25
};

let { name: firstName } = person;

// Is equivalent to
let firstName = person.name; // 'Bob'

Desestructuración con valores por defecto:

let person = {
  name: 'Bob',
  age: 25
};

let { phone = '123-456-789' } = person;

// Is equivalent to
let phone = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

Destructurar y renombrar con valores por defecto.

let person = {
  name: 'Bob',
  age: 25
};

let { phone: p = '123-456-789' } = person;

// Is equivalent to
let p = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

Destructurando dentro de variables.

Además de desestructurar objetos en argumentos de función, puede usarlos dentro de declaraciones de variables de la siguiente manera:

const person = {
  name: 'John Doe',
  age: 45,
  location: 'Paris, France',
};

let { name, age, location } = person;

console.log('I am ' + name + ', aged ' + age + ' and living in ' + location + '.');
// -> "I am John Doe aged 45 and living in Paris, France."

Como puede ver, se crearon tres nuevas variables: name , age y location y sus valores se tomaron de la person objeto si coincidían con los nombres de las claves.

Usando los parámetros de resto para crear una matriz de argumentos

Si alguna vez necesita una matriz que consiste en argumentos adicionales que puede o no esperar tener, aparte de los que declaró específicamente, puede usar el parámetro resto de matriz dentro de la declaración de argumentos de la siguiente manera:

Ejemplo 1, argumentos opcionales en una matriz:

function printArgs(arg1, arg2, ...theRest) {
  console.log(arg1, arg2, theRest);
}

printArgs(1, 2, 'optional', 4, 5);
// -> "1, 2, ['optional', 4, 5]"

Ejemplo 2, todos los argumentos son una matriz ahora:

function printArgs(...myArguments) {
  console.log(myArguments, Array.isArray(myArguments));
}

printArgs(1, 2, 'Arg #3');
// -> "[1, 2, 'Arg #3'] true"

La consola se imprimió verdadero porque myArguments es un Array, también, el ...myArguments dentro de la declaración de argumentos de parámetros convierte una lista de valores obtenidos por la función (parámetros) separados por comas en un array completamente funcional (y no en un objeto similar a un Array) como el objeto argumentos nativos).

Valor predeterminado durante la destrucción

A menudo nos encontramos con una situación en la que una propiedad que intentamos extraer no existe en el objeto / matriz, lo que TypeError un TypeError (al destruir objetos anidados) o se configura como undefined . Mientras se realiza la desestructuración, podemos establecer un valor predeterminado, al cual se recurrirá, en caso de que no se encuentre en el objeto.

var obj = {a : 1};
var {a : x , b : x1 = 10} = obj;
console.log(x, x1); // 1, 10
 
var arr = [];
var [a = 5, b = 10, c] = arr;
console.log(a, b, c); // 5, 10, undefined

Destruccion anidada

No estamos limitados a la desestructuración de un objeto / matriz, podemos destruir una matriz / objeto anidado.

Desestructuración de objetos anidados

var obj = {
  a: {
    c: 1,
    d: 3
  },
  b: 2
};

var {
  a: {
    c: x,
    d: y
  },
  b: z
} = obj;

console.log(x, y, z);     // 1,3,2

Desestructuración de matriz anidada

var arr = [1, 2, [3, 4], 5];

var [a, , [b, c], d] = arr;

console.log(a, b, c, d);      // 1 3 4 5

La destrucción no se limita a un solo patrón, podemos tener matrices con n niveles de anidación. Del mismo modo podemos destruir arrays con objetos y viceversa.

Arreglos dentro del objeto

var obj = {
  a: 1,
  b: [2, 3]
};

var {
  a: x1,
  b: [x2, x3]
} = obj;

console.log(x1, x2, x3);    // 1 2 3

Objetos dentro de matrices

var arr = [1, 2 , {a : 3}, 4];

var [x1, x2 , {a : x3}, x4] = arr;

console.log(x1, x2, x3, x4);