Quelles sont les méthodes de déstructuration en es6

Cette fois, je vais vous apporter les méthodes de déconstruction es6 et quelles sont les précautions pour la déconstruction es6 Ce qui suit est un cas pratique, jetons un coup d'œil.

Soyez très prudent si vous souhaitez utiliser une variable déclarée pour une affectation de déstructuration.

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

Le code ci-dessus signalera une erreur car le moteur JavaScript comprendra {x} comme un bloc de code, ce qui entraînera une erreur de syntaxe. Ce problème ne peut être résolu qu'en n'écrivant pas l'accolade au début de la ligne pour empêcher JavaScript de l'interpréter comme un bloc de code.

// 正确的写法
let x;
({x} = {x: 1});

Si le nom de la variable n'est pas cohérent avec le nom de l'attribut, il doit être écrit comme suit.

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
//这实际上说明，对象的解构赋值是下面形式的简写
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

En d'autres termes, le mécanisme interne de déstructuration et d'affectation des objets consiste d'abord à rechercher l'attribut du même nom, puis à l'attribuer à la variable correspondante. Ce qui est réellement attribué, c'est la seconde solution et non la première.

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

Remarque : p est actuellement un modèle, pas une variable, donc aucune valeur ne lui sera attribuée. Si p doit également être affecté comme variable, il peut s’écrire comme suit.

let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

Lors de la déstructuration de l'affectation, si le côté droit du signe égal est une valeur numérique ou une valeur booléenne, il sera d'abord converti en objet

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true

Les paramètres de fonction peuvent également être attribués par déstructuration.

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

Dans le code ci-dessus, le paramètre de la fonction add est un tableau sur la surface, mais au moment où le paramètre est passé, le paramètre du tableau est déconstruit en variables x et y. Pour le code à l'intérieur de la fonction, les paramètres qu'ils peuvent ressentir sont x et y

undefined déclenchera la valeur par défaut du paramètre de fonction.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

La combinaison de balises HTML avec des nœuds DOM

js interdit les événements de retour du navigateur

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!