JavaScript
Affectation de destruction

Introduction

Syntaxe

• let [x, y] = [1, 2]
• let [first, ... rest] = [1, 2, 3, 4]
• laissez [un, trois] = [1, 2, 3]
• let [val = 'valeur par défaut'] = []
• Soit {a, b} = {a: x, b: y}
• Soit {a: {c}} = {a: {c: 'imbriqué'}, b: y}
• let {b = 'valeur par défaut'} = {a: 0}

Remarques

Destruction des arguments de la fonction

Tirez les propriétés d'un objet passé dans une fonction. Ce modèle simule des paramètres nommés au lieu de compter sur la position de l'argument.

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

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

greeting(user)

Cela fonctionne également pour les tableaux:

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

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

Renommer les variables lors de la destruction

La destruction nous permet de faire référence à une clé dans un objet, mais de la déclarer comme une variable avec un nom différent. La syntaxe ressemble à la syntaxe clé-valeur d'un objet 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

Tableaux de destruction

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

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

Nous pouvons définir la valeur par défaut dans le tableau de déstructuration, voir l'exemple de la valeur par défaut lors de la destruction .

Avec le tableau de déstructuration, nous pouvons échanger facilement les valeurs de 2 variables:

var a = 1;
var b = 3;

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

Nous pouvons spécifier des emplacements vides pour ignorer les valeurs inutiles:

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

Objets de destruction

La destruction est un moyen pratique d'extraire des propriétés d'objets dans des variables.

Syntaxe de base:

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

let { name, age } = person;

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

Destructuration et renommage:

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

let { name: firstName } = person;

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

Destructuration avec les valeurs par défaut:

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'

Destructuration et renommage avec des valeurs par défaut

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'

Destructuration des variables internes

Outre la déstructuration des objets en arguments de fonction, vous pouvez les utiliser dans les déclarations de variables comme suit:

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

Comme vous pouvez le voir, trois nouvelles variables ont été créées: le name , l' age et l' location et leurs valeurs ont été saisies par la person objet si elles correspondaient à des noms de clés.

Utilisation des paramètres de repos pour créer un tableau d'arguments

Si vous avez déjà besoin d'un tableau contenant des arguments supplémentaires que vous pouvez ou non vous attendre à obtenir, à l'exception de ceux que vous avez spécifiquement déclarés, vous pouvez utiliser le paramètre tableau rest dans la déclaration d'arguments comme suit:

Exemple 1, arguments optionnels dans un tableau:

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

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

Exemple 2, tous les arguments sont un tableau maintenant:

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

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

La console a été imprimée vraie parce que myArguments est un tableau, aussi, le ...myArguments dans la déclaration d'arguments de paramètres convertit une liste de valeurs obtenues par la fonction (paramètres) séparées par des virgules dans un tableau entièrement fonctionnel (et non un objet Array-like) comme l'objet argument natif).

Valeur par défaut lors de la destruction

Nous rencontrons souvent une situation où une propriété que nous essayons d'extraire n'existe pas dans l'objet / tableau, ce qui entraîne une TypeError (lors de la déstructuration des objets imbriqués) ou est définie sur undefined . En cas de déstructuration, nous pouvons définir une valeur par défaut, à laquelle il sera replacé, au cas où il ne serait pas trouvé dans l'objet.

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

Destruction imbriquée

Nous ne sommes pas limités à la déstructuration d'un objet / tableau, nous pouvons déstructurer un objet / tableau imbriqué.

Destructuration d'objets imbriqués

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

Destructuration de tableaux imbriqués

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

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

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

La destruction ne se limite pas à un seul motif, nous pouvons y inclure des tableaux avec des niveaux d’imbrication n. De même, nous pouvons déstructurer des tableaux avec des objets et vice-versa.

Tableaux dans l'objet

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

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

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

Objets dans des tableaux

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

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

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