循环使用Object获取key的值并生成'x'个元素

时间:2016-09-09 19:14:15

标签: javascript loops ecmascript-6

我会尽力解释自己。我有一个javascript对象。例如:

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

我需要返回的是让我们说<p>看起来像这样:

<p>a 1</p>
<p>b 1</p>
<p>b 2</p>
<p>c 1</p>
<p>c 2</p>
<p>c 3</p>

我试图抓住一个键里面有多少次值。并基于此生成上面显示的结果。

我正在尝试做类似的事情:

for (var k in obj) {
    if (obj.hasOwnProperty(k)) {
      return <p>{`key ${k} value ${obj[k]}`}</p>;
    }
  }
}

这只返回1段..如何启动这些键值并生成像示例中显示的那些段落?谢谢!

编辑:

如果更容易,我如何将obj转换为

newObj = [
 {
  name: a,
  number: 1
 },
 {
  name: b,
  number: 1
 },
 {
  name: b,
  number: 2
 },
 {
  name: c,
  number: 1
 },
 {
  name: c,
  number: 2
 },
 {
  name: c,
  number: 3
 }
];

然后我可以通过简单的Map实现我想要的结果。

1 个答案:

答案 0 :(得分:1)

使用小辅助函数times()非常简单:

const times = (n, fn) => [...Array(n)].map((_, i) => fn(i));

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

let result = [];

Object.keys(obj).forEach(k => 
  times(obj[k], i => 
    result.push('<p>' + k + (i + 1) + '</p>')));

console.log(result);