Qu'est-ce que la déconstruction es6

Dans es6, la déstructuration est le processus d'extraction de valeurs de tableaux et d'objets selon un certain modèle et d'attribution de valeurs aux variables ; il s'agit d'un processus consistant à diviser les résultats des données en parties plus petites, ce qui peut simplifier l'extraction d'informations Objectif ; les plus courantes incluent la déstructuration d'objets, la déstructuration de tableaux et la déstructuration mixte.

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

Qu'est-ce que 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.

Divisez les objets ou les tableaux existants un par un pour extraire les données dont vous avez besoin. Il s'agit d'un processus consistant à briser la structure des données et à la diviser en parties plus petites.

ES6 utilise un nouveau mode pour correspondre à la valeur que vous souhaitez extraire. L'affectation de déstructuration utilise ce mode. Le modèle cartographiera la structure de données que vous déconstruisez et seules les données qui correspondent au modèle seront extraites.

Exemple de 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é Lorsqu'il 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 d'une valeur

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

Regardez ce qui précède, pensez-vous que c'est étrange ? Les affectations d'objets traditionnelles ont quatre attributs à gauche et une valeur à droite. 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 l'affectation var, let, const n'est pas utilisée, l'instruction de déstructuration doit être enveloppée avec ()

（{type，name} = node);//{}在js中作为代码块，单独使用加等号会报错会报错

Déstructuration d'objets imbriqués

Déstructuration dans un objet imbriqué, nous continuerons à l'utiliser dans la déstructuration de premier niveau Les accolades sont utilisées pour rechercher plus profondément dans la couche suivante ; regardons d'abord un exemple :

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

Ce qui précède est un nœud d'objet imbriqué. Déconstruisons d'abord la première couche

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

et vous pouvez voir que nous avons délibérément perturbé les attributs. {}, les résultats sont toujours affichés correctement, vous pouvez donc deviner que la méthode spécifique correspondante doit être basée sur le nom et n'a rien à voir avec 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.

【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!