Vai al contenuto principale

@babel/plugin-transform-destructuring

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

informazioni

Questo plugin è incluso in @babel/preset-env

Esempi​

In

JavaScript
let { x, y } = obj;

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

Out

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);

Installazione​

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

Utilizzo​

Con un file di configurazione (Consigliato)​

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

Tramite CLI​

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

Tramite Node API​

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

Opzioni​

loose​

boolean, predefinito false.

Abilitando questa opzione si presuppone che l'elemento da destrutturare sia un array e non verrà utilizzato Array.from su altri iterabili.

attenzione

Considera di migrare all'assunzione di livello superiore iterableIsArray.

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

useBuiltIns​

boolean, predefinito false.

Abilitando questa opzione verrà utilizzato Object.assign direttamente invece dell'helper extends di Babel.

Esempio​

.babelrc

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

In

JavaScript
var { ...x } = z;

Out

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

Maggiori informazioni sulla configurazione delle opzioni del plugin sono disponibili qui

allowArrayLike​

boolean, predefinito false

Aggiunto in: v7.10.0

Questa opzione consente la destrutturazione di oggetti array-like utilizzando la sintassi di destrutturazione degli array.

Un oggetto array-like è un oggetto con una proprietà length: ad esempio { 0: "a", 1: "b", length: 2 }. Nota che, come gli array veri, gli oggetti array-like possono avere "buchi": { 1: "a", length: 3 } equivale a [ (hole), "a", (hole) ].

Sebbene destrutturare oggetti array-like come se fossero array non sia conforme alle specifiche, esistono molti oggetti che sarebbero iterabili nei browser moderni con supporto a Symbol.iterator. Alcuni esempi degni di nota sono le collezioni DOM, come document.querySelectorAll("img.big"), che rappresentano il caso d'uso principale per questa opzione.

Nota che Babel consente la destrutturazione di arguments nei motori legacy anche quando questa opzione è disabilitata, poiché è definito come iterabile nelle specifiche ECMAScript.

attenzione

Considera di migrare all'assunzione di livello superiore arrayLikeIsIterable.

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

Riferimenti​