将键值对转换为对象数组答案

【问题标题】：Convert key value pair to array of objects将键值对转换为对象数组
【发布时间】：2021-12-14 11:41:01
【问题描述】：

我有一个键值对：

`{good: 'value1', key2: 'value2': key3: 'value3'}

我想把它转换成如下：

[{key: 'good', value:'value1'}, {key: 'key2', value: 'value2'}, {key: 'key3', value: 'value3']

到目前为止，我可以使用 Object.entries 将它们转换成一个数组，但我无法得到我想要的结果。

【问题讨论】：

标签： javascript typescript

【解决方案1】：

你可以这样做：

const data = {good: 'value1', key2: 'value2', key3: 'value3'};
const result = [];
Object.keys(data).forEach(key => {
    result.push({key, value: data[key]})
})
console.log(result)

【讨论】：

【解决方案2】：

有一个方法 Object.entries 已经将对象转换为键和值列表，将其映射为匹配您所需的格式应该不难。

const data = {good: 'value1', key2: 'value2', key3: 'value3'};

const result = Object.entries(data).map(([key, value]) => ({key, value}))
console.log(result)

【讨论】：

我收到此错误：此表达式不可调用。类型“字符串”没有调用签名。我的类型是： { [key: string]: string; }
您能发布返回此错误的代码吗？它应该工作得很好。也许它是一个旧的 javascript 版本？

【解决方案3】：

为了转换数组，javascript 提供了多种数组方法。映射，foreach，减少。等（Read more）

Object.entries( data ) 将您的对象转换为 array 的 arrays，其中每个内部数组都是像这样的键值对 [ [key1, value1], [key2, value2] ....]。 (Read More)

您的用例：

const data = { good: 'value1', key2: 'value2', key3: 'value3' };

const entries = Object.entries(data); 
// [ ["good","value1"], ["key2","value2"],["key3","value3"] ]


// Map those entries to your desired form.
const results = entries.map( entry => ({  key: entry[0], value: entry[1] }) ) ; 

// Or leverage the destructuring fetaure
// const results = entries.map( ([key, value]) => ({  key, value }) ) ; 

console.log(results)

【讨论】：

【解决方案4】：

如果您对快速解决方案感兴趣：

type Values<T> = T[keyof T]

type Mapper<T> = {
  [Prop in keyof T]: { key: Prop, value: T[Prop] }
}

type Convert<T> = Array<Values<Mapper<T>>>

function convert<
  Prop extends string,
  Value extends string,
  Obj extends Record<Prop, Value>
>(obj: Obj): Convert<Obj>
function convert<
  Prop extends string,
  Value extends string,
  Obj extends Record<Prop, Value>
>(obj: Obj) {

  const result: {
    key: Extract<keyof Obj, string>;
    value: Obj[Extract<keyof Obj, string>];
  }[] = []

  for (let prop in obj) {
    result.push({
      key: prop,
      value: obj[prop]
    })
  }

  return result
}

const result = convert({ good: 'value1', key2: 'value2', key3: 'value3' })
const first = result[0]
if (first.key === 'good') {
  // {
  //   key: "good";
  //   value: "value1";
  // }
  first
}

缺点： convert 函数创建内部 result 变量并对其进行变异。可以使用递归而不是突变result，但我不确定这种交易是否值得。

优点比entries & map快

Convert types 将参数类型映射到您想要实现的类型，但仅在类型范围内，而函数在运行时范围内映射参数。

如果性能不重要，您可能应该坚持使用Object.entries 的其他解决方案

【讨论】：