Déstructuration Javascript dans ES6

La chronique javascript d'aujourd'hui présente la déconstruction Javascript dans ES6.

La fonctionnalité de déstructuration d'ES6 nous permet d'obtenir plus facilement des valeurs à partir d'objets (Object) ou de tableaux (Array), et le code écrit est plus lisible sexuellement plus fort aussi. Les amis qui ont déjà été exposés au langage python devraient être familiers avec cela. Cette fonctionnalité a déjà été implémentée en python. En python, nous pouvons utiliser le code suivant pour obtenir la valeur des deux variables

lst = [3, 5]
first, second = lst 
print(first, second)复制代码

première et seconde, qui sont respectivement affectées à 3 et 5 dans le tableau.

Alors, avant que cette fonctionnalité ne soit disponible, comment obtenions-nous habituellement les valeurs des objets ou des tableaux ? Jetons un coup d'œil au code suivant :

let list = [3, 5]let first = list[0]let second = list[1]复制代码

Dans cette méthode, vous devez spécifier manuellement un index de tableau pour attribuer la valeur correspondante à la variable que vous spécifiez. Si vous utilisez la fonctionnalité de déstructuration d'ES6, le code deviendra plus simple et plus lisible :

let [first, second] = list;复制代码

Déstructuration d'objets

Déstructuration d'objets de base

Tout d'abord, jetons un coup d'œil sur comment écrire la déconstruction d'objet de base dans ES6 :

const family = {	father: ''
	mother: ''}const { father, mother } = family;复制代码

Nous déconstruisons ses deux attributs père et mère à partir de l'objet familial et les attribuons aux objets père et mère définis séparément. Après cela, on peut obtenir directement la valeur de la clé correspondante dans la famille grâce aux variables père et mère. Cet exemple est l'application la plus simple de déstructuration d'objets. Jetons un coup d'œil aux plus intéressantes.

Déstructuration d'objets non déclarés

Dans l'exemple ci-dessus, nous déclarons d'abord l'objet familial, puis obtenons la valeur via la syntaxe de déstructuration. Alors, est-ce que ça va si vous ne le déclarez pas :

const { father, mother } =  {father: '',mother: ''}复制代码

C'est en fait correct. Dans certains cas, nous n'avons pas besoin de déclarer un objet ou d'attribuer l'objet à une variable, puis de le déconstruire. Nous pouvons souvent déconstruire directement des objets non déclarés.

Déconstruire l'objet et renommer les variables

On peut également déconstruire les propriétés de l'objet et les renommer, comme :

const { father: f, mother:m } =  {father: '1',mother: '2'}console.log(f); // '1'复制代码

Dans le code ci-dessus, l'objet Après le père in est déconstruit, il est réaffecté à la variable f. Par rapport à l'exemple précédent, cela équivaut à renommer la variable père en f. Ensuite, vous pouvez utiliser f pour continuer l'opération.

Déconstruction de la valeur par défaut

Imaginez un scénario dans lequel un objet familial est renvoyé en arrière-plan. L'objet familial d'origine a trois attributs, à savoir le père, la mère et l'enfant. Vous obtenez les données renvoyées et déconstruisez ces trois attributs :

const { father, mother, child } =  {father: '1',mother: '2', child: '3'}复制代码

Cela semble bien, mais la réalité est toujours insatisfaisante. En raison d'un bug dans le code en arrière-plan, l'objet familial renvoyé ne contient que la mère et l'enfant, mais le père est manquant. À ce stade, après la déconstruction du code ci-dessus, le père deviendra indéfini :

const { father, mother, child } =  {father: '1',mother: '2'}console.log(child) //undefined复制代码

Plusieurs fois, nous souhaiterons déconstruire une valeur par défaut lorsqu'un certain attribut est manquant en arrière-plan. En fait, vous pouvez l'écrire comme ceci :

const { father = '1', mother = '2', child = '3'} =  {father: '1',mother: '2'}console.log(child) //'3'复制代码

En combinaison avec l'exemple précédent, vous pouvez changer le nom de la variable et lui attribuer une valeur par défaut :

const { father: f = '1', mother: m = '2', child: c = '3'} =  {father: '1',mother: '2'}复制代码

Déconstruire dans le paramètre de la fonction

const family = {	father: ''
	mother: ''}function log({father}){	console.log(father)
}
log(family)复制代码

in Parmi les paramètres de la fonction, les valeurs d'attribut des objets entrants et sortants peuvent être directement obtenues par déstructuration, sans qu'il soit nécessaire d'utiliser family.father pour les transmettre comme auparavant.

Déconstruction des objets imbriqués

Dans l'exemple ci-dessus, les attributs de famille n'ont qu'un seul niveau Si la valeur de certains attributs de famille est aussi un objet ou un tableau, comment les imbriquer ? sur la déconstruction des valeurs d'attribut de l'objet ? Jetons un coup d'oeil au code suivant :

const family = {	father: 'mike'
	mother: [{		name: 'mary'
	}]
}const { father, mother: [{	name:motherName
}]} = family;console.log(father); //'mike'console.log(motherName) //'mary'复制代码

Déstructuration des tableaux

La méthode de déstructuration des tableaux est en fait très similaire à celle des objets Elle a également été brièvement évoquée au début de l'article. , mais regardons les tableaux Quelques scènes typiques de déconstruction.

Déconstruction d'objet de base

const car = ['AUDI', 'BMW'];const [audi, bmw] = car;console.log(audi); // "AUDI"console.log(bmw); // "BMW"复制代码

Tant qu'elle correspond à la position du tableau, la valeur correspondante peut être correctement déconstruite.

Valeur par défaut de déstructuration

Identique au scénario de valeur par défaut de déstructuration d'objets Nous devons souvent également ajouter des valeurs par défaut lors de la déconstruction de tableaux pour répondre aux besoins de l'entreprise.

const car = ['AUDI', 'BMW'];const [audi, bmw, benz = 'BENZ'] = car;console.log(benz); // "BENZ"复制代码

Échange de variables en déstructuration

Supposons que nous ayons les deux variables suivantes :

let car1 = 'bmw';let car2 = 'audi'复制代码

Si nous voulons échanger ces deux variables, l'approche passée est :

let temp = car1;
car1 = car2;
car2 = temp;复制代码

doit être implémenté à l'aide d'une variable intermédiaire. Il est beaucoup plus simple d'utiliser la déconstruction du tableau :

let car1 = 'bmw';let car2 = 'audi'[car2, car1] = [car1, car2]console.log(car1); // 'audi'console.log(car2); // 'bmw'复制代码

Si vous souhaitez compléter l'échange des positions des éléments au sein d'un tableau, par exemple, échangez [1,2,3] avec [1,3, 2], alors il peut être implémenté comme ceci :

const arr = [1,2,3];
[arr[2], arr[1]] = [arr[1], arr[2]];console.log(arr); // [1,3,2]复制代码

Déconstruire le tableau à partir du retour de fonction

De nombreuses fonctions renverront des résultats de type tableau, et la valeur peut être obtenue directement par déstructuration du tableau :

functin fun(){	return [1,2,3]
}let a, b, c; 
[a, b, c] = fun();复制代码

Bien sûr, si nous voulons seulement que la fonction renvoie certaines valeurs du tableau, nous pouvons donc les ignorer

functin fun(){	return [1,2,3]
}let a, c; 
[a, , c] = fun();复制代码

Comme vous pouvez le voir, la fonctionnalité de déstructuration d'ES6 est très utile dans de nombreux scénarios. J'espère que tout le monde pourra appliquer davantage de déconstruction aux projets pour rendre le code plus simple, plus clair et plus facile à comprendre.

Recommandations d'apprentissage gratuites associées : javascript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!