在Javascript中将对象转换为包含多个对象的数组的理想方法是什么？(允许ES6)

Question

我有一个像这样的对象:

foo: {
  someGuid: someString,
  someGuid: someString,
  someGuid: someString
}

我试图找出将它作为id/value对作为对象数组插入现有对象的最佳方法:

bar: {
  someOtherInfo: someOtherValue,
  someOtherInfo: someOtherValue,
  baz: [
    {
      id: someGuid,
      value: someString
    },
    {
      id: someGuid,
      value: someString
    },
    {
      id: someGuid,
      value: someString
    }
  ]
}

我真的很想知道实现这一目标的最佳方法."最好",我指的是代码清晰度/简单性和性能之间的良好平衡(或者如果可能的话,或者上述所有内容).

我知道有很多方法可以转换这些数据,所以我真的好奇其他人想出的东西,我觉得这对我自己和其他人来说是一个很好的学习机会.

此外,这是在Vue应用程序中,如果这有所不同.(我认为没有特定于vue的方法来做到这一点,但如果有的话,我肯定有兴趣听听如何!)

---

到目前为止,我提出的方法没有奏效,但这里是针对那些感兴趣的人.我相信我一切都错了(可能过于复杂).

我的数据:

originalObject: {
  someGuid: someString,
  someGuid: someString,
  someGuid: someString
}

newObject: {
        some: null,
        other: '1',
        stuff: null,
        irrelevant: null,
        toThis: null,
        problem: null,
        targetArray: [
          {},
        ],
      },

我的逻辑:

someFunction() {
  const foo = this.originalObject;
  const bar = this.newObject.targetArray;
  const fooLength = Object.keys(foo).length;

  Object.keys(foo).forEach(function (key) {
    for (let i = 0; i < fooLength; i++) {
      const foobar = bar[i];
      console.log(foobar.ItemAttributeId);
      console.log(foobar.Value);
      foobar.ItemAttributeId = key;
      foobar.Value = foo[key];

      bar.push({ ItemAttributeId: foobar.ItemAttributeId, Value: foobar.Value });
    }
  });
},

所以我觉得我让它变得比它需要的更复杂.此外,结果输出是不正确的(我不知何故多次返回该值,但它似乎是一个随机数的倍数...有时它返回4次,有时3,我试图推断为什么会这样).我觉得有一个更好的方式开始,我错过了,现在我在一个兔子洞.

Answer 1

在Vue中,您将使用计算属性.

console.clear()

new Vue({
  el: "#app",
  data:{
    foo: {
      someGuid1: "someString",
      someGuid2: "someString",
      someGuid3: "someString"
    }
  },
  computed: {
    baz(){
      // nothing special here-- just javascript
      return Object.entries(this.foo).map(([key,val]) => ({id: key, value: val}))
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  {{baz}}
</div>

要将数组添加到其他对象:

console.clear()

new Vue({
  el: "#app",
  data:{
    foo: {
      someGuid1: "someString",
      someGuid2: "someString",
      someGuid3: "someString"
    }
  },
  computed: {
    bar(){
      // nothing special here-- just javascript
      return {
        some: "other",
        props: "that don't matter",
        baz: Object.entries(this.foo).map(([key,val]) => ({id: key, value: val}))
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
<pre>
  {{bar}}
<pre>
</div>