如何把对象数据转化为数组

在日常开发中，我们经常会遇到需要把对象（Object）转化为数组（Array）的场景，比如要统一处理对象的每一项数据，或者给组件传递数组格式的配置项。

下面就用一个实际例子，带大家一步步实现这个转化过程。

我们有一个包含两个配置项的对象：

javascript 复制代码

let obj = {
    sys_app: [
        {
          "app_id": "1671406669800796161",
          "app_code": "portal"
        },
        {
          "app_id": "1671406745336016898",
          "app_code": "system_manager"
        },
    ],
    sys_config: [
        {
          "config_name": "系统配置是否已经初始化的标识",
          "config_id": "1",
        },
        {
          "config_name": "验证码开关",
          "config_id": "23",
        },
    ],
};

Object.entries() 是 ES8 提供的一个方法，它可以把一个对象自身的可枚举属性，转化为一个 [key, value] 格式的二维数组。

使用方式：

javascript 复制代码

console.log(Object.entries(obj));

转化后的结果：

javascript 复制代码

[
    [
        "sys_app",
        [
            {
                "app_id": "1671406669800796161",
                "app_code": "portal"
            },
            {
                "app_id": "1671406745336016898",
                "app_code": "system_manager"
            }
        ]
    ],
    [
        "sys_config",
        [
            {
                "config_name": "系统配置是否已经初始化的标识",
                "config_id": "1"
            },
            {
                "config_name": "验证码开关",
                "config_id": "23"
            }
        ]
    ]
]

如果我们想要把 [key, value] 这种格式，改成更易读的 { name, value } 对象格式，可以配合 map() 来实现：

javascript 复制代码

let list = Object.entries(obj).map(([name, value]) => ({ name, value }));
console.log(list);

运行结果：

javascript 复制代码

[
    {
        "name": "sys_app",
        "value": [
            {
                "app_id": "1671406669800796161",
                "app_code": "portal"
            },
            {
                "app_id": "1671406745336016898",
                "app_code": "system_manager"
            }
        ]
    },
    {
        "name": "sys_config",
        "value": [
            {
                "config_name": "系统配置是否已经初始化的标识",
                "config_id": "1"
            },
            {
                "config_name": "验证码开关",
                "config_id": "23"
            }
        ]
    }
]

完整代码如下：

javascript 复制代码

let obj = {
    sys_app: [
        {
          "app_id": "1671406669800796161",
          "app_code": "portal"
        },
        {
          "app_id": "1671406745336016898",
          "app_code": "system_manager"
        },
    ],
    sys_config: [
        {
          "config_name": "系统配置是否已经初始化的标识",
          "config_id": "1",
        },
        {
          "config_name": "验证码开关",
          "config_id": "23",
        },
    ],
};

let list = Object.entries(obj).map(([name, value]) => ({ name, value }))
console.log(list)

总结

Object.entries(obj)：
- 作用：将对象转为 [[key, value], [key, value]] 格式的二维数组
- 注意：只会处理对象自身的、可枚举的属性
map(([name, value]) => ({ name, value }))：
- 这里用到了数组解构 ，直接把 [key, value] 拆成了 name 和 value 两个变量
- 箭头函数里的 ({ name, value }) 是简写，等价于 { return { name: name, value: value }; }

拓展

使用 Object.keys(obj) 获取keys：

javascript 复制代码

let list = Object.keys(obj)
console.log(list)

结果：

javascript 复制代码

 ['sys_app', 'sys_config']

使用 Object.values(obj) 获取values：

javascript 复制代码

let list = Object.values(obj)
console.log(list)

结果：

javascript 复制代码

[
    [
        {
            "app_id": "1671406669800796161",
            "app_code": "portal"
        },
        {
            "app_id": "1671406745336016898",
            "app_code": "system_manager"
        }
    ],
    [
        {
            "config_name": "系统配置是否已经初始化的标识",
            "config_id": "1"
        },
        {
            "config_name": "验证码开关",
            "config_id": "23"
        }
    ]
]