Compréhension de base de la déconstruction d'objets ES6 et de la déconstruction de tableaux

1. Déconstruction d'objets

(1) Compréhension : la forme grammaticale d'un littéral d'objet consiste à placer un littéral d'objet à gauche d'un opérateur d'affectation (=) .

 let person = { name: 'zhangsan', age: 20 }; 
 let { name, age, sex } = person;
 console.log(name); // 'zhangsan' 
 console.log(age); // 20
 console.log(sex); // undefined

 let {name: myName, age: myAge} = person; // myName myAge 属于别名
 console.log(myName); // 'zhangsan' 
 console.log(myAge); // 20

Dans ce code, la valeur de person.name est stockée dans une variable nommée name ; la valeur de person.age est stockée dans une variable nommée age. Lors de l'utilisation d'une expression d'affectation de déstructuration, si le nom de variable locale spécifié n'existe pas dans l'objet, la variable locale se verra attribuer la valeur undefined. Le résultat après déconstruction : name='zhangsan', age=20, sex=undefined.

(2) La déstructuration d'objet est appliquée aux déclarations de variables. Cependant, nous pouvons également utiliser la syntaxe de déstructuration lors de l'attribution de valeurs aux variables.

const name = 'jack', age = 24;
const person = { name: 'li hua', age: 18 };

// 使用解构来分配不同的值
({ name, age } = person);

console.log(name); // "li hua"
console.log(age); // 18

Dans ce code, une valeur est initialisée lors de la déclaration des variables name et age. Dans ({ name, age } = person); , lisez la valeur correspondante dans l'objet person et réaffectez ces deux variables en déconstruisant la méthode d'affectation . Le résultat après l'affectation de déconstruction : name='li hua', age=18.

(3) La construction et la déconstruction d'objets imbriqués sont toujours similaires à la syntaxe des littéraux d'objet, et les objets peuvent être désassemblés pour obtenir les informations souhaitées

const father= {
    name: 'father',
    age: 666,
    son: {
        child: {
            name: 'child',
            age: 3,
        }
    }
};
let { son: { child } } = father;
console.log(child.name); // "child"
console.log(child.age); // 3

Dans ce code, nous utilisons des accolades dans le motif de déstructuration , ce qui signifie qu'après avoir trouvé l'attribut fils dans l'objet père, nous devons aller un niveau plus loin et continuer à rechercher l'attribut enfant. Dans l'exemple de déconstruction ci-dessus, tous les identifiants avant les deux-points représentent la position de récupération dans l' objet , et le côté droit de celui-ci est le nom de la variable à attribuer ; s'il y a des accolades après les deux-points , cela signifie que la valeur finale à être attribué est imbriqué à un niveau plus profond dans l'objet .

Deux, déconstruction de tableau

(1) Compréhension : Définir un tableau, puis extraire des valeurs et attribuer des valeurs aux variables selon les positions correspondantes. Il utilise des littéraux de tableau et toutes les opérations de déstructuration sont effectuées dans le tableau.

 const num = [1, 2, 3];
 const [a, b, c] = num ;
 console.log(a)     // a=1
 console.log(b)     // b=2
 console.log(c)     // c=3

Dans ce code, nous déconstruisons les trois valeurs "1", "2" et "3" du tableau num et les stockons dans les variables a, b et c respectivement. Le résultat après déconstruction : a=1, b=2, c=3. Si la déstructuration échoue, la valeur de la variable est indéfinie.

(2) En mode déconstruction, les éléments peuvent également être omis directement, et seuls les noms de variables sont fournis pour les éléments d'intérêt.

const people = [ "lisa", "jack", "lucy" ];
const [ , , thirdPerson] = people;
console.log(thirdPerson);  // "3"

Ce code utilise une syntaxe d'affectation déstructurante pour obtenir le troisième élément de people. La virgule avant thirdPerson est un espace réservé pour l'élément précédent . Quel que soit le nombre d'éléments présents dans le tableau, vous pouvez utiliser cette méthode pour extraire l'élément souhaité. doivent être spécifiés pour chaque élément.

(3) Pour échanger des valeurs de variables dans ES6, utilisez simplement l'affectation de déstructuration directement, au lieu de concevoir une variable intermédiaire comme auparavant.

let a = 1,
    b = 2;
[ a, b ] = [ b, a ];
console.log(a); // 2
console.log(b); // 1

Lors de l'exécution du code, le tableau temporaire de droite est d'abord déstructuré, et les valeurs de b et a sont copiées dans les deux premières positions du tableau de gauche, le résultat final est que les variables échangent leurs valeurs.