使用地图迭代器反应创建简单对象的对象

问题描述

我正在研究 React 和 json 对象，但我无法获得我想要的：

代码如下：

const selectOptions1 = {
    9: 'good',14: 'Bad',26: 'unkNown'
  };

  const selectOptions2 = options.map((item) => {
    return (
      { [item.value]:item.label }
    )
  })

  console.log(selectOptions1) // {9:good,14:bad,26:unkNown}
  console.log(selectOptions2) // [{…},{…},{…}] -> 0: {9: "good"} 1: {14: "bad"} 2: {26: "unkNown"}

如何使用 map（而不是 selectOptions2 中的结构）创建像 selectOptions1 这样的对象？

解决方法

你应该使用 Reduce 而不是 map

const options = [
  {value: 1,label : 'one'},{value: 2,label : 'two'},{value: 3,label : 'three'},{value: 41,label : 'four'},{value: 32,label : 'five'},]

var obj = options.reduce((accumulator,current) => {
  return {
    [current.value]: current.label,...accumulator,}
},{});

console.log(obj);

因为 map 将每个项目转换为一个新项目，并返回一个应用了转换的相同长度的列表。您正在将每个 {value,label} 对象转换为新的 {value,label} 对象。

reduce 累加并只返回一个结果，可以是列表或其他东西，如果你有创造力的话，这里我使用 Spread operator 在一个对象中累加键。