如何打印一个新的数组从现有的数组对象javascript

Question

我需要从vejs上的现有数组中创建一个新的对象数组。

第一个数组:

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的变化做出反应，则需要使用computed而不是ref来代替modified_array，如下面的代码片段

所示如果您观察，那么当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。

Live Demo:

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);