[英]How to print a new array from existing array of object javascript
我需要从 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 并循环数组,但似乎找不到正确的函数。 谢谢你
使用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]}))));
这段代码应该可以工作
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>
您可以通过使用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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.