如何在 javascript 或 vue 中在多个对象上迭代一个循环

【问题标题】：How to iterate one loop on multiple object in javascript or vue如何在 javascript 或 vue 中在多个对象上迭代一个循环
【发布时间】：2021-01-08 10:07:49
【问题描述】：

基本上，我正在重构我的路线部分。我正在从这样的一个文件中导出多个变量

export default {contactRoutes,userRoutes,customerRoutes}

他们我得到这样的对象

{
    "default": {
        "contactRoutes": [{
            "path": "/contacts",
            "name": "contacts",
            "component": {
                "methods": {},
                "components": {
                    "TableView": {
                        "methods": {},
                        "props": ["tableObj"],
                        "staticRenderFns": [],
                        "_compiled": true,
                        "__file": "resources/js/src/views/apps/table/TableView.vue"
                    },
                    "vSelect": {
                        "components": {
                            "Deselect": {
                                "staticRenderFns": [],
                                "_compiled": true
                            },
                            "OpenIndicator": {
                                "staticRenderFns": [],
                                "_compiled": true
                            }
                        },
                        "mixins": [{
                            "props": {
                                "autoscroll": {
                                    "default": true
                                }
                            },
                            "watch": {},
                            "methods": {}
                        }, {
                            "watch": {},
                            "methods": {}
                        }, {
                            "props": {
                                "loading": {
                                    "default": false
                                }
                            },
                            "watch": {},
                            "methods": {}
                        }],
                        "directives": {
                            "appendToBody": {}
                        },
                        "props": {
                            "value": {},
                            "components": {},
                            "options": {},
                            "disabled": {
                                "default": false
                            },
                            "clearable": {
                                "default": true
                            },
                            "searchable": {
                                "default": true
                            },
                            "multiple": {
                                "default": false
                            },
                            "placeholder": {
                                "default": ""
                            },
                            "transition": {
                                "default": "vs__fade"
                            },
                            "clearSearchOnSelect": {
                                "default": true
                            },
                            "closeOnSelect": {
                                "default": true
                            },
                            "label": {
                                "default": "label"
                            },
                            "autocomplete": {
                                "default": "off"
                            },
                            "reduce": {},
                            "selectable": {},
                            "getOptionLabel": {},
                            "getOptionKey": {},
                            "onTab": {},
                            "taggable": {
                                "default": false
                            },
                            "tabindex": {
                                "default": null
                            },
                            "pushTags": {
                                "default": false
                            },
                            "filterable": {
                                "default": true
                            },
                            "filterBy": {},
                            "filter": {},
                            "createOption": {},
                            "resetOnOptionsChange": {
                                "default": false
                            },
                            "clearSearchOnBlur": {},
                            "noDrop": {
                                "default": false
                            },
                            "inputId": {},
                            "dir": {
                                "default": "auto"
                            },
                            "selectOnTab": {
                                "default": false
                            },
                            "selectOnKeyCodes": {},
                            "searchInputQuerySelector": {
                                "default": "[type=search]"
                            },
                            "mapKeydown": {},
                            "appendToBody": {
                                "default": false
                            },
                            "calculatePosition": {}
                        },
                        "watch": {},
                        "methods": {},
                        "computed": {},
                        "staticRenderFns": [],
                        "_compiled": true
                    }
                },
                "staticRenderFns": [],
                "_compiled": true,
                "__file": "resources/js/src/views/apps/contacts/ContactsList.vue"
            },
            "title": "People",
            "meta": {
                "breadcrumb": [{
                    "title": "All Contacts",
                    "url": "/contacts"
                }, {
                    "title": "All Contacts",
                    "active": true
                }],
                "pageTitle": "Contacts",
                "rule": "admin",
                "authRequired": true
            }
        }, {
            "path": "/contacts/view/:id",
            "name": "contacts-view",
            "meta": {
                "breadcrumb": [{
                    "title": "All Contacts",
                    "url": "/contacts"
                }, {
                    "title": "All Contacts",
                    "url": "/contacts"
                }, {
                    "title": "View",
                    "active": true
                }],
                "pageTitle": "Contacts",
                "rule": "admin",
                "authRequired": true
            }
        }, {
            "path": "/contacts",
            "name": "contacts",
            "meta": {
                "breadcrumb": [{
                    "title": "All Contacts",
                    "url": "/contacts"
                }, {
                    "title": "All Contacts",
                    "active": true
                }],
                "pageTitle": "Contacts",
                "rule": "admin",
                "authRequired": true
            }
        }, {
            "path": "/contacts/view/:id",
            "name": "contacts-view",
            "meta": {
                "breadcrumb": [{
                    "title": "Customer",
                    "url": "/customers/view/1"
                }, {
                    "title": "Customer",
                    "url": "/customers/view/1"
                }, {
                    "title": "View",
                    "active": true
                }],
                "pageTitle": "Contacts",
                "rule": "admin",
                "authRequired": true
            }
        }, {
            "path": "/contacts/add/:customer_id",
            "name": "contacts-add",
            "meta": {
                "breadcrumb": [{
                    "title": "Customer",
                    "url": "/customers/view/1"
                }, {
                    "title": "Customer",
                    "url": "/customers/view/1"
                }, {
                    "title": "Add",
                    "active": true
                }],
                "pageTitle": "Contacts",
                "rule": "admin",
                "authRequired": true
            }
        }, {
            "path": "/contacts/edit/:id",
            "name": "contacts-edit",
            "meta": {
                "breadcrumb": [{
                    "title": "Customer",
                    "url": "/customers/view/1"
                }, {
                    "title": "Customer",
                    "url": "/customers/view/1"
                }, {
                    "title": "Edit",
                    "active": true
                }],
                "pageTitle": "Contacts",
                "rule": "admin",
                "authRequired": true
            }
        }],
        "userRoutes": [{
            "path": "/users",
            "name": "users",
            "meta": {
                "breadcrumb": [{
                    "title": "Users",
                    "url": "/users"
                }, {
                    "title": "All Users",
                    "active": true
                }],
                "pageTitle": "Users",
                "rule": "editor",
                "authRequired": true
            }
        }, {
            "path": "/users/user-add",
            "name": "user-add",
            "meta": {
                "breadcrumb": [{
                    "title": "All Users",
                    "url": "/users"
                }, {
                    "title": "All Users",
                    "url": "/users"
                }, {
                    "title": "Add User",
                    "active": true
                }],
                "pageTitle": "Users",
                "rule": "editor",
                "authRequired": true
            }
        }, {
            "path": "/users/view/:userId",
            "name": "user-view",
            "meta": {
                "breadcrumb": [{
                    "title": "User",
                    "url": "/users"
                }, {
                    "title": "All Users",
                    "url": "/users"
                }, {
                    "title": "View",
                    "active": true
                }],
                "pageTitle": "Users",
                "rule": "editor",
                "authRequired": true
            }
        }, {
            "path": "/profile/view",
            "name": "profile-view",
            "meta": {
                "breadcrumb": [{
                    "title": "Profile Settings",
                    "active": true
                }],
                "pageTitle": "Settings",
                "rule": "editor",
                "authRequired": true
            }
        }, {
            "path": "/users/edit/:userId",
            "name": "user-edit",
            "meta": {
                "breadcrumb": [{
                    "title": "All Users",
                    "url": "/users"
                }, {
                    "title": "All Users",
                    "url": "/users"
                }, {
                    "title": "User Edit",
                    "active": true
                }],
                "pageTitle": "Users",
                "rule": "editor",
                "authRequired": true
            }
        }],
        "customerRoutes": [{
            "path": "/customers",
            "name": "customers",
            "component": {
                "methods": {},
                "components": {
                    "TableView": {
                        "methods": {},
                        "props": ["tableObj"],
                        "staticRenderFns": [],
                        "_compiled": true,
                        "__file": "resources/js/src/views/apps/table/TableView.vue"
                    },
                    "vSelect": {
                        "components": {
                            "Deselect": {
                                "staticRenderFns": [],
                                "_compiled": true
                            },
                            "OpenIndicator": {
                                "staticRenderFns": [],
                                "_compiled": true
                            }
                        },
                        "mixins": [{
                            "props": {
                                "autoscroll": {
                                    "default": true
                                }
                            },
                            "watch": {},
                            "methods": {}
                        }, {
                            "watch": {},
                            "methods": {}
                        }, {
                            "props": {
                                "loading": {
                                    "default": false
                                }
                            },
                            "watch": {},
                            "methods": {}
                        }],
                        "directives": {
                            "appendToBody": {}
                        },
                        "props": {
                            "value": {},
                            "components": {},
                            "options": {},
                            "disabled": {
                                "default": false
                            },
                            "clearable": {
                                "default": true
                            },
                            "searchable": {
                                "default": true
                            },
                            "multiple": {
                                "default": false
                            },
                            "placeholder": {
                                "default": ""
                            },
                            "transition": {
                                "default": "vs__fade"
                            },
                            "clearSearchOnSelect": {
                                "default": true
                            },
                            "closeOnSelect": {
                                "default": true
                            },
                            "label": {
                                "default": "label"
                            },
                            "autocomplete": {
                                "default": "off"
                            },
                            "reduce": {},
                            "selectable": {},
                            "getOptionLabel": {},
                            "getOptionKey": {},
                            "onTab": {},
                            "taggable": {
                                "default": false
                            },
                            "tabindex": {
                                "default": null
                            },
                            "pushTags": {
                                "default": false
                            },
                            "filterable": {
                                "default": true
                            },
                            "filterBy": {},
                            "filter": {},
                            "createOption": {},
                            "resetOnOptionsChange": {
                                "default": false
                            },
                            "clearSearchOnBlur": {},
                            "noDrop": {
                                "default": false
                            },
                            "inputId": {},
                            "dir": {
                                "default": "auto"
                            },
                            "selectOnTab": {
                                "default": false
                            },
                            "selectOnKeyCodes": {},
                            "searchInputQuerySelector": {
                                "default": "[type=search]"
                            },
                            "mapKeydown": {},
                            "appendToBody": {
                                "default": false
                            },
                            "calculatePosition": {}
                        },
                        "watch": {},
                        "methods": {},
                        "computed": {},
                        "staticRenderFns": [],
                        "_compiled": true
                    }
                },
                "staticRenderFns": [],
                "_compiled": true,
                "__file": "resources/js/src/views/apps/customers/CustomersList.vue"
            },
            "title": "People",
            "meta": {
                "breadcrumb": [{
                    "title": "All Customers",
                    "url": "/customers"
                }, {
                    "title": "All Customers",
                    "active": true
                }],
                "pageTitle": "Customers",
                "rule": "admin",
                "authRequired": true
            }
        }, {
            "path": "/customers/view/:id",
            "name": "customers-view",
            "meta": {
                "breadcrumb": [{
                    "title": "All Customers",
                    "url": "/customers"
                }, {
                    "title": "All Customers",
                    "url": "/customers"
                }, {
                    "title": "View",
                    "active": true
                }],
                "pageTitle": "Customers",
                "rule": "admin",
                "authRequired": true
            }
        }, {
            "path": "/customers",
            "name": "customers",
            "meta": {
                "breadcrumb": [{
                    "title": "All Customers",
                    "url": "/customers"
                }, {
                    "title": "All Customers",
                    "active": true
                }],
                "pageTitle": "Customers",
                "rule": "admin",
                "authRequired": true
            }
        }, {
            "path": "/customers/view/:id",
            "name": "customers-view",
            "meta": {
                "breadcrumb": [{
                    "title": "All Customers",
                    "url": "/customers"
                }, {
                    "title": "All Customers",
                    "url": "/customers"
                }, {
                    "title": "View",
                    "active": true
                }],
                "pageTitle": "Customers",
                "rule": "admin",
                "authRequired": true
            }
        }, {
            "path": "/customers/add",
            "name": "customers-add",
            "meta": {
                "breadcrumb": [{
                    "title": "All Customers",
                    "url": "/customers"
                }, {
                    "title": "All Customers",
                    "url": "/customers"
                }, {
                    "title": "Add",
                    "active": true
                }],
                "pageTitle": "Customers",
                "rule": "admin",
                "authRequired": true
            }
        }, {
            "path": "/customers/edit/:id",
            "name": "customers-edit",
            "meta": {
                "breadcrumb": [{
                    "title": "All Customers",
                    "url": "/customers"
                }, {
                    "title": "All Customers",
                    "url": "/customers"
                }, {
                    "title": "Edit",
                    "active": true
                }],
                "pageTitle": "Customers",
                "rule": "admin",
                "authRequired": true
            }
        }]
    }
}

现在我想在一个循环中进行迭代。这可能吗？

在此之前我是这样一个一个地迭代循环

for (let route of adminRoutes) {
        baseRoutes[0].children.push(route);
    }

    for (let route of userRoutes) {
        baseRoutes[0].children.push(route);
    }

但当时我的i是一个一个的导入文件，对象是这样的。

[{
    "path": "/customers",
    "name": "customers",
    "component": {
        "methods": {},
        "components": {
            "TableView": {
                "methods": {},
                "props": ["tableObj"],
                "staticRenderFns": [],
                "_compiled": true,
                "__file": "resources/js/src/views/apps/table/TableView.vue"
            },
            "vSelect": {
                "components": {
                    "Deselect": {
                        "staticRenderFns": [],
                        "_compiled": true
                    },
                    "OpenIndicator": {
                        "staticRenderFns": [],
                        "_compiled": true
                    }
                },
                "mixins": [{
                    "props": {
                        "autoscroll": {
                            "default": true
                        }
                    },
                    "watch": {},
                    "methods": {}
                }, {
                    "watch": {},
                    "methods": {}
                }, {
                    "props": {
                        "loading": {
                            "default": false
                        }
                    },
                    "watch": {},
                    "methods": {}
                }],
                "directives": {
                    "appendToBody": {}
                },
                "props": {
                    "value": {},
                    "components": {},
                    "options": {},
                    "disabled": {
                        "default": false
                    },
                    "clearable": {
                        "default": true
                    },
                    "searchable": {
                        "default": true
                    },
                    "multiple": {
                        "default": false
                    },
                    "placeholder": {
                        "default": ""
                    },
                    "transition": {
                        "default": "vs__fade"
                    },
                    "clearSearchOnSelect": {
                        "default": true
                    },
                    "closeOnSelect": {
                        "default": true
                    },
                    "label": {
                        "default": "label"
                    },
                    "autocomplete": {
                        "default": "off"
                    },
                    "reduce": {},
                    "selectable": {},
                    "getOptionLabel": {},
                    "getOptionKey": {},
                    "onTab": {},
                    "taggable": {
                        "default": false
                    },
                    "tabindex": {
                        "default": null
                    },
                    "pushTags": {
                        "default": false
                    },
                    "filterable": {
                        "default": true
                    },
                    "filterBy": {},
                    "filter": {},
                    "createOption": {},
                    "resetOnOptionsChange": {
                        "default": false
                    },
                    "clearSearchOnBlur": {},
                    "noDrop": {
                        "default": false
                    },
                    "inputId": {},
                    "dir": {
                        "default": "auto"
                    },
                    "selectOnTab": {
                        "default": false
                    },
                    "selectOnKeyCodes": {},
                    "searchInputQuerySelector": {
                        "default": "[type=search]"
                    },
                    "mapKeydown": {},
                    "appendToBody": {
                        "default": false
                    },
                    "calculatePosition": {}
                },
                "watch": {},
                "methods": {},
                "computed": {},
                "staticRenderFns": [],
                "_compiled": true
            }
        },
        "staticRenderFns": [],
        "_compiled": true,
        "__file": "resources/js/src/views/apps/customers/CustomersList.vue"
    },
    "title": "People",
    "meta": {
        "breadcrumb": [{
            "title": "All Customers",
            "url": "/customers"
        }, {
            "title": "All Customers",
            "active": true
        }],
        "pageTitle": "Customers",
        "rule": "admin",
        "authRequired": true
    }
}, {
    "path": "/customers/view/:id",
    "name": "customers-view",
    "meta": {
        "breadcrumb": [{
            "title": "All Customers",
            "url": "/customers"
        }, {
            "title": "All Customers",
            "url": "/customers"
        }, {
            "title": "View",
            "active": true
        }],
        "pageTitle": "Customers",
        "rule": "admin",
        "authRequired": true
    }
}, {
    "path": "/customers",
    "name": "customers",
    "meta": {
        "breadcrumb": [{
            "title": "All Customers",
            "url": "/customers"
        }, {
            "title": "All Customers",
            "active": true
        }],
        "pageTitle": "Customers",
        "rule": "admin",
        "authRequired": true
    }
}, {
    "path": "/customers/view/:id",
    "name": "customers-view",
    "meta": {
        "breadcrumb": [{
            "title": "All Customers",
            "url": "/customers"
        }, {
            "title": "All Customers",
            "url": "/customers"
        }, {
            "title": "View",
            "active": true
        }],
        "pageTitle": "Customers",
        "rule": "admin",
        "authRequired": true
    }
}, {
    "path": "/customers/add",
    "name": "customers-add",
    "meta": {
        "breadcrumb": [{
            "title": "All Customers",
            "url": "/customers"
        }, {
            "title": "All Customers",
            "url": "/customers"
        }, {
            "title": "Add",
            "active": true
        }],
        "pageTitle": "Customers",
        "rule": "admin",
        "authRequired": true
    }
}, {
    "path": "/customers/edit/:id",
    "name": "customers-edit",
    "meta": {
        "breadcrumb": [{
            "title": "All Customers",
            "url": "/customers"
        }, {
            "title": "All Customers",
            "url": "/customers"
        }, {
            "title": "Edit",
            "active": true
        }],
        "pageTitle": "Customers",
        "rule": "admin",
        "authRequired": true
    }
}]

我想在一个循环中迭代 adminRoutes

【问题讨论】：

    标签： javascript vue.js vuejs2 vue-component vue-router


    【解决方案1】：

    您可以将对象合并为一个对象，然后对其进行迭代，如下所示：

    for (let route of [].concat(contactRoutes, userRoutes, customerRoutes)) {
    baseRoutes[0].children.push(route);
}

    这样你就可以一次对所有对象进行交互。

    要动态使用导出的对象而不指定每个对象，您可以执行以下操作：

    const allRoutes = [].concat(...Object.values(adminRoutes));
for (let route of allRoutes) {
    baseRoutes[0].children.push(route);
}

    【讨论】：

    • 这是个好主意。但问题是我每次创建新路由文件时都会添加新变量。有什么方法可以在导出默认值时合并它？
    • @Bilalarshad 你是如何导入你的对象的？
    • 我像这样导出 ``` export default {contactRoutes,userRoutes,customerRoutes} ``` 并像这样导入 ``` import * as adminRoutes from './routes/admin.js'` ``
    • 检查它应该做你需要的编辑
    • 我认为您的问题是正确的，但我仍然收到此错误 ``` 未捕获的错误：[vue-router] "path" is required in a route ``` 可能是我的路线中的问题但它在分离前工作。你能弄清楚吗？
    猜你喜欢
    • 2014-11-29
    • 2019-08-21
    • 2015-08-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-12-12
    • 2020-11-17
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode