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

11729 ワード
React JavaScript reactnative JavaScript テキストリンク

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

準備

npm install --save lodash

実装（テスト）

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

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

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

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

//lodash
import lodash from 'lodash';

const obj1 = {
    status: 'OK',
    user: {
        email: '[email protected]',
        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": "[email protected]",
    "tel": "03-1111-2222",
  },
}
Object {
  "others": "hoge",
  "status": "OK",
  "user": Object {
    "address": "Tokyo",
    "age": 33,
    "email": "[email protected]",
    "tel": "03-1111-2222",
  },
}

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

keras単純多分類例
RedHat AS 4にMysql_をインストールpythonモジュールで発生した問題