Saltar al contenido principal

@babel/plugin-transform-destructuring

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

información

Este plugin está incluido en @babel/preset-env

Ejemplos​

Entrada

JavaScript
let { x, y } = obj;

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

Salida

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

Instalación​

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

Uso​

Mediante un archivo de configuración (Recomendado)​

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

Mediante la CLI​

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

Mediante la API de Node​

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

Opciones​

loose​

boolean, valor predeterminado: false.

Habilitar esta opción asumirá que lo que deseas desestructurar es un array y no usará Array.from en otros iterables.

precaución

Considera migrar a la asunción de alto nivel iterableIsArray.

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

useBuiltIns​

boolean, valor predeterminado: false.

Habilitar esta opción usará Object.assign directamente en lugar del helper extends de Babel.

Ejemplo​

.babelrc

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

Entrada

JavaScript
var { ...x } = z;

Salida

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

Puedes leer más sobre cómo configurar opciones de plugins aquí

allowArrayLike​

boolean, valor predeterminado: false

Añadido en: v7.10.0

Esta opción permite desestructurar objetos tipo array usando la sintaxis de desestructuración de arrays.

Un objeto tipo array es un objeto con propiedad length: por ejemplo, { 0: "a", 1: "b", length: 2 }. Nota que, como los arrays reales, estos objetos pueden tener "huecos": { 1: "a", length: 3 } equivale a [ (hole), "a", (hole) ].

Aunque desestructurar objetos tipo array como si fueran arrays no cumple con la especificación, existen muchos objetos que serían iterables en navegadores modernos con soporte para Symbol.iterator. Ejemplos notables son las colecciones del DOM, como document.querySelectorAll("img.big"), que son el principal caso de uso para esta opción.

Ten en cuenta que Babel permite desestructurar arguments en motores antiguos incluso con esta opción deshabilitada, porque está definido como iterable en la especificación ECMAScript.

precaución

Considera migrar a la asunción de alto nivel arrayLikeIsIterable.

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

Referencias​