一道题目学ES6 API,合并对象id相同的两个数组对象
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相同的两个数组对象的更多相关文章
- 续~ES6 新语法 (symbol、set集合、 数组对象的filter(),reduce(),weakset(),map()方法)
一.symbol 回顾数据类型: 基本类型(原始类型): String Number Boolean Undifined Null Symbol 引用类型: Objects 1.1 创建symbol ...
- js 合并两个数组对象
项目背景是合并a = [{name:'dede'},{name:'jenny'}], b = [{age:18},{age:19}] 合并成[{name:'dede',age:18},{name: ...
- js两个数组对象通过相同元素匹配筛选
let a = [ { name: 'joy', year: '24' }, { name: 'eve', year: '25' } ] let b = [ { name: 'joy', city: ...
- JQ 数组动态添值,对象动态添值,判断数组/对象是否为空
1.数组动态添值 首先声明一个空数组:var data = new Array(); 向数组中添值 :data.push('添加的值'); 示例:
- js 两个数组对象根据账号比较去重,解决直接splice后数组索引改变
目的获取Arr2中不包含在arr1中的对象 根据Account进行比较,如果相等则删除tempArr数组对象. 结果返回张三 var arr1=[{"account":" ...
- JS深度判断两个数组对象字段相同
/** * 判断此对象是否是Object类型 * @param {Object} obj */ function isObject(obj){ return Object.prototype.toSt ...
- JavaScript把两个数组对象合并成一个一一对应的数组对象
合并数组或者对象在数组或对象前面加...,是es6的新写法,然后数组的map方法会返回数组. var obj1 = [{ , "model": "XQG70-S1208F ...
- NodeList类数组对象: HTMLCollection , NamedNodeMap,两套API(childNodes , children)
快捷键:leishuzuduixiang(类数组对象) bianlijiedian(遍历节点) jiedian(节点) htmlcollection , namednodemap , nodel ...
- js- 类数组对象
JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法. 而对于一 ...
随机推荐
- cf18B Platforms(仔细谨慎题)
题意: In one one-dimensional world there are n platforms. Platform with index k (platforms are numbere ...
- u-boot 1.1.6 start.S 代码学习<转>
---转自 http://blog.csdn.net/rockhard/article/details/4166642 ------ /* 参考了别人的一些笔记,看完了启动代码. 本文档记录在看代码时 ...
- N 种仅仅使用 HTML/CSS 实现各类进度条的方式
本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式,通过本文,你可能可以学会: 通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 &l ...
- 浅谈对typora的使用
内容概要 - 什么是typora - typora的具体使用 目录 内容概要 - 什么是typora - typora的具体使用 1. 什么是typora 2.typora的具体使用 1.标题级别 2 ...
- 安装、卸载 node.js出错 Could not access network location *:\node.js\ 出错
上周五,WIN10自动更新系统,导致我的node.js 和 Gradle 还有解压的winRAR都不能用!!!可恶 自动更新!!可恶啊!!! 然后我想把node.js重新卸载了再安装,结果 很慌很慌, ...
- Abp Vnext Vue3 的版本实现
基于ABP Vnext的二次开发,前端 vue3.0,Typescript,Ant Design Vue ,Vben Admin 的后台管理框架. 技术点 Net Core5.0 ABP Vnext ...
- Mysql教程:(六)修改语句、、删除语句、字符查询like
1.修改语句 update 表名 set where 条件 mysql> update student set birth=1988,department='中文系' where id=901 ...
- JMeter学习笔记--工具简单介绍
一.JMeter 介绍 Apache JMeter是纯JAVA桌面应用程序,被设计为用于测试客户端/服务端结构的软件(例如web应用程序).它可以用来测试静态和动态资源的性能,例如:静态文件,Java ...
- [atAGC049F]Happy Sequence
定义$L=2\cdot 10^{5}$,$g(x)=\sum_{i=1}^{n}|b_{i}-x|-|a_{i}-x|$,则合法当且仅当$\forall 0\le x\le L,g(x)\ge 0$, ...
- 2020第十三届全国大学生信息安全竞赛创新实践能力赛rceme writerup
审计代码 传入参数a,进入parserIfLabel函数 发现参数a的模板,a的格式要匹配pattern,如{if:payload}{end if} 可知ifstr是a中匹配的第一组的值,即paylo ...