127

配列ではなくオブジェクトで動作する Redux プロジェクト用のディープ コピー マップ メソッドを作成しようとしています。Redux では、各状態は以前の状態で何も変更されるべきではないことを読みました。

export const mapCopy = (object, callback) => {
    return Object.keys(object).reduce(function (output, key) {

    output[key] = callback.call(this, {...object[key]});

    return output;
    }, {});
}

できます：

    return mapCopy(state, e => {

            if (e.id === action.id) {
                 e.title = 'new item';
            }

            return e;
        })

ただし、内部アイテムをディープコピーしないため、次のように微調整する必要があります。

export const mapCopy = (object, callback) => {
    return Object.keys(object).reduce(function (output, key) {

    let newObject = {...object[key]};
    newObject.style = {...newObject.style};
    newObject.data = {...newObject.data};

    output[key] = callback.call(this, newObject);

    return output;
    }, {});
}

これは、どのオブジェクトが渡されるかを知る必要があるため、エレガントではありません。ES6 でスプレッド構文を使用してオブジェクトをディープ コピーする方法はありますか?

4

12 に答える 12

141

ディープ コピーにJSONを使用する

var newObject = JSON.parse(JSON.stringify(oldObject))


var oldObject = {
  name: 'A',
  address: {
    street: 'Station Road',
    city: 'Pune'
  }
}
var newObject = JSON.parse(JSON.stringify(oldObject));

newObject.address.city = 'Delhi';
console.log('newObject');
console.log(newObject);
console.log('oldObject');
console.log(oldObject);

于 2017-12-07T08:18:50.223 に答える
84

そのような機能は ES6 に組み込まれていません。やりたいことに応じて、いくつかのオプションがあると思います。

本当にディープコピーしたい場合：

  1. ライブラリを使用します。たとえば、lodash にはcloneDeepメソッドがあります。
  2. 独自のクローン機能を実装します。

特定の問題に対する代替ソリューション（ディープコピーなし）

ただし、いくつかのことを変更する意思がある場合は、作業を節約できると思います。関数へのすべての呼び出しサイトを制御していると仮定しています。

  1. に渡されるすべてのコールバックがmapCopy、既存のオブジェクトを変更するのではなく、新しいオブジェクトを返さなければならないことを指定します。例えば：

    mapCopy(state, e => {
  if (e.id === action.id) {
    return Object.assign({}, e, {
      title: 'new item'
    });
  } else {  
    return e;
  }
});

    これは、 を使用Object.assignして新しいオブジェクトを作成し、その新しいオブジェクトのプロパティを設定eしてから、その新しいオブジェクトに新しいタイトルを設定します。これは、既存のオブジェクトを決して変更せず、必要な場合にのみ新しいオブジェクトを作成することを意味します。

  2. mapCopy今は本当に簡単です：

    export const mapCopy = (object, callback) => {
  return Object.keys(object).reduce(function (output, key) {
    output[key] = callback.call(this, object[key]);
    return output;
  }, {});
}

基本的に、mapCopy呼び出し元が正しいことを行うと信頼しています。これが、すべての呼び出しサイトを制御することを前提としていると言った理由です。

于 2016-07-17T01:21:05.043 に答える