Edited at

lodash.mergeで配列自体をマージする

More than 3 years have passed since last update.

マニュアルに明記してあるのだが、挙動を抑えづらいのでJSBinで実際にコードを走らせつつ確認する。


lodash.mergeとは

再帰的にObjectを合体する関数。配列に対しては、中身がObjectなら同インデックスのObject同士を合体する。JSBinでみる

var merged;

merged = _.merge([
{
name: 'banana',
price: 80
}, {
name: 'apple',
price: 120
}
], [
{
color: 'yellow',
category: 'vegetable'
}, {
color: 'red',
category: 'fruit'
}
]);

console.log(merged); /*=>
[{
category: "vegetable",
color: "yellow",
name: "banana",
price: 80
}, {
category: "fruit",
color: "red",
name: "apple",
price: 120
}]
*/


配列自体を合体する

配列の中身がObjectでない場合はマージ不能と判定されて後に指定した配列が適用されるのだが、下の例のように配列自体を合体して欲しい場合がある。JSBinでみる

var merged;

merged = _.merge({
name: 'banana',
tags: ['yellow']
}, {
price: 80,
tags: ['vegetable']
});

console.log(merged); /*=>
{
name: "banana",
price: 80,
tags: ["vegetable"] -> tags: ["yellow", "vegetable"] となってほしい!
}
*/

この問題は第三引数でカスタム関数を指定することで解決できる。2つの値をどのようにマージするのか指定できるので、配列ならArray#concatするよう実装する。JSBinでみる

var merged;

merged = _.merge({
name: 'banana',
tags: ['yellow']
}, {
price: 80,
tags: ['vegetable']
}, function(a, b) {
if (_.isArray(a) && _.isArray(b)) {
return a.concat(b);
}
});

console.log(merged); /*=>
{
name: "banana",
price: 80,
tags: ["yellow", "vegetable"]
}
*/


関連