如何用JS筛选数组中对象的指定属性并拼接

如何用JS筛选数组中对象的指定属性并拼接

一.背景

有这样一个需求，要一个展示用户的下拉框，而界面看到的是用户姓名-性别的形式，但是传给后端是其用户id。

二.代码实现

2.1.造数据

我们可以看到下面代码中的数组userList中对象的属性有userId，userName，phone，sex作为我们的数据集，而数组userSelectList作为我们处理后的数据集，字符串userId用来模拟后端接收数据。

  data() {
    return {
      //原数据集
      userList: [
        {
          userId: 1,
          userName: "何宇",
          phone: 123,
          sex: "男",
        },
        {
          userId: 2,
          userName: "刘亦菲",
          phone: 456,
          sex: "女",
        },
        {
          userId: 3,
          userName: "郭德纲",
          phone: 789,
          sex: "男",
        },
      ],
      //处理后的数据集
      userSelectList: [],
      //用来模拟后端接收数据
      userId: ""
    };
  },

2.2.筛数据

我们可以用数组的forEach方法来实现。

  methods: {
    userListToUserSelectList() {
      this.userList.forEach((item) => {
        let obj = item;
        this.userSelectList.push({
          userId: obj.userId,
          userName: obj.userName + "-" + obj.sex,
        });
      });
    },

2.3.完整代码

<template>
  <div>
    <fieldset>
      <legend>如何用VUE筛选数组中对象的指定属性</legend>
      <!-- 姓名 -->
      <el-form enctype="multipart/form-data">
        <el-form-item label="用户姓名">
          <el-select v-model="userId" placeholder="请选择用户姓名">
            <el-option
              v-for="item in userSelectList"
              :label="item.userName"
              :value="item.userId"
              :key="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户标识">
          <el-input style="width: 220px" v-model="userId" disabled></el-input>
        </el-form-item>
      </el-form>
    </fieldset>
  </div>
</template>
<script>
export default {
  created: function () {
    this.userListToUserSelectList();
  },
  data() {
    return {
      //原数据集
      userList: [
        {
          userId: 1,
          userName: "何宇",
          phone: 123,
          sex: "男",
        },
        {
          userId: 2,
          userName: "刘亦菲",
          phone: 456,
          sex: "女",
        },
        {
          userId: 3,
          userName: "郭德纲",
          phone: 789,
          sex: "男",
        },
      ],
      //处理后的数据集
      userSelectList: [],
      //用来模拟后端接收数据
      userId: "",
    };
  },
  methods: {
    userListToUserSelectList() {
      this.userList.forEach((item) => {
        let obj = item;
        this.userSelectList.push({
          userId: obj.userId,
          userName: obj.userName + "-" + obj.sex,
        });
      });
    },
  },
};
</script>

<style scoped>
fieldset {
  /* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*/
  border: 2px solid #dcdfe6;
  text-align: left;
  border-radius: 8px;
  margin: 0 auto;
  width: 50%;
}
</style>

三.效果

效果如下所示。