在 js 中映射列表的更好方法答案

【问题标题】：a better way to map a list in js在 js 中映射列表的更好方法
【发布时间】：2021-12-27 03:34:24
【问题描述】：

在重复相同格式的内容时，我经常使用 map()。

此时，列表如下。

一个。

const list = [{title: a, content: 1}, {title: b, content: 2}, {title: c, content: 3}]

list.map((item) => (
 <div>
  <div>{item.title}</div>
  <div>{item.content}</div>
 </div>
))

乙。

const list = {a: 1, b: 2, c: 3}

Object.keys(list).map((item) => (
 <div>
  <div>{item}</div>
  <div>{list[item]}</div>
 </div>
))

我在做list的时候经常用B，因为我喜欢把内容归类到object的key中。

使用B在性能上有什么劣势吗？

我不知道如何找到答案，所以我会在这里发布。

【问题讨论】：

您没有分配 map 的结果，因此没有有效地完成任何事情 - 您应该始终使用最适合数据类型的方法。当您可以使用 for...in 循环遍历对象时，使用 B 将对象转换为数组。
对于任何大小合理的数据集（
不知道你在这里比较的是什么。一个 sn-p 遍历一个数组，另一个遍历一个对象。
对于选项 B。您应该使用 Object.entires(list).map(([key, value]) => (<div>{key} : {value}</div>))
@Robby Object.keys 也返回一个数组。

标签： javascript arrays reactjs object

【解决方案1】：

使用变量对象键（例如标题，在您的问题中）的几个问题是：

如果标题/键变化并且是动态的（我认为这很有可能，因为程序员喜欢使事情变得干燥和自动化），您必须确保键名称和值总是出现来自可靠的来源。否则 - 就像值可能来自用户输入或 API 或其他东西 - 在某些情况下，您可能会向恶意代码执行敞开大门。我是not a very uncommon problem。

这是在处理动态“键”时地图通常是更好选择的原因之一——它们没有这样的问题。（或者，根本不使用动态键）
至少，V8 使用hidden classes 来优化解释器持有的内部对象结构。这适用于所有具有相同属性名称的对象，但当属性都是动态的时不起作用。不太可能引起注意，但您可能需要牢记这一点。

【讨论】：

【解决方案2】：

有 3 种类型可以迭代对象。

Object.keys()
Object.values()
Object.entries()

在你的情况下，你可以试试 Object.entries()

const list = {a: 1, b: 2, c: 3}

Object.entries(list).map(([key, value]) => (
 <div>
  <div>{key}</div>
  <div>{value}</div>
 </div>
))

更多参考：Object.entries

【讨论】：