map优化对象数组
假设下面这个数组是你需要使用的数组,是否感觉他很笨重呢?
const citydate3 = ref([
{
text: now.getFullYear() - 1,
id: 0,
children: [
{ text: "全年", id: 0 },
{ text: 1, id: 1 },
{ text: 2, id: 2 },
{ text: 3, id: 3 },
{ text: 4, id: 4 },
{ text: 5, id: 5 },
],
},
{
text: now.getFullYear(),
id: 1,
children: [
{ text: "全年", id: 0 },
{ text: 1, id: 1 },
{ text: 2, id: 2 },
{ text: 3, id: 3 },
{ text: 4, id: 4 },
{ text: 5, id: 5 },
],
},
{
text: now.getFullYear() + 1,
id: 3,
children: [
{ text: "全年", id: 0 },
{ text: 1, id: 1 },
{ text: 2, id: 2 },
{ text: 3, id: 3 },
{ text: 4, id: 4 },
{ text: 5, id: 5 },
],
},
]);
这是一个日期picker组件的数据,外层text代表年份,内层text代表那一年的月份,id均为index,下面运用map方法进行改写
const citydate3 = ref(
[now.getFullYear() - 1, now.getFullYear(), now.getFullYear() + 1].map((text, index) => ({
text,
id: index,
children: ["全年", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((text, index) => ({
text,
id: index,
})),
})),
);
其实map解析数组和for循环有点像,数组解析出来的每一项作为text,index为每一项的索引
现已知外层索引为1,内层索引为12,你可以使用以下方法访问外层和内层的text
const pickok = () => {
//获取外层对象
const obj1 = citydate3.value.find((obj) => obj.id === 1);
//获取内层对象
const obj2 = obj1.children.find((obj) => obj.id === 6);
console.log(obj1.text, obj2.text);
};