So kopieren Sie in js

In diesem Artikel wird hauptsächlich die Kopiermethode in js vorgestellt, die einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf zurückgreifen.

Es gibt zwei Arten von Deep Copy und Shallow Copy js. Im Folgenden werden die gängigen Methoden zur Erleichterung der täglichen Arbeitsüberprüfung zusammengefasst.

1. Flache Kopie des JSON-Objekts

var newObj = JSON.parse(JSON.stringify( someObj ) )

2. es6 Object.assign()

const objA = { name: 'cc', age: 18 }
    const objB = { address: 'beijing' }
    const objC = {} // 这个为目标对象
    const obj = Object.assign(objC, objA, objB)    // 我们将 objA objB objC obj 分别输出看看
    console.log(objA)   // { name: 'cc', age: 18 }
    console.log(objB) // { address: 'beijing' }
    console.log(objC) // { name: 'cc', age: 18, address: 'beijing' }
    console.log(obj) // { name: 'cc', age: 18, address: 'beijing' }

    // 是的，目标对象ObjC的值被改变了。
    // so，如果objC也是你的一个源对象的话。请在objC前面填在一个目标对象{}
    Object.assign({}, objC, objA, objB)

3. es6 Spread Operator Spread-Operator-Syntax

  var obj = {                'data': [11, 2, 3],                'name': 'mfg',
                fn: function() {}
            };  var objNew = { ...obj
            };

function sallowCopy(source) {    // source 不是对象，而是【原始类型】的情况
    // 原始类型说明详见http://www.jianshu.com/p/b161aeecb6d6
    if (null == source || "object" != typeof source) return source;    
    // 其他情况都将 source 当作简单对象来处理
    var target = {};    for (var key in source) {        if (source.hasOwnProperty(key)) {  // 仅拷贝自身的属性
            target[key] = source[key];
        }
    }    return target;
}/*这个浅拷贝会将source对象上的所有[可枚举属性]都拷贝到target对象上，不包括原型链上的属性。*/

import merge from "lodash/object/merge";function commentsById(state = {}, action) {    switch(action.type) {        default : {           if(action.entities && action.entities.comments) {               return merge({}, state, action.entities.comments.byId);
           }           return state;
        }
    }
}

1. Verwenden Sie die Merge-Methode von lodash

const { Map } = require('immutable')
const map1 = Map({ a: 1, b: 2, c: 3 })
const map2 = map1.set('b', 50)
map1.get('b') // 2map2.get('b') // 50尽量保持数据

3. Es gibt eine große Anzahl tiefer Kopien, die die unveränderliche Bibliothek verwenden

$.extend(true, {}, obj)

4. jquerys $.extend() if Ohne den ersten Parameter handelt es sich um eine flache Kopie

var obj2 = JSON.parse(JSON.stringify(obj1))

5. Methoden von JSON-Objekten

function cloneDeep(obj) {  if (obj == null || typeof obj !== 'object') return obj  var newObj = Array.isArray(obj) ? [] : {}  for (let i in obj) {    if (obj.hasOwnProperty(i)) {      var value = obj[i]
      newObj[i] = typeof value === 'object' ? clone(value) : value
    }
  }  return newObj
}

Wer sich mit js auskennt, ist mit diesen beiden Methoden sicherlich vertraut. Mit den beiden nativen JSON-Objekten kann das tiefe Kopieren von Objekten sehr bequem realisiert werden.

Diese Methode hat auch Nachteile:

kann nur Attribute kopieren, die durch JSON dargestellt werden können, wie z. B. String, Number, Array usw. Für Attribute, die nicht dargestellt werden können dargestellt durch json, zum Beispiel Funktion, Regexp usw. gehen verloren

1. Die Prototypenkette des Objekts geht verloren

2. Die Kopiereffizienz ist niedrig

3. Trotz der oben genannten Mängel reicht diese Methode für die meisten Situationen aus.

6. Rekursives Kopieren

rrreee

Im Vergleich zur oben genannten Methode zum Durchlaufen flacher Kopien weist diese Methode nur mehr rekursive Aufrufe auf, d. h. Beurteilung Ob die Attribute des Objekts auch Objekte sind. Wenn ja, rufen Sie das Objekt rekursiv auf und durchlaufen Sie es, bis es kein Objekt mehr ist.

Diese Methode berücksichtigt jedoch nicht die Typen Funktion, Regexp, Fehler und erfordert mehr Urteilsvermögen. Die Kernidee besteht jedoch darin, das Objekt rekursiv zu durchlaufen und zu kopieren. Darüber hinaus ist diese Methode etwas effizienter als JSON tiefe Kopie.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in PureComponent of React

So konvertieren Sie JS-Strings in Zahlen

Einführung in die asynchrone js-for-Schleife

Das obige ist der detaillierte Inhalt vonSo kopieren Sie in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!