1. var arr2=[{id:1,name:'23'}]
  2. var arr1=[{id:1,car:'car2'}]
  3. const combined = arr2.reduce((acc, cur) => {
  4. const target = acc.find(e => e.id === cur.id);
  5. console.log(target)
  6. if (target) {
  7. Object.assign(target, cur);
  8. } else {
  9. acc.push(cur);
  10. }
  11. return acc;
  12. }, arr1);
  13. console.log(combined);

arr2.reduce(function(acc,cur),arr1):reduce方法传入的函数的第一个参数acc是数组元素的累计值,reduce方法的第二参数arr1是指定累计值acc的初始值。

所以一开始acc的值就是arr1,cur的值是arr2[0].

const target = acc.find(e => e.id === cur.id); target返回的是在arr1中id与arr2[0].id值相同的对象:即{id:1,name:'23'}

例如var target = [{id:1},{id:2}].find(e=> e.id==1)//target的值为{id:1}

Object.assign(target, cur)//将cur中的值复制到target中,若是相同属性就覆盖,若是不同属性就添加

例如:Object.assign({id:1,name:'23'},{id:1,car:'car1'})//结果是得到对象{id: 1, name: "23", car: "car1"}

上面if...else...语句的意思就是,在arr1数组中找到了与arr2数组元素相同的id的就合并,没有找到就讲arr2数组的该元素push到arr1数组中,最后得到的acc及arr1与arr2合并后的数组。

一道题目学ES6 API,合并对象id相同的两个数组对象的更多相关文章

  1. 续~ES6 新语法 (symbol、set集合、 数组对象的filter(),reduce(),weakset(),map()方法)

    一.symbol 回顾数据类型: 基本类型(原始类型): String Number Boolean Undifined Null Symbol 引用类型: Objects 1.1 创建symbol ...

  2. js 合并两个数组对象

    项目背景是合并a = [{name:'dede'},{name:'jenny'}],  b = [{age:18},{age:19}]  合并成[{name:'dede',age:18},{name: ...

  3. js两个数组对象通过相同元素匹配筛选

    let a = [ { name: 'joy', year: '24' }, { name: 'eve', year: '25' } ] let b = [ { name: 'joy', city: ...

  4. JQ 数组动态添值,对象动态添值,判断数组/对象是否为空

    1.数组动态添值 首先声明一个空数组:var data = new Array(); 向数组中添值 :data.push('添加的值'); 示例:

  5. js 两个数组对象根据账号比较去重,解决直接splice后数组索引改变

    目的获取Arr2中不包含在arr1中的对象 根据Account进行比较,如果相等则删除tempArr数组对象. 结果返回张三 var arr1=[{"account":" ...

  6. JS深度判断两个数组对象字段相同

    /** * 判断此对象是否是Object类型 * @param {Object} obj */ function isObject(obj){ return Object.prototype.toSt ...

  7. JavaScript把两个数组对象合并成一个一一对应的数组对象

    合并数组或者对象在数组或对象前面加...,是es6的新写法,然后数组的map方法会返回数组. var obj1 = [{ , "model": "XQG70-S1208F ...

  8. NodeList类数组对象: HTMLCollection , NamedNodeMap,两套API(childNodes , children)

    快捷键:leishuzuduixiang(类数组对象)  bianlijiedian(遍历节点)  jiedian(节点)  htmlcollection , namednodemap , nodel ...

  9. js- 类数组对象

    JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法. 而对于一 ...

随机推荐

  1. hdu 5055 Bob and math problem (很简单贪心)

    给N个数字(0-9),让你组成一个数. 要求:1.这个数是奇数 2.这个数没有前导0 问这个数最大是多少. 思路&解法: N个数字从大到小排序,将最小的奇数与最后一位交换,把剩下前N-1位从大 ...

  2. 『学了就忘』Linux基础命令 — 18、Linux命令的基本格式

    目录 1.命令提示符说明 2.命令的基本格式 (1)举例ls命令 (2)说明ls -l命令的 输出内容 1.命令提示符说明 [root@localhost ~] # []:这是提示符的分隔符号,没有特 ...

  3. ReentrantLock & AQS

    概念 Syncronized由于其使用的不灵活性,逐渐的被抛弃~ 常用解决方案,有以下三种使用方式:(暂时的不考虑condition的应用,暂时还没有总结出来) 同步普通方法,锁的是当前对象. 同步静 ...

  4. swagger3.0(springboot)消除basic-error-controller

    1.新建springboot项目,可以通过https://start.spring.io/快速生成springboot项目. 2.引入jar依赖: <dependency> <gro ...

  5. Jenkins+SVN+Maven+testNG管理项目

    1.登录访问:http://localhost:8080/jenkins 2.系统管理 => 全局工具配置 => ADD JDK  AND  Add Maven 3.安装SVN插件:系统管 ...

  6. Linux 权限控制

    权限管理概述 为什么要进行权限管理? 因为在生产服务器上,如果要让普通用户登录,就要给他分配合理的权限,在服务器上需要为用户严格定义权限等级,否则如果所有人都是roσt权限,权限过高容易导致岀现误操作 ...

  7. Alpha冲刺.2李霆政

    一.基本情况 队名:不行就摆了吧 组长博客:https://www.cnblogs.com/Microsoft-hc/p/15534079.html 小组人数: 8 二.冲刺概况汇报 谢小龙 过去两天 ...

  8. Django笔记&教程 3-3 模板常用语法

    Django 自学笔记兼学习教程第3章第3节--模板常用语法 点击查看教程总目录 本文主要参考:https://docs.djangoproject.com/en/2.2/ref/templates/ ...

  9. Numpy (嵩老师.)

    import numpy as np Numpy 一元函数 对ndarray中的数据执行元素级运算的函数 np.abs(x) np.fabs(x) 计算数组各元素的绝对值 np.sqrt(x) 计算数 ...

  10. 编译使用nginx

    nginx-1.18.0 ./configure --prefix=$HOME/nginx --with-http_ssl_module make -j32; make install [fangju ...