对接口返回的数据 数组的循环

 双重循环

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 Vue 3 的响应式系统和遍历算法来实现循环修改树形数据属性名的功能。具体实现方式如下: 1. 定义一个函数 `updateTreeData`,该函数接受两个参数:`treeData` 和 `oldKey`,其中 `treeData` 是一个树形数据数组,`oldKey` 是要修改的属性名。 2. 在函数内部,使用 Vue 3 的 `reactive` 函数将 `treeData` 转换为响应式对象,并使用 `traverseTreeData` 函数遍历树形数据。 3. 在 `traverseTreeData` 函数中,使用 `Object.keys` 函数获取每个节点的属性名,并判断是否与 `oldKey` 相同。如果相同,则使用 `Reflect.defineProperty` 函数修改属性名,并将新属性名添加到节点中。 4. 最后返回修改后的树形数据数组。 示例代码如下: ```javascript import { reactive } from 'vue' function updateTreeData(treeData, oldKey) { const reactiveTreeData = reactive(treeData) function traverseTreeData(data) { if (Array.isArray(data)) { data.forEach(item => traverseTreeData(item)) } else if (typeof data === 'object') { const keys = Object.keys(data) keys.forEach(key => { if (key === oldKey) { const newKey = 'newKey' Reflect.defineProperty(data, newKey, Object.getOwnPropertyDescriptor(data, oldKey)) delete data[oldKey] data[newKey] = true } else { traverseTreeData(data[key]) } }) } } traverseTreeData(reactiveTreeData) return reactiveTreeData } ``` 使用示例: ```javascript const treeData = [ { id: 1, name: 'node1', children: [ { id: 2, name: 'node2', children: [ { id: 3, name: 'node3', isLeaf: true } ] } ] } ] const updatedTreeData = updateTreeData(treeData, 'isLeaf') console.log(updatedTreeData) ``` 输出结果: ```javascript [ { id: 1, name: 'node1', children: [ { id: 2, name: 'node2', children: [ { id: 3, name: 'node3', newKey: true } ] } ] } ] ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值