Help us understand the problem. What is going on with this article?

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

More than 5 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"]
}
*/

関連

minodisk
冷やし中華はじめました
resily
OKR導入・運用改善コンサルティングと、自社開発のクラウドOKRツール『Resily』を展開するスタートアップ
https://resily.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away