Question

我想以这种形式构造一个数组：

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

props.boxes看起来像这样

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

返回：

this.props.boxes：Array（3）对象为true Array（3）

console.log(this.props.boxes)

0: {title: "Soft Targets", group: "1"} 
1: {title: "Hard Targets", group: "2"} 
2: {title: "Start ", group: "0"}

Answer 1

使用ES6完成的操作看起来像这样：

var boxes = [{
    title: "Soft Targets",
    group: 1
  },
  {
    title: "Hard Targets",
    group: 2
  },
  {
    title: "Start",
    group: 0
  }
]

var droppableIds = boxes.map((x, i) => ({ [`droppable${i+1}`]: x }))

console.log(droppableIds)

不确定确切目的。最初，我以为您希望列出实际的属性，等等。

boxes.map((x, i) => ({ [`droppable${i+1}`] : x }))

该怎么做？

使用带有箭头功能.map((x, i) =>的ES6映射，其中x是下一项，i是该函数中的当前索引
使用模板文字droppable${i+1}，在其中i加上1，因为您想要的结果从1开始
使用[]表示法[droppable${i+1}]组成最终返回对象

Answer 2

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

所以

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

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

Answer 3

假设this.props.boxes是一个数组，则可以使用forEach函数和Map()来产生您想要的结果。

如果this.props.boxes具有['list1','list2','list3']这样的结构，则可以执行以下操作（基本示例）。

let droppableIds = new Map();

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

Answer 4

您似乎想构造一个对象{}而不是数组[]。假设this.props.boxes是一个数组，构造对象的一种方法是使用reduce：

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

idx + 1，因为在您的示例中，您似乎希望键和值从1而不是0开始。

编辑：我还应该补充一点，由于您要求使用ES6，因此我使用了字符串template literals，对象spread synax和arrow function。

Answer 5

Map将返回一个数组。您可以使用遍历框的forEach函数并添加要添加的属性，对于您的情况，这将起作用

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

使用ES6地图从react道具构造数组

5 个答案: