LoginSignup
3
6

More than 3 years have passed since last update.

lodashを使ったオブジェクトのマージ

Last updated at Posted at 2019-10-02

私はReactをよく使いますが、とにかくオブジェクトのマジをよく使います。
通常、オブジェクトのマージにはObject.assign()やスプレッド演算子を使いますが、1階層しかないオブジェクトならいいのですが、ネストしたオブジェクトは標準機能では容易にマージできない(JSONに一度変換するとかすればできますが)ので、lodashを使ってみます。

準備

npm install --save lodash

実装(テスト)

たまたま開いていたプロジェクトがReact NativeだったのでRN環境で検証しました。
obj1とobj2を作り、

  • Object.assign()を利用
  • スプレッド演算子を利用
  • lodashを利用

の3つを試して結果を表示させています。

App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

//lodash
import lodash from 'lodash';

const obj1 = {
    status: 'OK',
    user: {
        email: 'test@test.com',
        age: 33,
    }
}

const obj2 = {
    status: 'OK',
    user: {
        tel: '03-1111-2222',
    },
    others: 'hoge',
}

const obj3 = {
    address: 'Tokyo',
}

const obj4 = Object.assign({}, obj1, obj2);
const obj5 = { ...obj1, ...obj2 };
const obj6 = lodash.merge({},obj1, obj2);
const obj7 = lodash.cloneDeep(obj6);
lodash.merge(obj7.user, obj3); //たりたいこと


export default function App() {

    console.log(obj4);
    console.log(obj5);
    console.log(obj6);
    console.log(obj7);

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Open up App.js to start working on your app!</Text>
        </View>
    );
}

結果と考察

lodash以外は1階層目しかマージされていません。なお、同じ変数名がある場合は、後優先となるようです。

Object {
  "others": "hoge",
  "status": "OK",
  "user": Object {
    "tel": "03-1111-2222",
  },
}
Object {
  "others": "hoge",
  "status": "OK",
  "user": Object {
    "tel": "03-1111-2222",
  },
}
Object {
  "others": "hoge",
  "status": "OK",
  "user": Object {
    "age": 33,
    "email": "test@test.com",
    "tel": "03-1111-2222",
  },
}
Object {
  "others": "hoge",
  "status": "OK",
  "user": Object {
    "address": "Tokyo",
    "age": 33,
    "email": "test@test.com",
    "tel": "03-1111-2222",
  },
}

いろいろ使いこなせば便利なんでしょうけど、とりあえずmergeで。

3
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
6