const refresh = () => { homeFastList.value = []; menuList.value.forEach((item: Any) => { if (item.speedMenu && item.speedMenu === "1") { homeFastList.value.push(item); } else if (item.children) { item.children.forEach((child: Any) => { if (child.speedMenu && child.speedMenu === "1") { homeFastList.value.push(child); } else if (child.children) { child.children.forEach((child1: Any) => { if (child1.speedMenu && child1.speedMenu === "1") { homeFastList.value.push(child1); } else if (child1.children) { child1.children.forEach((child2: Any) => { if (child2.speedMenu && child2.speedMenu === "1") { homeFastList.value.push(child2); } }); } }); } }); } }); };
时间: 2024-04-09 10:33:41 浏览: 22
以下是对代码进行优化的建议:
1. 使用递归来遍历多层嵌套的子菜单,可以减少重复的代码。可以创建一个递归函数来遍历菜单项和子菜单项,并将满足条件的项添加到 `homeFastList` 数组中。
2. 使用箭头函数简化代码,可以更加简洁和易读。
下面是优化后的代码示例:
```typescript
const refresh = () => {
const traverseMenu = (menu: any[]): void => {
menu.forEach((item: any) => {
if (item.speedMenu && item.speedMenu === "1") {
homeFastList.value.push(item);
}
if (item.children) {
traverseMenu(item.children);
}
});
};
const homeFastList: any[] = [];
traverseMenu(menuList.value);
homeFastList.value = homeFastList;
};
```
这样,通过使用递归函数,可以更加简洁地遍历多层嵌套的子菜单,并将满足条件的项添加到 `homeFastList` 数组中。
相关问题
async function confirm() { isShow.value = false; // params.value.pageSize = 7 let i = menu.value.find((v) => v.isActive === true).id - 1; if (i === 0) { params.value.houseType = tagsList.value.find( (v) => v.isActive === true )?.value; } else if (i === 1) { params.value.orientation = tagsList.value.find( (v) => v.isActive === true )?.value; } else if (i === 2) { params.value.rentStr = tagsList.value.find( (v) => v.isActive === true )?.value; } else if (i === 3) { let arr = []; tagsList.value?.forEach((v) => { if (v.isActive === true) { arr.push(v.value * 1); } }); if (arr.length > 0) { params.value.houseLabels = arr.join(","); } } search(); }优化
可以将这段代码优化为:
```
isShow.value = false;
// params.value.pageSize = 7
const i = menu.value.findIndex(v => v.isActive) - 1;
if (i === 0) {
params.value.houseType = tagsList.value.find(v => v.isActive)?.value;
} else if (i === 1) {
params.value.orientation = tagsList.value.find(v => v.isActive)?.value;
} else if (i === 2) {
params.value.rentStr = tagsList.value.find(v => v.isActive)?.value;
} else if (i === 3) {
const arr = tagsList.value?.filter(v => v.isActive)?.map(v => v.value * 1);
if (arr?.length) {
params.value.houseLabels = arr.join(",");
}
}
search();
```
这样可以将代码变得更加简洁和易读,同时也可以避免使用可选链操作符时的一些潜在问题。
优化此代码 const openKeys = ref<string[]>([]) const selectedKeys = ref<string[]>([]) const { currentMenu, currentMenuTree, currentMenuList } = storeToRefs( useLayoutStore(), ) const rootSubmenuKeys = currentMenuList.value.filter((v: any) => { if (v.type === 0) { return v.parentId } }) watch( () => currentMenu, () => { openKeys.value = [currentMenu.value?.parentId] selectedKeys.value = [currentMenu.value?.id] }, { immediate: true }, ) const router = useRouter() /** * 点击事件 * @param e 事件对象 */ const handleClick = (e: any) => { const item = currentMenuList.value.find((_) => _.id === e.key) if (item) { router.push(item.path) } } /** * SubMenu 展开/关闭的回调 * @param e 展开的openKeys */ const onOpenChange = (e: any) => { const latestOpenKey = e.find((key: any) => openKeys.value.indexOf(key) === -1) if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) { openKeys.value = e } else { openKeys.value = latestOpenKey ? [latestOpenKey] : [] } }
There are a few optimizations that could be made to this code:
1. Instead of using `ref` for `openKeys` and `selectedKeys`, you can use `reactive` to make the code more concise:
```
const state = reactive({
openKeys: [],
selectedKeys: [],
})
```
2. Instead of using `storeToRefs` to convert the store state to refs, you can use the `toRefs` function, which is shorter and more concise:
```
const { currentMenu, currentMenuTree, currentMenuList } = toRefs(useLayoutStore())
```
3. Instead of using `watch` to watch the `currentMenu` state changes, you can use a computed property to update the `openKeys` and `selectedKeys` arrays:
```
const selectedMenu = computed(() => {
const item = currentMenuList.value.find((_) => _.id === currentMenu.value?.id)
return [item?.id] || []
})
const parentMenu = computed(() => {
const item = currentMenuList.value.find((_) => _.id === currentMenu.value?.parentId)
return [item?.id] || []
})
watch([selectedMenu, parentMenu], ([selected, parent]) => {
state.selectedKeys = selected
state.openKeys = parent
})
```
4. Instead of using `router.push` in the `handleClick` function, you can use the `router.push` method directly in the template:
```
<Menu.Item :key="item.id" :to="item.path">{{ item.name }}</Menu.Item>
```
5. Finally, instead of using `rootSubmenuKeys` to filter the list of menu items, you can use a computed property to filter the list of menu items based on their type:
```
const subMenuItems = computed(() => {
return currentMenuList.value.filter((v: any) => v.type === 0 && v.parentId)
})
```
By applying these optimizations, the code can be simplified and made more concise.