javascript - Neden Babel, bir nesneden özellik ayırırken kullanılmayan bir değişken ekliyor?

Kaynak kodumun derlenmiş betiğine baktım ve garip bir şey fark ettiğimi düşünüyorum.

Bu ES6 kodu:

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;

Buna derlenir:

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

Babel'in neden yeni bir değişken _data$test tanıttığını merak ediyorum. Bu sadece böyle bir şey olamaz mı?

...
changedNameWithDefault = data.test === void 0 ? 1 : data.test;

Hâlâ çalışıyor.

Dikkat edin, yeni değişken tanıtımı yalnızca data değişkeninde anahtar mevcut değilse veya undefined ise varsayılan değer atamaya çalıştığımda gerçekleşir.

Eğer data.test yeterince büyükse, bu uygulama performansını etkiler mi? Ve merak ediyorum, Çöp Toplayıcı bununla (_data$test değişkeni) ilgileniyor mu?

Cevap #1

Böyle bir şey olamaz mı?

Hayır, ama neden olamayacağı biraz incelikli: Eğer test bir erişimci özellikse, ona erişmek bir fonksiyon çağrısıdır. Yapıbozumu kodu ve Babel’in onun çevirisi, yalnızca erişimciyi bir kez çağıracaktır. Sizin değişikliğiniz ise onu iki kez çağıracaktır. İşte bir örnek:

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

Koda bakarak test in o belirli örnekte bir erişici özellik olmadığını söyleyebilsek de, kod dönüşümleri genellikle bu kadar bağlamla çalışmaz, bu yüzden bu kodu çevirmek için daha güvenli genel durum yolu budur.