js 修改数组中对象的键名属性名

原创已于 2022-11-16 16:50:54 修改 · 2.9k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2022-11-16 16:43:33 首次发布

本文介绍了如何使用JavaScript将后台返回的数据中对象的键名从'id'和'title'转换为'key'和'label'，包括处理没有嵌套children数组和存在嵌套children数组两种情况。示例代码展示了如何通过map函数实现这一转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js 修改数组中对象的键名

使用场景：后台返回的数据和我们需要数据的对象键名，也就是对象key 对应不上，例如下面代码

后台返回

const menuList =[
{id: 1, title: '用户管理', children: Array(1)}
{id: 2, title: '权限管理', children: Array(1)}
{id: 3, title: '商品管理', children: Array(1)}
{id: 4, title: '订单管理', children: Array(1)}
{id: 5, title: '数据统计', children: Array(1)}]

我们需要的对象名为key 和label，也就是最后需要的数据

const menuList =[
{key: 1, label: '用户管理', children: Array(1)}
{key: 2, label: '权限管理', children: Array(1)}
{key: 3, label: '商品管理', children: Array(1)}
{key: 4, label: '订单管理', children: Array(1)}
{key: 5, label: '数据统计', children: Array(1)}]

可以这样处理数据，没有嵌套children数组的情况

const newData = menuList.map((item)=>{
  return {
    key: item['id'],
    label: item['title']
  }
})

嵌套children数组的情况，可以这样处理

const newData = menuList.map((item)=>{
  return {
    key: item['id'],
    label: item['title'],
    children:item.children.map((item2)=>{
      return {
        key:item2['id'], 
        label:item2['title']  
      }
    })
  }
})