Vous faire comprendre l'affectation de déstructuration JavaScript

concepts

du didacticiel d'apprentissage JavaScript

ES6 fournit un mode d'affectation plus concis pour extraire les valeurs des tableaux et des objets, appelé déstructuration

Exemple :

[a, b] = [50, 100] ;
console.log(a);
// résultat attendu : 50
console.log(b);
// résultat attendu : 100

[a, b, ... repos] = [10, 20, 30, 40, 50] ;
console.log(reste);
// résultat attendu : [30, 40, 50]

Déstructuration de tableau

La déstructuration de tableau est très simple et concise. Utilisez un littéral de tableau sur le côté gauche de l'expression d'affectation. Chaque nom de variable dans le littéral de tableau correspond au même index de la déstructuration. tableau. Que signifie l'élément

? Tout comme dans l'exemple ci-dessous, les éléments du tableau de gauche obtiennent les valeurs des index correspondants du tableau déstructuré de droite

soit [a, b, c] = [1, 2, 3];
// une = 1
// b = 2
// c = 3

déclare des affectations séparées.

Vous pouvez déconstruire les affectations séparément via des déclarations de variables.

Exemple : déclarer des variables, attribuer des valeurs séparément

// Déclarer des variables let a, b;
// Ensuite, attribuez les valeurs [a, b] = [1, 2] ;
console.log(a); // 1
console.log(b); // 2

Valeur par défaut de la déstructuration

Si la valeur retirée par la déstructuration est undefined , vous pouvez définir la valeur par défaut :

let a, b;
// Définir la valeur par défaut [a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7Dans

l'exemple ci-dessus, nous définissons les valeurs par défaut pour a et b. Dans ce cas, si la valeur de a ou b undefined , la valeur par défaut définie sera attribuée au correspondant. Les variables (5 est assigné à a, 7 est assigné à b)

échangent des valeurs de variables

Dans le passé, lorsque nous échangeions deux variables, nous utilisions toujours

//exchange abc = a;a = b;b = c

;

. Cependant, en déconstruction En affectation, on peut échanger les valeurs de deux variables dans une expression déstructurante

soit a = 1; soit b = 3;//Échanger les valeurs de a et b [a, b] = [b, a]; console.log( a); // 3console.log(b); // 1

Déconstruire le tableau retourné

fonction

.

  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b); // 20

Dans l'exemple ci-dessus, ** Le La valeur de retour [10, 20] de c()** peut être utilisée dans une ligne de code distincte

pour ignorer la valeur de retour (ou ignorer un certain élément)

Vous pouvez ignorer de manière sélective certaines valeurs de retour indésirables

de la fonction c (. ) {
  return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b); // 3

attribue la valeur restante du tableau à a; variable

lorsque vous utilisez la déstructuration de tableau, vous pouvez affecter toutes les parties restantes du tableau attribué à une variable

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

Dans ce cas, b deviendra également un tableau et les éléments du tableau sont tous les éléments restants

.
Attention ici, vous ne pouvez pas écrire de virgule à la fin. S'il y a une virgule supplémentaire, une erreur sera signalée

let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element. ne peut pas avoir de virgule finale

Déstructuration de tableaux imbriqués

Comme les objets, les tableaux peuvent également être imbriqués

Exemple :

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Utiliser la déstructuration imbriquée pour attribuer le rouge, le vert et le bleu
// Utiliser la déstructuration imbriquée pour attribuer du rouge, du vert et du bleu
const [hex, [rouge, vert, bleu]] = couleur;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

Déstructuration de chaînes

Dans la déstructuration de tableaux, si la cible de la déstructuration est un objet traversable, la déstructuration et l'affectation peuvent être effectuées. Données

let [a, b, c, d, e] = 'bonjour';/*
une = 'h'
b = 'e'
c = 'l'
d = 'l'
e = 'o'
*/

Déconstruction d'objet

Déconstruction d'objet de base

let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = abréviation de x;
console.log(z); // true

est attribué à un nouveau nom de variable.

Le nom de la variable peut être modifié lors de l'utilisation de la déstructuration d'objet

let o = { p: 22, q: true };
soit { p : foo, q : bar } = o ;

console.log(foo); // 22
console.log(bar); // vrai

code comme ci-dessus var {p: foo} = o obtient le nom de propriété p de l'objet o, puis l'assigne à une variable nommée foo

Déstructurant la valeur par défaut

. la déstructuration undefined ,Nous. Vous pouvez définir la valeur par défaut

let { a = 10, b = 5 } = { a: 3 };

console.log(a); // 3
console.log(b); // 5

Attribuez une valeur au nouvel objet et fournissez une valeur par défaut.

Comme mentionné précédemment, nous attribuons une valeur au nouvel objet. Ici, nous pouvons fournir une valeur par défaut pour le nouvel objet. , s'il n'est pas déconstruit, la valeur par défaut sera automatiquement utilisée

let { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); // 3
console.log(bb); // 5

Utiliser la déstructuration de tableaux et d'objets en même temps

Les tableaux et les objets peuvent être utilisés ensemble dans des structures

const props = [
  { identifiant : 1, nom : 'Fizz' },
  { identifiant : 2, nom : 'Buzz' },
  { identifiant : 3, nom : 'FizzBuzz' },
];

const [, , { nom }] = accessoires ;
console.log(name); // "FizzBuzz"

n'est pas complètement déconstruit

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//Ne pas déconstruire x

// x = non défini
// y = 'world'

attribue la valeur restante à un objet

let {a, b, ...rest} = {a : 10, b : 20, c : 30, d : 40} ;
// une = 10
// b = 20
// rest = {c : 30, d : 40}

Déstructuration d'objets imbriqués (la déstructuration peut être ignorée)

let obj = {p : ['hello', {y : 'world'}] } ;
soit {p : [x, { y }] } = obj ;
// x = 'bonjour'
// y = 'monde'
let obj = {p : ['bonjour', {y : 'monde'}] } ;
soit {p : [x, { }] } = obj;//ignorer y
// x = 'hello'

Remarque :

veillez à utiliser les variables déclarées pour

la démonstration d'erreur de déstructuration :

let x;{x} = {x: 1};

Le moteur JavaScript comprendra {x} comme un bloc de code, ce qui donnera une syntaxe. erreur, nous voulons éviter d'écrire les accolades au début de la ligne pour empêcher JavaScript de les interpréter comme un bloc de code

correcte

d'

écrire

 :

let

function add([x, y]) {
	return x + y;}add([1, 2]);

Dans le code ci-dessus, le paramètre de la fonction add est un tableau sur la surface, mais lors du passage du paramètre, le paramètre du tableau est déconstruit en variables x et y. la fonction En interne, cela revient à passer directement x et y.

l'

utilisation de l'affectation de déstructuration. Il existe de nombreuses façons

d'échanger les valeurs des variables

soit x = 1 ;
soit y = 2 ;
[x, y] = [y, x];

Le code ci-dessus échange les valeurs de x et y. Cette méthode d'écriture est non seulement concise mais également facile à lire et la sémantique est claire

. à partir d'une fonction

ne peut renvoyer qu'une seule valeur. Si vous souhaitez renvoyer plusieurs valeurs, nous ne pouvons placer ces valeurs que dans un tableau ou un objet et les renvoyer lorsque nous avons une affectation de déstructuration, en prenant ces valeurs. à partir de l'objet ou du tableau, c'est comme chercher quelque chose

// Renvoie un exemple de fonction de tableau() {
  return [1, 2, 3];}let [a, b, c] = exemple();
  // Renvoie une fonction objet example() {
  retour {
    foo : 1,
    barre : 2
  } ;
  }let { foo, bar } = example();

L'extraction de l'affectation de déstructuration des données JSON

est particulièrement utile pour extraire des données dans des objets JSON

Exemple :

let jsonData = {

  identifiant : 42,
  statut : "OK",
  données : [867, 5309]
} ;

let { id, status, data: number } = jsonData;

console.log(id, statut, numéro);
// 42, "OK", [867, 5309]

En utilisant le code ci-dessus, nous pouvons récupérer rapidement la valeur dans les données JSON

Recommandations associées : Tutoriel JavaScript

Ce qui précède vise à vous faire comprendre les détails de l'affectation de déstructuration JavaScript. plus d'informations, veuillez faire attention à php Autres articles connexes sur le site chinois !