[Javascript] Deep merge in Javascript with Ramda.js mergeDeepWith
Javascript's Object.assign is shadow merge, loadsh's _.merge is deep merge, but has probem for array.
const person = {
name: { first: "Joe" },
age: ,
color: "green",
pets: ["dog", "lizard"]
}; const update = {
name: { last: "Smith" },
color: "blue",
book: "Harry Potter",
pets: ["cat"]
};
const merged1 = {
...person,
...update,
name: { ...person.name, ...update.name },
pets: [...person.pets, ...update.pets]
}; /*Object {name: Object, age: 23, color: "blue", pets: Array[3], book: "Harry Potter"}
name: Object
age: 23
color: "blue"
pets: Array[3]
0: "dog"
1: "lizard"
2: "cat"
book: "Harry Potter" */ const merged2 = _.merge({}, person, update);
/*
name: Object
first: "Joe"
last: "Smith"
age: 23
color: "blue"
pets: Array[2]
0: "cat"
1: "lizard"
book: "Harry Potter"
*/
We can use Ramda.js to easy solve the problem:
console.log(R.mergeDeepWith(R.concat, person, update));
/*
Object {name: Object, age: 23, color: "blue", pets: Array[2], book: "Harry Potter"}
name: Object
first: "Joe"
last: "Smith"
age: 23
color: "blue"
pets: Array[2]
0: "cat"
1: "lizard"
book: "Harry Potter"
*/
To make it more point-free style and more reuseable, we can do:
const _merge = R.mergeDeepWith(R.concat);
console.log(_merge(person, update));
[Javascript] Deep merge in Javascript with Ramda.js mergeDeepWith的更多相关文章
- 翻译连载 | 附录 C:函数式编程函数库-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- javascript马赛克遮罩图片切换效果:XMosaic.js(转)
新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...
- JavaScript手札:《编写高质量JS代码的68个有效方法》(一)(1~5)
编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...
- js对象详解(JavaScript对象深度剖析,深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- 翻译连载 | 第 9 章:递归(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- JavaScript面向对象(三)——继承与闭包、JS实现继承的三种方式
前 言 JRedu 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天 ...
随机推荐
- Centos7/RHEL 7 配置静态路由
如图: 业务地址:192.168.10.0/24 192.168.20.0/24管理地址:172.168.10.0/24 172.168.20.0/24 需求:每台主机配置两张网卡,分别连 ...
- docker从零开始 存储(五)存储驱动介绍
关于存储驱动程序 要有效地使用存储驱动程序,了解Docker如何构建和存储镜像以及容器如何使用这些镜像非常重要.您可以使用此信息做出明智的选择,以确定从应用程序中保留数据的最佳方法,并避免在此过程中出 ...
- hdu 1534(差分约束)
Schedule Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- linux基础学习目录
以下用一个表格来罗列linux默认的目录或文件及其用途: 目录/文件 用途 来源 / /处于Linux文件系统树形结构的最顶端,它是Linux文件系统的入口,所有的目录.文件.设备都在/之下. - / ...
- STL模板整理 set
SET set作为一个容器也是用来存储同一数据类型的数据类型,并且能从一个数据集合中取出数据,在set中每个元素的值都唯一,而且系统能根据元素的值自动进行排序.应该注意的是set中数元素的值不能直接被 ...
- paramiko 使用总结(SSH 操作远端机器)
1.用户名.密码登陆方式 import paramikoparamiko.util.log_to_file('paramiko.log') # 记录日志文件ssh = paramiko.SSHClie ...
- LightOJ 1012.Guilty Prince-DFS
Guilty Prince Time Limit: 2 second(s) Memory Limit: 32 MB Once there was a king named Akbar. He had ...
- POJ 3264 Balanced Lineup 【线段树/区间最值差】
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 62103 Accepted: 29005 Cas ...
- python——入门系列(一)索引与切片
1.索引和切片:python当中数组的索引和其他语言一样,从0~n-1,使用索引的方法也是中括号,但是python中的切片的使用简化了代码 索引:取出数组s中第3个元素:x=s[2] 切片:用极少的代 ...
- P1162 填涂颜色 洛谷
题目描述 由数字0 组成的方阵中,有一任意形状闭合圈,闭合圈由数字1构成,围圈时只走上下左右4个方向.现要求把闭合圈内的所有空间都填写成2.例如:6X6的方阵(n=6),涂色前和涂色后的方阵如下: 0 ...