Que signifie la déconstruction dans es6 ?

Dans es6, la déstructuration fait référence à l'acte d'extraire des valeurs de tableaux et d'objets selon un certain modèle et d'attribuer des valeurs à des variables ; les plus courantes incluent la structure d'objet, la déstructuration de tableaux et la déstructuration mixte, qui est un moyen de décomposition. la structure des données dans une plus petite partie du processus, simplifiant ainsi l'objectif d'extraction d'informations.

L'environnement d'exploitation de ce tutoriel : système Windows 10, ECMAScript version 6.0, ordinateur Dell G3.

Que signifie la déstructuration dans es6 ?

déstructuration : Baidu Encyclopedia signifie décomposition structurelle. ES6 vous permet d'extraire des valeurs de tableaux et d'objets et d'attribuer des valeurs à des variables selon certains modèles.

Les plus courantes en développement incluent la déstructuration d'objets, la déstructuration de tableaux et la déstructuration mixte. Il s'agit d'un processus de décomposition d'une structure de données en parties plus petites pour simplifier l'extraction des informations.

Déstructuration d'objet

Méthode traditionnelle pour obtenir la valeur dans l'objet

let node = {
    type: 'Identifier',
    name: 'foo'
}
console.log(node.type) // Identifier
console.log(node.foo) // foo

Utiliser la déstructuration

let node = {
    type: 'Identifier',
    name: 'foo'
}
let { type, name } = node
console.log(type) // Identifier
console.log(name) // foo

Si le nom de variable locale spécifié n'existe pas dans l'objet, alors la variable locale se verra attribuer la valeur non définie

let { type, name, value } = node
console.log(type) // Identifier
console.log(name) // foo
console.log(value) // undefined

Lorsque l'attribut spécifié n'existe pas, vous pouvez définir n'importe quelle valeur par défaut pour l'attribut inexistant

let { type, name, value = true } = node
console.log(type) // Identifier
console.log(name) // foo
console.log(value) // true

Spécifiez un nouveau nom de variable pour la déstructuration et l'attribution

let arr = {
  six: '男',
  age: 19
}
let {six:newSix, age:newAge} = arr
console.log(six, age) // six is not defined
console.log(newSix, newAge) // 男 19

Pensez-vous que c'est étrange par rapport à ce qui précède ? les affectations d'objets ont quatre attributs à gauche et quatre attributs à droite sont la valeur. Mais dans la déstructuration, le côté droit est l'attribut et le côté gauche est la valeur, donc le nouveau nom de variable est sur le côté droit.

Si vous utilisez let, var ou const pour déstructurer un objet, la valeur de l'objet déstructuré ne doit pas exister.

Lorsque les affectations var, let et const ne sont pas utilisées, l'instruction de déstructuration doit être enveloppée avec ()

({type, name} = node);//{} est utilisé comme bloc de code dans Using js. le signe égal seul sera signalé. Les erreurs seront signalées

Déstructuration d'objets imbriqués

Déstructuration dans des objets imbriqués d'objets, nous continuerons à utiliser des accolades dans le premier niveau de déstructuration pour passer au niveau suivant et regarder une châtaigne ; d'abord :

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
}

Ci-dessus Il s'agit d'un nœud d'objet imbriqué. Déconstruisons d'abord le premier calque

let { loc, type, name } = node // {} Identifier foo

Vous pouvez voir que nous avons délibérément perturbé l'ordre des attributs dans {}, et le résultat est toujours affiché correctement, afin que nous puissions. Je suppose que la méthode correspondante spécifique doit être basée sur le name , quel que soit l'ordre.

Continuez à déconstruire la deuxième couche

let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 4

Ici, nous pouvons également attribuer start à une nouvelle variable locale personnalisée. Supposons que nous l'attribuions à newStart

let { loc: { start: newStart }} = node
console.log(newStart.line) // 1
console.log(newStart.column) // 4

Le résumé est le suivant :

Tous les identifiants avant les deux-points représentent la position de récupération dans. l'objet dont le côté droit est le nom de la variable à attribuer ; si les deux points sont suivis d'accolades, cela signifie que la valeur finale à attribuer est imbriquée dans un niveau plus profond au sein de l'objet.

Déstructuration de tableau

La déstructuration de tableau utilise des littéraux de tableau, et toutes les opérations de déstructuration sont effectuées dans le tableau, et la déstructuration de tableau n'a pas besoin d'utiliser les propriétés nommées de l'objet comme la syntaxe littérale d'objet.

let colors = [ 'red', 'green', 'blue' ]
let [ firstColor, secondColor ] = colors
console.log(firstColor) // 'red'
console.log(secondColor) // 'green'

Dans la syntaxe de déstructuration de tableau, nous sélectionnons principalement la valeur par sa position dans le tableau, et elle peut être stockée dans n'importe quelle variable. Les éléments qui ne sont pas explicitement déclarés seront directement ignorés.

let [ , , thirdColor ] = colors
console.log(thirdColor) // 'blue'

Échange de variables dans la déstructuration de tableaux

Dans ES5 traditionnel, l'échange de valeurs nécessite généralement l'introduction d'une troisième variable temporaire en tant que transfert, mais si vous utilisez la syntaxe d'affectation de déstructuration de tableau, il n'est pas nécessaire d'ajouter des variables supplémentaires.

// ES5中互换值：
 let a = 1, b = 2, tmp;
 tmp = a
 a = b
 b = tmp
 console.log(a, b) // 2, 1
 // ES6中互换值
 let a = 1, b = 2;
 [ a, b ] = [b, a]
 console.log(a, b) // 2, 1

Déstructuration des données imbriquées

 let colors = [ 'red', [ 'green', 'lightgreen'], 'blue' ]
 let [ firstColor, [ secondColor, thirdColor ], fourthColor ] = colors
 console.log(firstColor) // red
console.log(secondColor) // green
console.log(thirdColor) // lightgreen
console.log(fourthColor) // blue

Valeur par défaut

Vous pouvez également ajouter une valeur par défaut pour n'importe quelle position du tableau dans l'expression d'affectation de déstructuration du tableau. Lorsque l'attribut à la position spécifiée n'existe pas ou que sa valeur n'est pas définie, le la valeur par défaut est utilisée

let colors = [ 'red' ]
let [ firstColor, secondColor = 'green' ] = colors
console.log(firstColor) // red
console.log(secondColor) // green

Élément indéfini

... Nous devrions tous connaître son objectif en tant qu'opérateur d'expansion. Il peut être utilisé pour développer le tableau en une chaîne lors de l'utilisation d'un tableau. Lors de la déstructuration d'un tableau, les éléments restants du tableau peuvent être affectés à une variable spécifique en utilisant la syntaxe....

let colors = [ 'red', 'green', 'blue' ]
let [ firstColor, ...restColors ] = colors
console.log(firstColosr) // 'red'
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"

Copie de tableau

Dans ES5, les développeurs utilisent souvent la méthode concat() pour cloner des tableaux

var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"

La méthode concat() est conçue à l'origine pour connecter deux tableaux. Si aucun paramètre n'est transmis lors de l'appel, la fonction actuelle sera. renvoyé. Une copie de

Dans ES6, le même objectif peut être atteint grâce à la syntaxe des éléments indéfinis

let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"

Dans le tableau déstructuré, l'élément indéfini doit être la dernière entrée, et l'ajout de virgules après entraînera le lancement du programme. une erreur de syntaxe.

Déconstruction mixte

let err = {
    errors: [
        {
            msg: 'this is a message'
        },
        {
            title: 'this is a title'
        }
    ]
}

Dans le code ci-dessus, l'objet err contient des erreurs, les erreurs sont un tableau et contiennent de nouveaux objets, et le msg dans l'objet est extrait. Nous pouvons démonter la châtaigne ci-dessus étape par étape et la déconstruire :

let { errors } = err
let [ firstArr ] = errors
let { msg } = firstArr
console.log(msg) // 'this is a message'
也可以这样解构
let [ , { title }] = err.errors
console.log(title) // 'this is a title'
let [{ msg }] = err.errors
console.log(msg) // 'this is a message'

Regardons une châtaigne plus compliquée. En fait, tant que vous pouvez trouver l'ordre, cela reste très simple à comprendre.

let node = {
    type: "Identifier",
    loc: {
      start: {
      line: 1,
      column: 1
       }
    },
    range: [0, 3]
};
let {
    loc: { start },
    range: [ startIndex ]
  } = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0

Utilisation réelle - La déstructuration des paramètres

est généralement utilisée lors de l'encapsulation des paramètres de fonction, comme indiqué ci-dessous :

// options 上的属性表示附加参数
function setCookie(name, value, options) {
       options = options || {};
       let secure = options.secure,
       path = options.path,
       domain = options.domain,
       expires = options.expires;
       // 设置 cookie 的代码
}
//可以改写为：对options进行解构并赋予默认值
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}

[Recommandations associées : tutoriel vidéo javascript, front-end web]

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!