js数组对象合并

宋国庆
  • 40
  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 中为啥是所有数据呢?

回复
阅读 922
3 个回答
西索酱
  • 253
✓ 已被采纳

通常这个情况不用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是全部过一遍,

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

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。

以此类推继续遍历。。。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏