Aller au contenu principal

Plugin de transformation de la déstructuration - @babel/plugin-transform-destructuring

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

info

Ce plugin est inclus dans @babel/preset-env

Exemples​

Entrée

JavaScript
let { x, y } = obj;

let [a, b, ...rest] = arr;

Sortie

JavaScript
function _toArray(arr) { ... }

let _obj = obj,
    x = _obj.x,
    y = _obj.y;

let _arr = arr,
    _arr2 = _toArray(_arr),
    a = _arr2[0],
    b = _arr2[1],
    rest = _arr2.slice(2);

Installation​

npm install --save-dev @babel/plugin-transform-destructuring

Utilisation​

Avec un fichier de configuration (Recommandé)​

babel.config.json
{
  "plugins": ["@babel/plugin-transform-destructuring"]
}

Via CLI​

Shell
babel --plugins @babel/plugin-transform-destructuring script.js

Via l'API Node​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-destructuring"],
});

Options​

loose​

boolean, valeur par défaut : false.

Activer cette option supposera que ce que vous souhaitez déstructurer est un tableau et n'utilisera pas Array.from pour d'autres itérables.

attention

Envisagez de migrer vers l'hypothèse de haut niveau iterableIsArray.

babel.config.json
{
  "assumptions": {
    "iterableIsArray": true
  }
}

useBuiltIns​

boolean, valeur par défaut : false.

Activer cette option utilisera Object.assign directement au lieu de l'assistant extends de Babel.

Exemple​

.babelrc

babel.config.json
{
  "plugins": [
    ["@babel/plugin-transform-destructuring", { "useBuiltIns": true }]
  ]
}

Entrée

JavaScript
var { ...x } = z;

Sortie

JavaScript
var _z = z,
  x = Object.assign({}, _z);
astuce

Vous pouvez en savoir plus sur la configuration des options de plugin ici

allowArrayLike​

boolean, valeur par défaut : false

Ajouté dans : v7.10.0

Cette option permet de déstructurer des objets semblables à des tableaux en utilisant la syntaxe de déstructuration de tableau.

Un objet semblable à un tableau est un objet possédant une propriété length : par exemple, { 0: "a", 1: "b", length: 2 }. Notez que, comme les vrais tableaux, ces objets peuvent avoir des "trous" : { 1: "a", length: 3 } est équivalent à [ (hole), "a", (hole) ].

Bien qu'il ne soit pas conforme aux spécifications de déstructurer des objets semblables à des tableaux comme s'ils étaient des tableaux, de nombreux objets seraient considérés comme itérables dans les navigateurs modernes avec le support de Symbol.iterator. Parmi les exemples notables figurent les collections DOM, comme document.querySelectorAll("img.big"), qui constituent le principal cas d'utilisation de cette option.

Veuillez noter que Babel permet la déstructuration des arguments dans les anciens moteurs même si cette option est désactivée, car ils sont définis comme itérables dans la spécification ECMAScript.

attention

Envisagez de migrer vers l'hypothèse de haut niveau arrayLikeIsIterable.

babel.config.json
{
  "assumptions": {
    "arrayLikeIsIterable": true
  }
}

Références​