如何在ES5中使用計算的屬性名稱？

Question

我想要一個經過計算的屬性名稱。 我看到您可以在ES6中使用它。 但是它應該與IOS Webview兼容。 所以我不能使用ES6。 而且，如果這會使某人更容易，則計算出的名稱在循環內也將始終相同。

有任何想法嗎？

var today = moment().format('DD.MM.YY');
for (var i = 0; i < 5; i++) {
    initialData.push(
         {
            dates: {
                "01.01.01": false
                 // instead of 01.01.01 i would like to have the value of today as the key
            }
        }
    )
}

Answer 1

您必須在ES5中精心制作：

var today  = moment().format('DD.MM.YY');
var obj    = {};
obj[today] = false;
for (var i = 0; i < 5; i++) {
  initialData.push({ dates: obj });
}

（或者如果每次迭代都不同，則將obj的創建移入循環內）

Answer 2

如果您碰巧擁有充滿ES6 +語法的代碼（例如計算所得的屬性名稱），並且想要使其與ES5兼容，那么到目前為止，最簡單的方法是使用Babel這樣的編譯器為您自動完成 。 這樣一來，您就可以使用該語言的最新版本和最具可讀性的代碼來編寫源代碼，同時允許過時的瀏覽器了解已轉譯的代碼， 而不必自己搞亂丑陋的ES5語法。

例如，如果您有想要使ES5兼容的看起來像這樣的源代碼：

 const prop1 = 'foo'; const prop2 = 'bar'; const prop3 = 'baz'; const obj = { [prop1]: 'val1', [prop2]: 'val2', [prop3]: 'val3', }; console.log(obj); 

您可以通過Babel運行它並自動獲取ES5版本：

 "use strict"; var _obj; function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } var prop1 = "foo"; var prop2 = "bar"; var prop3 = "baz"; var obj = ((_obj = {}), _defineProperty(_obj, prop1, "val1"), _defineProperty(_obj, prop2, "val2"), _defineProperty(_obj, prop3, "val3"), _obj); console.log(obj); 

所轉換的代碼可能看起來有些丑陋，但是大多數時候，您甚至不需要查看它，只需將其提供給客戶端即可使用，即使在Internet Explorer之類的陳舊環境中也可以使用。