ES6重构数组

最新推荐文章于 2021-09-28 16:38:41 发布

原创最新推荐文章于 2021-09-28 16:38:41 发布 · 846 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6

本文介绍如何利用ES6的特性，特别是解构赋值和映射方法，将图1所示的数组转换成图2所示的对象格式。在React环境中，通过`composeData`方法，首先解构数组元素，然后遍历并重组`source_metric_list`，将其转化为以`metric`为键，整个对象为值的新结构。最终，将重构后的对象与原始数据的其余部分合并，完成转换。

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

下面将展示用ES6把图1的数组转换成图2的数组格式，我们先想把红色部分的名字单独提出来做对象名，其余的绿色部分作为对象体的值
↑图1

在这里插入图片描述
↑图2

下面是ES6代码，语言为react，其他语言也可以借鉴，composeData为方法名

const composeData = (data) => {
    return data?.map((item) => {
        const {
            source_metric_list,
            ...rest
        } = item;
        const source_metric_obj = source_metric_list.reduce((r, t, i) => {
            const result = {
                ...r,
                [t.metric]: t
            }
            return result
        }, {})

        return {
            ...source_metric_obj,
            ...rest
        }
        
    })
  }
  console.log(composeData(data))

其中，data传入的数据格式为图1的rankList（总list），.map()循环的item的结构为图1的rankList[0]

const {
            source_metric_list,
            ...rest
        } = item;

↑这部分的意思为解构，把source_metric_list从item中单独解构出来，其余的部分赋给rest
在这里插入图片描述
↑解构出来的source_metric_list
↑其余部分的rest
可以基于图1参考差别
随后部分对source_metric_list数组进行重构

const source_metric_obj = source_metric_list.reduce((r, t, i) => {
            const result = {
                ...r,
                [t.metric]: t
            }
            return result
        }, {})

↑这部分代码中，r为空（不知道为啥，不影响），t为source_metric_list的每一项，i没有用到
在这里插入图片描述

“ [t.metric]: t”把每一项的metric拿出来做名字，然后t整体作为值，return出来是这个样子的

最最后把修改过的source_metric_obj与开始的rest进行拼接，重构就完成了，最后的console.log放在下图（就是开始的图2啦）
在这里插入图片描述