Déconstruction Javascript dans ES6

La fonction de déstructuration d'ES6 nous permet d'obtenir plus facilement des valeurs d'objets (Object) ou de tableaux (Array), et le code écrit est plus lisible. Ceux qui ont déjà été en contact avec le langage python doivent être familiarisés 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

lst = [3, 5]
first, second = lst 
print(first, second)

Les première et deuxième variables sont respectivement affectées à 3 et 5. Est-ce très simple et clair?

Avant cette fonctionnalité, comment obtenons-nous généralement des valeurs d'objets ou de tableaux? Jetez un œil au code suivant:

let list = [3, 5]
let first = list[0]
let second = list[1]

De cette manière, vous devez spécifier manuellement un indice de tableau pour affecter la valeur correspondante à la variable que vous spécifiez. Ensuite, si vous utilisez la fonction de déconstruction d'ES6, le code deviendra plus concis et plus lisible:

let [first, second] = list;

Déconstruction d'objets

Déconstruction de l'objet de base

Voyons d'abord comment écrire la déstructuration d'objets de base dans ES6:

const family = {
    
    
	father: ''
	mother: ''
}
const {
    
     father, mother } = family;

Nous avons déconstruit ses deux attributs père et mère de l'objet familial et les avons attribués aux objets père et mère autrement définis. Après cela, nous pouvons obtenir directement la valeur de la clé correspondante dans la famille via les variables père et mère. Cet exemple est l’application la plus simple d’objets de déstructuration, jetons un œil aux plus intéressants.

Déconstruire les objets non déclarés

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

const {
    
     father, mother } =  {
    
    father: '',mother: ''}

En fait, c'est également possible: dans certains cas, nous n'avons pas besoin de déclarer spécifiquement un objet ou d'affecter un objet à une variable, puis de le déconstruire. Plusieurs fois, nous pouvons directement déconstruire des objets non déclarés.

Déconstruire des objets et renommer des variables

Nous pouvons également déconstruire les propriétés de l'objet et les renommer, par exemple:

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

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

Déconstruire la valeur par défaut

Imaginez un scénario où un objet familial est renvoyé en arrière-plan. L'objet familial a initialement accepté d'avoir 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 ne semble pas être un problème, mais la réalité est toujours insatisfaisante. En raison d'un bogue dans le code en arrière-plan, seuls la mère et l'enfant sont inclus dans l'objet famille retourné et le père est omis. À ce moment, 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 voulons déconstruire une valeur par défaut lorsque nous manquons une certaine propriété en arrière-plan. Cela peut en fait être écrit 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 à la fois modifier le nom de la quantité et attribuer la valeur par défaut:

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

Déconstruction dans les paramètres de fonction

const family = {
    
    
	father: ''
	mother: ''
}
function log({
    
    father}){
    
    
	console.log(father)
}
log(family)

Dans les paramètres de la fonction, en utilisant la méthode de déconstruction, vous pouvez obtenir directement les valeurs d'attribut des objets entrants et sortants, sans avoir besoin d'utiliser family.father pour passer comme auparavant.

Déconstruire les objets imbriqués

Dans l'exemple ci-dessus, les attributs de la famille n'ont qu'un seul niveau. Si la valeur de certains des attributs de la famille est également un objet ou un tableau, comment déconstruire les valeurs d'attribut de ces objets imbriqués? Jetez un œil 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éconstruction du tableau

La méthode de déconstruction des tableaux est en fait très similaire à celle des objets, qui est mentionnée au début de l'article, mais jetons un coup d'œil à quelques scénarios typiques de déconstruction de tableaux.

Déconstruction de l'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.

Déconstruire la valeur par défaut

Dans le scénario de valeur par défaut de la même déconstruction d'objet, nous devons souvent ajouter des valeurs par défaut lors de la déconstruction du tableau 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 dans la déconstruction

Supposons que nous ayons les deux variables suivantes:

let car1 = 'bmw';
let car2 = 'audi'

Si nous voulons échanger ces deux variables, la pratique passée est:

let temp = car1;
car1 = car2;
car2 = temp;

Besoin d'utiliser une variable intermédiaire pour atteindre. Il est beaucoup plus simple d'utiliser la déstructuration des tableaux:

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

Si vous souhaitez terminer l'échange de positions d'élément dans un tableau, par exemple, échangez [1,2,3] en [1,3,2], alors vous pouvez le faire:

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

Détruire le tableau à partir du retour de la fonction

De nombreuses fonctions renvoient le résultat du type de tableau, et la valeur peut être obtenue directement par déstructuration de tableau:

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

Bien sûr, si nous voulons que la fonction renvoie uniquement certaines des valeurs du tableau, nous pouvons également les ignorer

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

Comme vous pouvez le voir, les fonctionnalités de déconstruction d'ES6 sont très utiles dans de nombreux scénarios. J'espère que vous pourrez appliquer davantage la déconstruction à vos projets, en rendant le code plus simple, plus clair et plus facile à comprendre.