在 JavaScript 中，如何使用 for 循环迭代器编号使对象属性键唯一？答案

【问题标题】：In JavaScript how to use a for loop iterator number to make object property keys unique?在 JavaScript 中，如何使用 for 循环迭代器编号使对象属性键唯一？
【发布时间】：2019-08-10 07:41:39
【问题描述】：

我有一个对象，我需要用唯一的属性名称和数据填充它，并在 for 循环中动态构建它。我想使用 for 循环迭代器编号附加到属性名称（只是为了使其唯一），但是由于我已经向父属性添加了一个变量，所以我对实现这一点的语法感到困惑。

这概述了我想要实现的结果对象结构。需要添加迭代器号的属性有 slotContent0、slotContent1 等。

slotObj
    slot1
          slotContent0 
              templateNo: '1',
              assetId: 'asset-123'
          slotContent1
              templateNo: '4',
              assetId: 'asset-234'
    slot2
          slotContent0
              templateNo: '1',
              assetId: 'asset-456'
          slotContent1
              templateNo: '4',
              assetId: 'asset-678'
          slotContent2
              templateNo: '4',
              assetId: 'asset-879'
    slot3
    etc...

这是我目前的代码。

var slotObj = {};
var slotId = 'slot1' // hardcoded for SO but this is populated via a parent for loop so would be dynamic ie. slot1, slot2, slot3 etc

for (var i = 0; i < assetList.length; i++) {

    var assetItem = assetList[i];

    slotObj[slotId] = {
        'slotContent': { // <-- how to make this unique using iterator ie. slotContent0, slotContent1 etc...
            'templateNo': assetItem.dataset.template,
            'assetId': assetItem.dataset.contentId
        }
    }
}

所以总结一下如何将 for 循环迭代器 [i] 附加到我的 slotContent 属性？

【问题讨论】：

你真的应该使用数组来代替。
How to use a variable for a key in a JavaScript object literal?的可能重复
请问您为什么要实现这个目标？使用数组你会得到相同的结果，你的属性看起来就像它们带有相同类型的对象，毕竟......
这是个坏主意。使用数组。
@Damodog 我的意思是const slotObj = [[{templateNo: '1', assetId: 'asset-123'}, {templateNo: '4', assetId: 'asset-234'}], […], …];

标签： javascript for-loop javascript-objects

【解决方案1】：

您可以使用方括号表示法来生成密钥：

    slotObj[slotId] = {
        ['slotContent' + i]: { // <-- made unique using iterator ;)
            'templateNo': assetItem.dataset.template,
            'assetId': assetItem.dataset.contentId
        }
    }

【讨论】：

【解决方案2】：

let slotObj = {};
let slotId = 'slot1' // hardcoded for SO but this is populated via a parent for loop so would be slot2, slot3 etc
slotObj[slotId] = {};

for (let i = 0; i < assetList.length; i++) {

    let assetItem = assetList[i];

    slotObj[slotId]['slotContent'+i] = 
    { // <-- how to make this unique using iterator ie. slotContent0, slotContent1 etc...
        'templateNo': assetItem.dataset.template,
        'assetId': assetItem.dataset.contentId
    }
}

【讨论】：

谢谢@alexey-zelenin 这就是我要找的！ :-) 以上工作完美！

【解决方案3】：

我不认为，您可以使用 JSON 语法来实现这一点。但是，您可以一一分配属性：

for (var i = 0; i < assetList.length; i++) {
  var assetItem = assetList[i];

  slotObj[slotId] = {};
  slotObj[slotId]['slotContent' + i] = {
    'templateNo': assetItem.dataset.template,
    'assetId': assetItem.dataset.contentId
  };
}

【讨论】：

在 ES6 中也称为“计算属性名称”：es6-features.org/#ComputedPropertyNames
slotObj[slotId] = {}; 肯定需要在循环之外
@noviewpoint 不，这与计算的属性名称无关，它们是用于对象文字的。也许您打算对 Mattias 的回答发表评论？
是的，你是对的，我评论错了答案:)

【解决方案4】：

您可以使用template literal；

  slotObj[slotId] = {
      `slotContent${i}`: { // <-- how to make this unique using iterator ie. slotContent0, slotContent1 etc...
          'templateNo': assetItem.dataset.template,
          'assetId': assetItem.dataset.contentId
      }
  }

【讨论】：