Tiefe Kopie in ES6 über die Verbreitung syntax

Keine solche Funktionalität eingebaut, um ES6. Ich denke, Sie haben ein paar Optionen, je nachdem, was Sie tun möchten.

Wenn Sie wirklich wollen, um Tiefe Kopie:

1. Nutzen Sie die Bibliothek. Zum Beispiel, lodash hat eine cloneDeep Methode.
2. Implementieren Sie Ihre eigenen Klonen-Funktion.

Alternative Lösung Zu Ihrem Spezifischen Problem (Keine Tiefe Kopie)

Allerdings denke ich, dass, wenn Sie bereit sind, ändern ein paar Dinge, Sie können sparen Sie sich einige Arbeit. Ich gehe davon aus Steuern Sie sämtliche call-sites an Ihre Funktion.

1. Angeben, dass alle Rückrufe übergeben mapCopy muss wieder neue Objekte anstelle von mutierend das vorhandene Objekt. Zum Beispiel:

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

   Das macht die Verwendung von - Objekt.zuweisen ein neues Objekt zu erstellen, legt Eigenschaften von e auf das neue Objekt, setzt dann einen neuen Titel auf das neue Objekt. Dies bedeutet, dass Sie nie mutieren vorhandenen Objekte und nur neue erstellen, wenn nötig.

2. mapCopy können, werden wirklich einfache heute:

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

Im wesentlichen mapCopy ist Vertrauen in seine Anrufer, das richtige zu tun. Das ist, warum ich sagte, dies übernimmt die Steuerung aller call-sites.

Von MDN

Anmerkung: Spread-syntax effektiv geht eine Ebene tiefer, während das kopieren eines Arrays. Daher kann Sie ungeeignet sein für das kopieren von mehrdimensionalen arrays wie das folgende Beispiel zeigt (es ist das gleiche Objekt.assign() und die Ausbreitung syntax).

Persönlich, ich schlage vor, mit Lodash ist cloneDeep - Funktion für multi-level-Objekt/array Klonen.

Hier ist ein funktionierendes Beispiel:

JS:

const arr1 = [{ 'a': 1 }];

const arr2 = [...arr1];

const arr3 = _.clone(arr1);

const arr4 = arr1.slice();

const arr5 = _.cloneDeep(arr1);

const arr6 = [...{...arr1}]; //a bit ugly syntax but it is working!


//first level
console.log(arr1 === arr2); //false
console.log(arr1 === arr3); //false
console.log(arr1 === arr4); //false
console.log(arr1 === arr5); //false
console.log(arr1 === arr6); //false

//second level
console.log(arr1[0] === arr2[0]); //true
console.log(arr1[0] === arr3[0]); //true
console.log(arr1[0] === arr4[0]); //true
console.log(arr1[0] === arr5[0]); //false
console.log(arr1[0] === arr6[0]); //false

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

function deepclone(obj) {
    let newObj = {};

    if (typeof obj === 'object') {
        for (let key in obj) {
            let property = obj[key],
                type = typeof property;
            switch (type) {
                case 'object':
                    if( Object.prototype.toString.call( property ) === '[object Array]' ) {
                        newObj[key] = [];
                        for (let item of property) {
                            newObj[key].push(this.deepclone(item))
                        }
                    } else {
                        newObj[key] = deepclone(property);
                    }
                    break;
                default:
                    newObj[key] = property;
                    break;

            }
        }
        return newObj
    } else {
        return obj;
    }
}