Detaillierte Erklärung des Klonobjekts in Javascript

In diesem Artikel wird hauptsächlich die Methode zum Klonen von Objekten in JavaScript vorgestellt. Freunde in Not können sich darauf beziehen.

Während der Entwicklung kommt es häufig vor, dass die Referenzbeziehung zwischen Objekten unterbrochen wird und einfach nur eine Kopie eines Objekts erstellt werden soll.

In JavaScript besteht die einfache Methode darin, die JSON-Funktion zu verwenden, um das Objekt in einen String umzuwandeln und ihn dann in ein neues Objekt zu analysieren. Oder suchen Sie einfach im Internet nach Code. In der Open-Source-Community gibt es immer noch viele Kloncodes.

Obwohl der Code gefunden werden kann, werden die Dinge immer anderen gehören und das Erlernen des manuellen Codierens wird immer ein ständiges Thema sein.

Ich habe selbst zwei Klonfunktionen geschrieben:

cloneOwn: Klonen Sie die eigenen Eigenschaften des benutzerdefinierten Objekts, mit Ausnahme der geerbten Eigenschaften. Die Eigenschaften können grundlegende Datentypen und Arrays sein, benutzerdefinierte Objekte, die Sie angeben können eine Liste der zu klonenden Attributnamen.

cloneArray: Klonen Sie ein Array. Die Elemente im Array können Objekte oder Basistypen sein.

//第一个参数是被克隆的对象，第二个参数是需要克隆的属性列表
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;
}

//克隆数组
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;
}

Aufruf

1. Klonen Sie das benutzerdefinierte Objekt regelmäßig:

var a = {
  name:'frank',
  age:20
};
var b= cloneOwn(a);

2. Geben Sie die Attribute des Klons an

var a = {
    name:'frank',
    age:20,
    address:'any where'
};
var b = cloneOwne(a, ['name', 'age']);

3. Klonen Sie ein benutzerdefiniertes Objekt, das Array-Attribute enthält

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

4. Klonen Sie ein Array, das ein benutzerdefiniertes Objekt enthält

var a = [
   {
      name:'frank',
      age:20
    },
    {
       name:'leon',
       age:30
     }
];
var b = cloneArray(a);

Der obige Code weist immer noch viele Probleme auf, z as gibt es einige Probleme beim Klonen integrierter Objekte, z. B. des Datenzeittyps.

Probleme adressieren Probleme, und ein solcher Lernprozess ist auch notwendig.