var arr2=[{id:1,name:'23'}]
var arr1=[{id:1,car:'car2'}]
const combined = arr2.reduce((acc, cur) => {
const target = acc.find(e => e.id === cur.id);
console.log(target)
if (target) {
Object.assign(target, cur);
} else {
acc.push(cur);
}
return acc;
}, arr1);
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. 便宜的回文串(区间DP)

    题目链接:便宜的回文串 这道题刚开始其实还是没有思路的.没办法,只能看题解了... 其实我们在思考问题时,考虑到一段串增或减时会改变它的长度,所以转移时会麻烦... 但其实不用考虑那么多的问题,我们只 ...

  2. nod_1009 数字1的数量(分析题)

    题意: 给定一个十进制正整数N,写下从1开始,到N的所有正数,计算出其中出现所有1的个数. 例如:n = 12,包含了5个1.1,10,12共包含3个1,11包含2个1,总共5个1. Input 输入 ...

  3. 第03课 OpenGL 添加颜色

    添加颜色: 作为第二课的扩展,我将叫你如何使用颜色.你将理解两种着色模式,在下图中,三角形用的是光滑着色,四边形用的是平面着色 上一课中我教给您三角形和四边形的绘制方法.这一课我将教您给三角形和四边形 ...

  4. cf Inverse the Problem (最小生成树+DFS)

    题意: N个点.N行N列d[i][j]. d[i][j]:结点i到结点j的距离. 问这N个点是否可能是一棵树.是输出YES,否则输出NO. 思路: 假设这个完全图是由一棵树得来的,则我们对这个完全图求 ...

  5. 集合之Map接口

    Map接口概述 Map与Collection并列存在.用于存储具有映射关系的数据 : key-value Map 中的 key 和 value 都可以是任何引用类型的数据 Map 中的 key 用Se ...

  6. [python]django关闭debug

    1.版本声明 python3.6.5 django2.0.6 2.打开项目-setting setting.py中DEBUG默认是等于True,这样的话当访问接口存在错误会直接展示项目的所有配置信息, ...

  7. 2020GACTF部分wp

    GACTF misc 签到 给了二维码图 切割再拼上就行 crymisc 给了一个crymisc.docx 无法打开 用file看一下 把后缀名改成zip然后解压 这里奇怪的是用winzip解压会提示 ...

  8. vue项目在打包时,去掉所有的console.log输出

    npm i babel-plugin-transform-remove-console -S const proPlugins = [];// 开发环境 不做操作 // 生产环境,去掉console ...

  9. spring boot(三)整合 redis

    Spring boot 集成redis 为什么要用redis,它解决了什么问题? Redis 是一个高性能的key-value内存数据库.它支持常用的5种数据结构:String字符串.Hash哈希表. ...

  10. es插件安装

    首先安装找到一样版本的地址: Release v7.6.1 · medcl/elasticsearch-analysis-ik (github.com) 下载最上面的编译版 将文件解压到plugins ...