Javascript 使用ES6地图从react道具构建阵列

我想用以下形式构造一个数组：

 droppableIds = {
    droppable1: 'list1',
    droppable2: 'list2',
    droppable3: 'list3'
  }

目前它是硬编码的，但我想抽象它来处理不同数量的列表。我已经走了这么远，但是我被正确的语法绊倒了：

  droppableIds = this.props.boxes.map(function(index) {
    const n = '' + index; //convert to string
    return droppable + n + ':' + 'list' + n
  });

道具盒看起来像这样

console.log('this.props.boxes: ', this.props.boxes, typeof this.props.boxes, Array.isArray(this.props.boxes)); 

返回：

this.props.box:数组（3）对象真实数组（3）

---

我相信您希望在遍历框时将框转换为具有与索引匹配的键/值对的对象。如果是这种情况，您可能希望使用reduce，而不是map（因为droppableIds是一个对象，map总是返回一个数组）

所以

---

您可以看到，我正在传递一个函数作为要reduce的第一个参数，传递一个新对象作为第二个参数。无需转换索引号，因为强制将在您尝试将其添加到字符串的那一分钟完成转换。

假设

this.props.box

是一个数组，您可以使用

forEach

函数和a生成所需的结果

如果

this.props.box

的结构类似于

['list1'，'list2'，'list3']

您可以执行以下操作（基本示例）

---

看起来您想要构造一个对象

{}

，而不是一个数组

[]

。假设

this.props.box

是一个数组，构建对象的一种方法是使用：

idx+1

，因为从您的示例来看，您希望键和值从1开始，而不是从0开始

---

编辑：我还应该补充一点，因为您要求ES6，所以我使用了字符串、对象和一个。

映射将返回一个数组。您可以使用loop-through-box的forEach函数并添加您想要添加的属性，对于您的情况，这将起作用

const droppableIds = {};
     this.props.boxes.forEach(function(box , index) {
     const n = '' + index; 
     droppableIds['droppable'+n] = 'list'+n;
});

---

使用ES6完成的操作如下所示：

var框=[{
标题：“软目标”，
组别:1
},
{
标题：“硬目标”，
组别:2
},
{
标题：“开始”，
组别:0
}
]
var droppableIds=box.map（（x，i）=>（{[`droppable${i+1}`]：x}））
log（droppableIds）

这是第一个代码段中的对象，而不是数组。你的

this.props.box

数组是什么样子的？这是数组还是对象？也许你把es6映射对象和array.Map函数搞混了？与。为了使您的问题完整，请提供道具对象作为输入，并根据所需输出进行调整。这样，收到的答案将更加准确和中肯。

droppableIds = this.props.boxes.reduce(function(memo, val, index) {
  memo['droppable' + index] = 'list' + index;
  return memo;
}, {})

let droppableIds = new Map();

this.props.boxes.forEach((box, index) => {
   let key = droppable+index;
   droppableIds.set(key, box);
})

const droppableIds = this.props.boxes.reduce((res, val, idx) => {
  return { ...res, [`droppable${idx + 1}`]: `list${idx + 1}`}
}, {})

const droppableIds = {};
     this.props.boxes.forEach(function(box , index) {
     const n = '' + index; 
     droppableIds['droppable'+n] = 'list'+n;
});