Comment copier en js

Cet article présente principalement la méthode de copie en js, qui a une certaine valeur de référence. Maintenant, je la partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Il existe deux types de copie profonde et de copie superficielle. js. Dans le formulaire de copie, les méthodes courantes sont résumées ci-dessous pour faciliter la révision du travail quotidien

1 Copie superficielle

1.

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. Syntaxe de l'opérateur de propagation es6 Spread Operator

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

4. Traversée

2. Copie profonde

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对象上，不包括原型链上的属性。*/

1. Utilisez la méthode de fusion de lodash

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;
        }
    }
}

3 Il existe un grand nombre de copies profondes utilisant la bibliothèque immuable

4. $.extend() de jquery S'il n'y a pas de premier paramètre, ce sera une copie superficielle

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尽量保持数据

5. Méthodes d'objet JSON

$.extend(true, {}, obj)

Ceux qui sont familiers avec js connaissent certainement ces deux méthodes. obtenu en utilisant deux objets JSON natifs.

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

Cette méthode présente également des inconvénients :

ne peut copier que les attributs qui peuvent être représentés par json, tels que String, Number, Array, etc. Pour les attributs qui ne peuvent pas être représentés par json représenté par json, par exemple Function, Regexp, etc. sera perdu

1. La chaîne prototype de l'objet est perdue

2. L'efficacité de la copie est faible

3. Malgré les défauts ci-dessus, cette méthode est suffisante pour faire face à la plupart des situations.

6. Copie récursive

Cette méthode n'a que plus d'appels récursifs que la méthode d'objet de traversée de copie superficielle ci-dessus. on juge si les attributs de l'objet sont également des objets, et si c'est le cas, l'appel récursif est effectué pour parcourir l'objet jusqu'à ce qu'il ne soit plus un objet.

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
}

Cependant, cette méthode ne prend pas en compte les types Function, Regexp, Error et autres, et nécessite plus de jugement. Cependant, l'idée principale est de parcourir l'objet de manière récursive et de le copier. De plus, cette méthode est légèrement plus efficace que JSON. copie profonde.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à PureComponent de React

Comment convertir une chaîne JS en nombre

Introduction à la boucle for asynchrone js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!