前端开发：数据处理方法分享（其一）

2021 年 11 月 23 日
本文字数：958 字
阅读完需：约 3 分钟

前言

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

示例

本篇博文就来分享一下不涉及算法的单纯的对数据存取值的处理方法，抛开所有的算法不讲，这里只讲关于数据处理相关的知识点，案例以实际开发过程中的需要来说明：是以获取到的数据源中的数组中取出某一字段元素，然后拼接取出的数组元素，最后赋值给一个 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>