Maison > interface Web > js tutoriel > Comment copier en js

Comment copier en js

不言
Libérer: 2018-07-09 16:50:22
original
2084 Les gens l'ont consulté

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 ) )
Copier après la connexion
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)
Copier après la connexion
3. Syntaxe de l'opérateur de propagation es6 Spread Operator

  var obj = {                'data': [11, 2, 3],                'name': 'mfg',
                fn: function() {}
            };  var objNew = { ...obj
            };
Copier après la connexion
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对象上,不包括原型链上的属性。*/
Copier après la connexion
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;
        }
    }
}
Copier après la connexion
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(&#39;immutable&#39;)
const map1 = Map({ a: 1, b: 2, c: 3 })
const map2 = map1.set(&#39;b&#39;, 50)
map1.get(&#39;b&#39;) // 2map2.get(&#39;b&#39;) // 50尽量保持数据
Copier après la connexion

5. Méthodes d'objet JSON
$.extend(true, {}, obj)
Copier après la connexion

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))
Copier après la connexion

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.

  4. 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 !== &#39;object&#39;) return obj  var newObj = Array.isArray(obj) ? [] : {}  for (let i in obj) {    if (obj.hasOwnProperty(i)) {      var value = obj[i]
      newObj[i] = typeof value === &#39;object&#39; ? clone(value) : value
    }
  }  return newObj
}
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal