如何從現有的對象數組中打印一個新數組 javascript

Question

我需要從 vuejs 上的現有數組創建一個新的對象數組。

示例第一個數組：

import { ref } from 'vue';

const base_array = ref([
  {id: 1, name: Pill, timing: [morning, noon, evening, night]},
  {id: 2, name: Tablet, timing: [morning, evening]},
])

預期結果 ：

const modified_array = ref([
  {id: 1, name: Pill, timing: [morning]},
  {id: 2, name: Pill, timing: [noon]},
  {id: 3, name: Pill, timing: [evening]},
  {id: 4, name: Pill, timing: [night]},
  {id: 5, name: Tablet, timing: [morning]},
  {id: 6, name: Tablet, timing: [evening]},
])

我試過 forEach 並循環數組，但似乎找不到正確的函數。 謝謝你

Answer 1

使用flatMap ，如下所示：

const base_array = ref([
      { id: 1, name: Pill, timing: [morning, noon, evening, night] },
      { id: 2, name: Tablet, timing: [morning, evening] },
    ]);

const modified_array  = ref(base_array.value.flatMap(el => el.timing.map(t => ({id: el.id, name: el.name, timing: [t]}))));

Answer 2

這段代碼應該可以工作

const modified_array = ref(
    base_array.value.flatMap(({timing, ...r}) =>
        timing.map(timing => ({...r, timing:[timing]}))
    )
);

但是，如果您希望modified_array對base_array中的更改做出反應 - 您會希望對modified_array使用computed而不是ref ，如下面的代碼片段所示

如果您觀看，那么當 base_array 使用此代碼在三秒后更改時，modified_array 輸出會更改

setTimeout(() => base_array.value[1].timing.push('reactive!!!'), 3000);

無論如何，這是 vue3 的全功能代碼示例

 const { ref, createApp, computed } = Vue; createApp({ setup() { const base_array = ref([ {id: 1, name: 'Pill', timing: ['morning', 'noon', 'evening', 'night']}, {id: 2, name: 'Tablet', timing: ['morning', 'evening']}, ]); const modified_array = computed(() => base_array.value.flatMap(({ timing, ...r }) => timing.map((t) => ({ ...r, timing: [t] })) ) ); setTimeout(() => base_array.value[1].timing.push('reactive!!!'), 3000); return { base_array, modified_array}; } }).mount('#app');

 .as-console-wrapper { max-height: 0 !important; top: 0; }

 <script src="https://unpkg.com/vue@next"></script> <div id="app"> <ul> <li v-for="({id, name}) in base_array" :key="id"> {{ id }}: {{ name }} </li> </ul> <ul> <li v-for="({id, name, timing}, i) in modified_array" :key="i"> {{ id }}: {{ name }} {{timing[0]}} </li> </ul> </div>

Answer 3

您可以通過使用Array.forEach()和Destructuring assignment來簡單地實現這一點。

現場演示：

 const base_array = [ {id: 1, name: 'Pill', timing: ['morning', 'noon', 'evening', 'night']}, {id: 2, name: 'Tablet', timing: ['morning', 'evening']}, ]; let modified_arr = []; let index = 1; base_array.forEach(obj => { const {id, name, timing} = obj; timing.forEach(t => { modified_arr.push({ id: index, name, timing: [t]}) index++; }) }); console.log(modified_arr);