Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de l'objet clone en javascript

PHPz
Libérer: 2018-09-30 11:00:42
original
2327 Les gens l'ont consulté

Cet article présente principalement la méthode de clonage d'objets en javascript. Les amis dans le besoin peuvent s'y référer.

Lors du développement, il est courant d'interrompre la relation de référence entre les objets et vouloir simplement faire une copie d'un objet est inévitable.

En JavaScript, la méthode simple consiste à utiliser la fonction JSON pour transformer l'objet en chaîne, puis à l'analyser en un nouvel objet. Ou recherchez simplement du code sur Internet. Il existe encore de nombreux codes de clonage dans la communauté open source.

Bien que le code puisse être trouvé, les choses appartiendront toujours aux autres, et apprendre à coder à la main sera toujours un thème constant.

J'ai moi-même écrit deux fonctions de clonage :

cloneOwn : clonez les propres propriétés de l'objet personnalisé, à l'exclusion des propriétés héritées. Les propriétés peuvent être des types de données et des tableaux de base, un objet personnalisé, que vous pouvez spécifier. une liste de noms d'attributs à cloner.

cloneArray : Clone un tableau. Les éléments du tableau peuvent être des objets ou des types de base.

//第一个参数是被克隆的对象,第二个参数是需要克隆的属性列表
function cloneOwn() {
  var obj = arguments[0];
  if (typeof obj === 'undefined' || obj === null)
      return {};
  if (typeof obj !== 'object')
      return obj;
  //第二个参数是属性名称列表,就采用该列表进行刷选
  //否则就克隆所有属性
  var attrs = arguments[1];
  var enable_spec_attr = true;
  if (!(attrs instanceof Array)) {
      //console.log(attrs);
      attrs = obj;
      enable_spec_attr = false;
  }
  var result = {};
  var i;
  for (i in attrs) {
      attr = enable_spec_attr? attrs[i]: i;
      //console.log(attr);
      if (obj.hasOwnProperty(attr)) {
          if (obj[attr] instanceof Array) {
              result[attr] = cloneArray(obj[attr]);
          }
          else if (typeof obj[attr] === 'object') {
              result[attr] = cloneOwn(obj[attr]);
          } else {
              result[attr] = obj[attr];
          }
      }
  }
  return result;
}
Copier après la connexion
//克隆数组
function cloneArray(array) {
  if (typeof array === 'undefined' || array === null)
    return [];

  if (!(array instanceof Array))
    return [];
  result = [];
  var i;
  for(i in array) {
    if (typeof array[i] !== 'object') {
      result[i] = array[i];
      continue;
    }
    //clone object
    result[i] = cloneOwn(array[i]);
  }
  return result;
}
Copier après la connexion

Appelez

1. Clonez régulièrement l'objet personnalisé :

var a = {
  name:'frank',
  age:20
};
var b= cloneOwn(a);
Copier après la connexion

2. Spécifiez les attributs du clone

var a = {
    name:'frank',
    age:20,
    address:'any where'
};
var b = cloneOwne(a, ['name', 'age']);
Copier après la connexion
.

3. Cloner un objet personnalisé qui contient des attributs de tableau

var a = {
    name: 'kxh',
    age: 20,
    books: ['hai','ho','ali'],
    likes: [
        {wname: 'kaili', wage: 81, fav: "aaaaa"},
        {wname: 'seli', wage: 82, fav: "bbb"},
        {wname: 'ailun', wage: 83, fav: "ccc"},]
};
var b = cloneOwne(a);
Copier après la connexion

4. Cloner un tableau qui contient un objet personnalisé

var a = [
   {
      name:'frank',
      age:20
    },
    {
       name:'leon',
       age:30
     }
];
var b = cloneArray(a);
Copier après la connexion

Le code ci-dessus présente encore de nombreux problèmes, tels que comme , il existe quelques problèmes avec le clonage d'objets intégrés, tels que le type datatime.

La gestion des problèmes est un processus d'apprentissage.

É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