javascript - 如何在javascript中转换对象内的字段集并做出反应

Question

我有以下对象React：

const userData = 
  {
    id: 30,
    firstName: "James",
    lastName: "Anderson",
    programmingLanguage: "Java, Python",              # HERE
    LanguageSpoken: "French, German, English",        # HERE
    Nationality: "French",
    Hobby: "Developer, Hiking"                        # HERE
  },
]

什么是循环遍历此对象并将 3 个字段和programmingLanguage 3个字段转换为字符串的List （类型）的最佳方法。LanguageSpoken Hobby string

所以改造后应该是这样的。

const userData = 
  {
    id: 30,
    firstName: "James",
    lastName: "Anderson",
    programmingLanguage: ["Java", "Python"],         # List of strings
    LanguageSpoken: ["French", "German", "English"], # List of strings
    Nationality: "French",
    Hobby: ["Developer", "Hiking"]                   # List of strings         
  },
]

PS：（我知道这很糟糕）但上面的格式是我从后端接收数据的方式，因为我不允许更改我必须处理它。

如果是针对单个字段，我会这样做：

  const transformedField = userData.programmingLanguage.toString().split(",");
  const resultTransformedField = transformedField.map((i) => Number(i));

  const newDataUser = {
    ...useData,
    programmingLanguage: resultTransformedField,
  };

但如上所述，我必须修改 3 个字段。

感谢您的帮助。

标签： javascriptreactjsalgorithmreact-nativedata-structures

Answer 1

我会将每个对象映射到一个新对象Object.fromEntries：

const properties = ['programmingLanguage', 'LanguageSpoken', 'Hobby'];

const userData = [
  {
    id: 30,
    firstName: "James",
    lastName: "Anderson",
    programmingLanguage: "Java, Python",
    LanguageSpoken: "French, German, English",
    Nationality: "French",
    Hobby: "Developer, Hiking"
  },
];

const output = userData.map(
  obj => Object.fromEntries(
    Object.entries(obj).map(
      ([key, val]) => [key, properties.includes(key) ? val.split(', ') : val]
    )
  )
);
console.log(output);