javascript - 如何在 javascript 或 vue 中在多个对象上迭代一个循环
问题描述
基本上，我正在重构我的路线部分。我正在像这样从一个文件中导出多个变量
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);
}
但当时我正在一个一个地导入文件，对象是这样的。
[{
"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
解决方案
您可以将对象合并为一个对象，然后对其进行迭代，如下所示：
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);
}
推荐阅读
- javascript - 数组中所有值作为 div 的文本出现的次数
- java - 如何让2个动画连续运行
- vba - 如何解决错误 483：“对象不支持此属性或方法”
- r - 您可以从 (HTML) RMarkdown 文档发送电子邮件吗？
- r - 是否有比 flextable 更快的方法将表格添加到 ggplot 对象？
- python - ImportError：找不到 DLL“msvcp140.dll 或 msvcp140_1.dll”
- vue.js - 找不到模块：错误：无法解析“postcss-loader”vue 2.5.2 webpack 3.12.0
- android - Android + ESP32 通过蓝牙 (BLE) 发送数据
- r - 从 glmnet 的 tidymodel 实现中获取拟合值
- mongodb - 排序和过滤双嵌套 mongo 数组