写点什么

前端开发:数据处理方法分享(其一)

用户头像
三掌柜
关注
发布于: 2021 年 03 月 23 日
前端开发:数据处理方法分享(其一)

在前端开发过程中会遇到各种各样的数据处理需求,开发者会根据不同的业务需求来实现对应的业务功能,但是数据格式是固定不变的,那么在遇到一些数据不是想要的数据怎么办呢?那就需要开发者对获取到的特定数据进行二次处理,一些简单的处理直接通过数据转换类型或者拼接即可实现,再复杂一点的数据就涉及到算法来处理。

本篇博文就来分享一下不涉及算法的单纯的对数据存取值的处理方法,案例以实际开发过程中的需要来说明:是以获取到的数据源中的数组中取出某一字段元素,然后拼接取出的数组元素,最后赋值给一个 string 对象。

<template>
  <Container>
    <div slot="body" class="done-detail">
      <van-divider content-position="left">人员信息</van-divider>
      <van-cell-group>
             <van-cell title="地址" :value="addressStr" />
      </van-cell-group>
    </div>
  </Container>
</template>
<script>
 export default {
  data() {
    return {
      odcAddress: [],
      addressStr:""
    };
  },
 methods: {
   方法一:
   async getApplyDetail() {
      this.$service.apply
        .applyQuery({ params: { id: this.$route.params.id } })
        .then((r) => {
          if (r.success) {
            r.data.accessList.forEach(element => {
                this.addressStr += element.accessName; //将数组里面的元素拼接成字符串(但是要注意数据类型如果不是字符串会自动加)
              });
          }
        });
    },
    方法二:
    async getApplyDetail() {
      this.$service.apply
        .applyQuery({ params: { id: this.$route.params.id } })
        .then((r) => {
          if (r.success) {
            r.data.accessList.forEach(element => {
                this.odcAddress.push(element.accessName);
              });
               this.addressStr = this.odcAddress.join(); //将数组里面的元素拼接成字符串
          }
        });
    },
},
}
</script>

复制代码



需求不复杂,处理方法也不复杂,但是很有效,就分享一下,以备后期开发使用需要。

以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿 by 三掌柜”,三掌柜的新浪微博“三掌柜 666”,欢迎关注!

三掌柜的微信公众号:


三掌柜的新浪微博:


发布于: 2021 年 03 月 23 日阅读数: 9
用户头像

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

评论 (1 条评论)

发布
用户头像
3月日更打卡第十六天
2021 年 03 月 23 日 08:55
回复
没有更多了
前端开发:数据处理方法分享(其一)