将 [key, value] 的“值”配对成数组答案

【问题标题】：Make 'value' of [key, value] Pair into Array将 [key, value] 的“值”配对成数组
【发布时间】：2020-04-01 13:07:59
【问题描述】：

我有一个简单的对象，我想将其转换为键值对以显示在 SectionList 中。

const DOBBY = {
  foo: 'bar',
  toto: ['hoge', 'piyo'],
};

我用Objects.entries()把它变成了一个对象数组：

const toArray = Object.entries(DOBBY).map(([ title, data ]) => ({ title, data }));

这样我就回来了：

[
  { title: 'foo', data: 'bar' },
  { title: 'toto', data: ['hoge', 'piyo'] },
];

现在SectionList 将'bar' 分成三行。
如何将'bar' 放入数组中，以便得到：

[
 { title: 'foo', data: ['bar'] },
 { title: 'toto', data: ['hoge', 'piyo'] },
]

我认为Array.of() 会做到，但我不知道在哪里实现它，或者我是否可以用.map() 做一些事情

【问题讨论】：

标签： javascript arrays react-native javascript-objects

【解决方案1】：

您可以简单地将data 强制嵌套到子数组中，然后使用Array.prototype.flat 将其展平：

当data 是一个数组时，[data] 将是一个具有单个元素的数组，也是一个数组，因此Array.flat 会将其展平为一个数组
当data 是一个字符串时，[data] 将是一个字符串数组，Array.flat 将保持原样

const DOBBY = {
  foo: 'bar',
  toto: ['hoge', 'piyo'],
};

const toArray = Object.entries(DOBBY).map(([ title, data ]) => ({ title, data: [data].flat() }));
console.log(toArray);

当然，您也可以采用稍微冗长的方式，但这意味着您不必在数组中嵌套数组：

const DOBBY = {
  foo: 'bar',
  toto: ['hoge', 'piyo'],
};

const toArray = Object.entries(DOBBY).map(([ title, data ]) => {
  return {
    title,
    data: Array.isArray(data) ? data : [data]
  };
});
console.log(toArray);

Array.prototype.flat() 方法当然更慢，因为您将执行额外的数组嵌套。这是你为可读性付出的牺牲。此外，对于非常小的对象和数组，这种性能开销可能可以忽略不计：

https://jsperf.com/array-prototype-flat-vs-isarray/

+---------------------------------+------------+------------+------------+
|               Test              | Chrome 80  | Firefox 74 | Safari 13  |
+---------------------------------+------------+------------+------------+
| Array.prototype.flat() approach | 640k ops/s | 2.4m ops/s | 590k ops/s |
| Array.isArray approach          | 2.6m ops/s | 2.7m ops/s | 650k ops/s |
+---------------------------------+------------+------------+------------+

【讨论】：

谢谢@Terry。如果我不将其展平并将其留在data: [data] 有什么害处？
需要展平，否则会得到[['hoge', 'piyo']]（即嵌套数组）

【解决方案2】：

检查是否为Array，如果是则插入数据，如果不是则将数据放入空Array

const DOBBY = {
  foo: 'bar',
  toto: ['hoge', 'piyo'],
};

const toArray = Object.entries(DOBBY)
.map(([title, data ]) => ({ title, data: Array.isArray(data) ? data : [data] }));

它对我有用，所以我希望这会有所帮助:)

【讨论】：