js数组对象合并

Question

1. 两个数组
   
2. 循环数组
   
3. 图一
   
4. 图二
   
5. 原文代码

    var arr1 = [{
        hour: '2021-12-1',
        val: 'arr1数组1.1',
        val2: 'arr1数组1.2',
      },
      {
        hour: '2021-12-2',
        val: 'arr1数组2.1',
        val2: 'arr1数组2.2',
      },
      {
        hour: '2021-12-3',
        val: 'arr1数组3.3',
        val2: 'arr1数组3.4',
      },
      {
        hour: '2021-12-8',
        val: 'arr1数组4.1',
        val2: 'arr1数组4.2',
      },
      {
        hour: '2021-12-12',
        val: 'arr1数组5.1',
        val2: 'arr1数组5.2',
      },
    ]

    var arr2 = [{
        time: '2021-12-1',
        str: 'arr2数组1'
      }, {
        time: '2021-12-2',
        str: 'arr2数组2'
      },
      {
        time: '2021-12-3',
        str: 'arr2数组3'
      },
      {
        time: '2021-12-26',
        str: 'arr2数组4'
      },
      {
        time: '2021-12-27',
        str: 'arr2数组5'
      },

    ]
    var arr = []
    arr1.forEach(it => {
      arr2.forEach(element => {
        if (it.hour === element.time) {
          // 此处可以打印 两个数组中 相等地值  打印结果图1
          // console.log(it.hour);
        }else{
          // 此处需要打印 两个数组中不同地日期
          // 但是结果如图 2
          console.log(it.hour);
        }
      })
    })
  </script>

问题是 判断中 else 中为啥是所有数据呢？

Answer 1

通常这个情况不用foEach，可以考虑reduce 或者map

let arr1 = []
let arr2 = []
let result = arr1.reduce{
    (pre,cur)=>{
        let ind = pre.findIndex(e=>e.time==cur.hour)
        if(ind === -1){
            pre.push(cur)
        }else{
            pre[ind].concat(cur)
        }
        return pre
    },
arr2
}

forEach 就是枚举的处理，就像广播体操的时候喊1/234,2/234,3/234,4/234，也就是it/element[] 结构，无论it是多少，element是全部过一遍，

Answer 2

因为是两次循环，所以每个都会有比较， 你看输出会发现 1 2 3 只输出4次，而另外2个输出5次。因为1 2 3 在数组2中存在，所以会有一次走 if 语句。

Answer 3

arr1遍历，当it为arr1[0]元素时，此时it.hour为2021-12-1，arr2进行遍历发现it.hour与element.time相等，进入到if语句，arr2继续遍历，后面四项均不与it.hour相等，进入else，打印4次console.log。

arr1继续遍历，当it为arr1[1]元素时，此时it.hour为2021-12-2，arr2进行遍历发现it.hour与arr2第二项元素element.time相等，进入到if语句，其余四项均不与it.hour相等，进入else，打印4次console.log。

以此类推继续遍历。。。