JS 轻松搞定数据处理，让前端开发更高效

前言

常规情况下，我们可以把后台返回给我们的数据直接渲染在前台页面上，但不排除一些特殊的情况需要我们对源数据进行处理，例如 element 上传组件，在编辑页面中的回显指定参数为 name 和 url，但是后台返回的如果不是这两个字段名，就需要我们对源数据做进一步的处理。

---

未处理之前的数据

---

需求：

将后台返回 originalList 数组中每一个对象中的 imgs 数组中的每一个对象中的 imgUrl 和userName 字段改为 url 和 name，话不多说，下面直接看代码实例。

---

完整代码

<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      // 模拟接口返回数据
      originalList: [
        {
          isShow: 1,
          correct: true,
          imgs: [
            {
              id: "0",
              url: "https://imge1c2fcf985084fe0ad01c7",
              name: "测试数据111",
            },
            {
              id: "1",
              url: "http:://54",
              name: "测试数据222",
            },
          ],
        },
        {
          isShow: 1,
          correct: false,
          imgs: [
            {
              id: "3",
              url: "https://imge1c2ftegwfqge1c7",
              name: "测试数据333",
            },
            {
              id: "4",
              url: "https://imge1785faewfa01c7",
              name: "测试数据444",
            },
            {
              id: "5",
              url: "https://imgfwqfgdhtad01c7",
              name: "测试数据555",
            },
            {
              id: "6",
              url: "https://imge1cfegdsdfvse0ad01c7",
              name: "测试数据666",
            },
          ],
        },
        {
          isShow: 1,
          correct: false,
          imgs: [
            {
              id: "7",
              url: "https://imge68erwt4ye0ad01c7",
              name: "测试数据777",
            },
          ],
        },
        {
          isShow: 1,
          correct: true,
          imgs: [
            {
              id: "8",
              url: "https://imge1c5fagd0ad01c7",
              name: "测试数据888",
            },
          ],
        },
        {
          isShow: 0,
          correct: true,
          imgs: [
            {
              id: "9",
              url: "https://imge1c2fc86wfegrhad01c7",
              name: "测试数据999",
            },
          ],
        },
      ],
    };
  },
  mounted() {
    // 判断是为了防止空数组报错
    if (this.originalList) {
      this.originalList.forEach((item) => {
        // 调用方法处理数据
        item["imgs"] = this.formatting(item.imgs);
      });
    }
    // 打印处理好的数据
    console.log(this.originalList, "处理好的数据");
  },
  methods: {
    // 处理接口返回数据的方法
    formatting(data) {
      let newImgs = [];
      data.map((item) => {
        newImgs.push({
          imgUrl: item.url,
          codeId: item.id,
          userName: item.name,
        });
      });
      return newImgs;
    },
  },
};
</script>

---

处理后的数据