Vue 通过公共字段,拼接两个对象数组的实例

要完成“Vue 通过公共字段，拼接两个对象数组”的操作，可以使用Vue中的计算属性来实现。

1. 在Vue实例的data中定义两个对象数组：

data: {
  arr1: [
    { id: 1, name: 'A', age: 20 },
    { id: 2, name: 'B', age: 22 },
    { id: 3, name: 'C', age: 18 },
  ],
  arr2: [
    { id: 1, address: 'Beijing', sex: 'M' },
    { id: 2, address: 'Shanghai', sex: 'F' },
    { id: 3, address: 'Guangzhou', sex: 'M' },
  ]
}

1. 定义计算属性，通过两个数组的id字段来组合新的数组：

computed: {
  newArr: function() {
    let resArr = []
    for(let i = 0; i < this.arr1.length; i++) {
      let obj = {}
      obj = Object.assign({}, this.arr1[i])
      for(let j = 0; j < this.arr2.length; j++) {
        if(this.arr1[i].id === this.arr2[j].id) {
          obj = Object.assign(obj, this.arr2[j])
        }
      }
      resArr.push(obj)
    }
    return resArr
  }
}

这段代码中，我们先定义一个空数组resArr，然后遍历arr1中的每一个对象，在遍历过程中，将arr1中当前对象的信息复制到一个新的obj对象中，然后再遍历arr2中的每一个对象，如果在arr2中找到了与arr1中当前对象id相同的对象，就将这个对象的信息复制到obj对象中，最后将obj对象push到resArr数组中。最后返回新的resArr数组，即为两个数组拼接后的结果。

1. 在视图中使用新数组：

<ul>
  <li v-for="item in newArr" :key="item.id">
    {{item.name}}， {{item.age}}， {{item.address}}， {{item.sex}}
  </li>
</ul>

这样，我们就可以在Vue的视图中展示拼接后的新数组了。

示例1:

假设我们有一个商品列表和一个该商品的库存列表，两个列表的信息都需要展示在同一个页面上。这时，我们可以通过Vue实现两个数组的拼接，展示出商品和库存信息的列表。

data: {
  productList: [
    { id: 1, name: 'iPhone X', price: 8999 },
    { id: 2, name: 'iPad Pro', price: 5599 },
    { id: 3, name: 'MacBook Pro', price: 15999 },
  ],
  stockList: [
    { id: 1, stock: 1000 },
    { id: 2, stock: 500 },
    { id: 3, stock: 100 },
  ]
}

computed: {
  proList: function() {
    let resArr = []
    for(let i = 0; i < this.productList.length; i++) {
      let obj = {}
      obj = Object.assign({}, this.productList[i])
      for(let j = 0; j < this.stockList.length; j++) {
        if(this.productList[i].id === this.stockList[j].id) {
          obj = Object.assign(obj, this.stockList[j])
        }
      }
      resArr.push(obj)
    }
    return resArr
  }
}

<ul>
  <li v-for="item in proList" :key="item.id">
    {{item.name}}， {{item.price}}元， 库存：{{item.stock}}件
  </li>
</ul>

示例2：

假设我们需要展示一个学生信息列表，在学生信息中需要展示学生姓名、年龄和性别，还需要展示该学生所在班级的信息（包括班级名称、年级和所选课程）。我们有两个数组，一个保存学生信息，一个保存班级信息，两个数组通过班级号码联合起来。这时，我们可以通过Vue实现两个数组的拼接，展示出完整的学生信息列表。

data: {
  stuList: [
    { id: 1, name: '小明', age: 18, sex: 'M', class_id: 1 },
    { id: 2, name: '小红', age: 19, sex: 'F', class_id: 2 },
    { id: 3, name: '小刚', age: 20, sex: 'M', class_id: 2 },
    { id: 4, name: '小花', age: 18, sex: 'F', class_id: 1 },
  ],
  classList: [
    { id: 1, grade: '高一', name: '1班', course: '数学、语文、英语' },
    { id: 2, grade: '高一', name: '2班', course: '物理、化学、生物' },
  ]
}

computed: {
  fullStuList: function() {
    let resArr = []
    for(let i = 0; i < this.stuList.length; i++) {
      let obj = {}
      obj = Object.assign({}, this.stuList[i])
      for(let j = 0; j < this.classList.length; j++) {
        if(this.stuList[i].class_id === this.classList[j].id) {
          obj = Object.assign(obj, this.classList[j])
        }
      }
      resArr.push(obj)
    }
    return resArr
  }
}

<ul>
  <li v-for="item in fullStuList" :key="item.id">
    {{item.name}}， {{item.age}}岁， {{item.sex}}， {{item.grade}}{{item.name}}，选修{{item.course}}
  </li>
</ul>

这样，我们就可以在Vue的视图中展示完整的学生信息了。