JavaScript
Incarico distruttivo

introduzione

Sintassi

• let [x, y] = [1, 2]
• let [first, ... rest] = [1, 2, 3, 4]
• let [one,, three] = [1, 2, 3]
• let [val = 'valore predefinito'] = []
• let {a, b} = {a: x, b: y}
• let {a: {c}} = {a: {c: 'nested'}, b: y}
• let {b = 'valore predefinito'} = {a: 0}

Osservazioni

Argomenti della funzione di distruzione

Trascina le proprietà da un oggetto passato in una funzione. Questo modello simula i parametri denominati anziché fare affidamento sulla posizione dell'argomento.

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

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

greeting(user)

Questo funziona anche per gli array:

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

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

Rinominare le variabili durante la destrutturazione

La destrutturazione ci consente di fare riferimento a una chiave in un oggetto, ma di dichiararla come una variabile con un nome diverso. La sintassi assomiglia alla sintassi dei valori-chiave per un normale oggetto JavaScript.

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

Array distruttivi

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

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

Possiamo impostare il valore predefinito nella matrice destrutturante, vedere l'esempio del valore predefinito durante la destrutturazione .

Con l'array destrutturante, possiamo scambiare facilmente i valori di 2 variabili:

var a = 1;
var b = 3;

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

Possiamo specificare spazi vuoti per saltare i valori non necessari:

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

Distruzione di oggetti

La destrutturazione è un modo conveniente per estrarre proprietà da oggetti in variabili.

Sintassi di base:

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

let { name, age } = person;

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

Distruzione e ridenominazione:

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

let { name: firstName } = person;

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

Distruzione con valori predefiniti:

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'

Distruzione e ridenominazione con valori predefiniti

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'

Distruzione all'interno di variabili

A parte la destrutturazione di oggetti in argomenti di funzione, è possibile utilizzarli all'interno di dichiarazioni di variabili come segue:

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."

Come puoi vedere, sono state create tre nuove variabili: name , age e location e i loro valori sono stati afferrati dalla person oggetto se corrispondevano ai nomi delle chiavi.

Utilizzo dei parametri di riposo per creare una matrice di argomenti

Se hai mai bisogno di un array che contiene argomenti extra che potresti o non vorresti avere, a parte quelli dichiarati in modo specifico, puoi utilizzare il parametro rest di array all'interno della dichiarazione degli argomenti come segue:

Esempio 1, argomenti facoltativi in ​​una matrice:

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

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

Esempio 2, tutti gli argomenti sono una matrice ora:

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

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

La console è stata stampata true perché myArguments è una matrice, inoltre, ...myArguments all'interno della dichiarazione degli argomenti dei parametri converte una lista di valori ottenuti dalla funzione (parametri) separati da virgole in una matrice completamente funzionale (e non in un oggetto simile ad Array come l'oggetto argomenti nativi).

Valore predefinito durante la distruzione

Spesso incontriamo una situazione in cui una proprietà che stiamo tentando di estrarre non esiste nell'oggetto / array, risultando in un TypeError (durante la destrutturazione di oggetti nidificati) o impostata su undefined . Durante la destrutturazione possiamo impostare un valore di default, al quale farà il fallback, nel caso in cui non venga trovato nell'oggetto.

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

Distruzione annidata

Non siamo limitati a destrutturare un oggetto / array, possiamo distruggere un oggetto / array nidificato.

Distruzione di oggetti nidificati

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

Distruzione di array annidati

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

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

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

La destrutturazione non è solo limitata a un singolo modello, possiamo avere array in esso, con n livelli di nidificazione. Allo stesso modo possiamo distruggere gli array con gli oggetti e viceversa.

Matrici all'interno dell'oggetto

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

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

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

Oggetti all'interno di array

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

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

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