Acabo de mirar el script compilado de mi código fuente y creo que noté algo extraño.
Este código ES6:
const data = {someProperty:1, someNamedPropery: 1, test:1}; const { someProperty, // Just gets with 'someProperty' peoperty someNamedPropery: changedName, // Works same way, but gets with 'changedName' property test: changedNameWithDefault = 1, // This one, introduces new variable and then uses it to compare that to void 0 } = data;Compila a esto:
"use strict"; const data = {someProperty:1, someNamedPropery: 1, test:1}; var someProperty = data.someProperty, changedName = data.someNamedPropery, _data$test = data.test, changedNameWithDefault = _data$test === void 0 ? 1 : _data$test; Tengo curiosidad por qué Babel introduce la nueva variable _data$test . ¿No puede ser algo como esto?
... changedNameWithDefault = data.test === void 0 ? 1 : data.test;Aún funciona.
Tenga en cuenta que la introducción de una nueva variable ocurre solo cuando intento asignar un valor predeterminado si la clave no está presente en la variable de data o no está undefined .
¿Esto afecta el rendimiento de la aplicación si data.test es lo suficientemente grande? Y me pregunto si Garbage Collector se encarga de eso (variable _data$test ).
¿No puede ser algo como esto?
No, pero es un poco sutil por qué no: si test es una propiedad de acceso, acceder a ella es una llamada de función. El código de desestructuración, y la traducción de Babel del mismo, solo llamará al accesor una vez. Su cambio lo llamaría dos veces. Aquí hay un ejemplo:
const data = { someProperty:1, someNamedPropery: 1, get test() { console.log(" test called"); return 1; }, }; function es2015OriginalCode() { const { someProperty, someNamedPropery: changedName, test: changedNameWithDefault = 1, } = data; console.log(` changedNameWithDefault = ${changedNameWithDefault}`); } function babelCode() { "use strict"; var someProperty = data.someProperty, changedName = data.someNamedPropery, _data$test = data.test, changedNameWithDefault = _data$test === void 0 ? 1 : _data$test; console.log(` changedNameWithDefault = ${changedNameWithDefault}`); } function yourCode() { "use strict"; var someProperty = data.someProperty, changedName = data.someNamedPropery, changedNameWithDefault = data.test === void 0 ? 1 : data.test; console.log(` changedNameWithDefault = ${changedNameWithDefault}`); } console.log("ES2015 original code:"); es2015OriginalCode(); console.log("Babel's code:"); babelCode(); console.log("Your code:"); yourCode(); .as-console-wrapper { max-height: 100% !important; } Si bien podemos decir al observar el código que test no es una propiedad de acceso en ese ejemplo específico, las transformaciones de código generalmente no funcionan con tanto contexto, por lo que esta es la forma general más segura de traducir ese código.