zoukankan      html  css  js  c++  java
  • 浅谈Javascript 中几种克隆(clone)方式

    一:在Javascript里,如果克隆对象是基本类型,我们直接赋值就可以了:

    1 var sStr = "kingwell";
    2 var cStr = sStr;
    3 alert(cStr);//输出kingwell
    4 sStr = "abc";
    5 alert(cStr);//输出kingwell;

    把一个值赋给另一个变量时,当那个变量的值改变的时候,另一个值不会受到影响。

    二:如果不是基本类型,那就有所有不同了:

    1 var aArr = [0,1,2,3];
    2 var m = aArrr;
    3 alert(m);//输出1,2,3
    4 aArr=[3,2,1,0];
    5 alert(m);//输出3,2,1,0;这个值改变了,因为m只是aArr的一个引用,如果aArr的值改变了,那么m也会相应的改变。

    如果我们想克隆一个数组,最简单的办法:

    1 var aArr = [0,1,2,3];
    2 var m = aArr.slice(0);
    3 aArr = [3,2,1,0];
    4 alert(m);//输出0,1,2,3,这时虽然aArr中的值已经改变,但是因为使用slice方法已经创建一个新的数组。

    我们可以创建一个函数来克隆所有对象:

    复制代码
     1 function clone(obj) {
     2     var o;
     3     if (typeof obj == "object") {
     4         if (obj === null) {
     5             o = null;
     6         } else {
     7             if (obj instanceof Array) {
     8                 o = [];
     9                 for (var i = 0, len = obj.length; i < len; i++) {
    10                     o.push(clone(obj[i]));
    11                 }
    12             } else {
    13                 o = {};
    14                 for (var j in obj) {
    15                     o[j] = clone(obj[j]);
    16                 }
    17             }
    18         }
    19     } else {
    20         o = obj;
    21     }
    22     return o;
    23 }
    复制代码

    三:节点克隆:

    1 var p = document.getElementsByTagName("p")[0];
    2 var cP = p.cloneNode();//克隆p节点
    3 var cP = p.cloneNode(true);//克隆p节点,深度克隆,克隆节点以及节点下面的子内容。

    ------------------------------------------------------------------------------------------------------------------

    来源:http://www.cnblogs.com/snowinmay/p/3853425.html

    JavaScript中并没有直接提供对象复制(Object Clone)的方法。因此下面的代码中改变对象b的时候,也就改变了对象a。

    a = {k1:1, k2:2, k3:3};
    b = a;
    b.k2 = 4;
    

    如果只想改变b而保持a不变,就需要对对象a进行复制。

    用jQuery进行对象复制

     

    在可以使用jQuery的情况下,jQuery自带的extend方法可以用来实现对象的复制。

    a = {k1:1, k2:2, k3:3};
    b = {};
    $.extend(b,a);
     

    自定义clone()方法来实现对象复制

    下面的方法,是对象复制的基本想法。

    Object.prototype.clone = function() {
      var copy = (this instanceof Array) ? [] : {};
      for (attr in this) {
        if (!obj.hasOwnProperty(attr)) continue;
        copy[attr] = (typeof this[i] == "object")?obj[attr].clone():obj[attr];
      } 
      return copy;
    };
    
    
    a = {k1:1, k2:2, k3:3};
    b = a.clone();
    

    下面的例子则考虑的更全面些,适用于大部分对象的深度复制(Deep Copy)。

    function clone(obj) {
        // Handle the 3 simple types, and null or undefined
        if (null == obj || "object" != typeof obj) return obj;
    
        // Handle Date
        if (obj instanceof Date) {
            var copy = new Date();
            copy.setTime(obj.getTime());
            return copy;
        }
    
        // Handle Array
        if (obj instanceof Array) {
            var copy = [];
            for (var i = 0, var len = obj.length; i < len; ++i) {
                copy[i] = clone(obj[i]);
            }
            return copy;
        }
    
        // Handle Object
        if (obj instanceof Object) {
            var copy = {};
            for (var attr in obj) {
                if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
            }
            return copy;
        }
    
        throw new Error("Unable to copy obj! Its type isn't supported.");
    }
  • 相关阅读:
    几个新角色:数据科学家、数据分析师、数据(算法)工程师
    人类投资经理再也无法击败电脑的时代终将到来了...
    Action Results in Web API 2
    Multiple actions were found that match the request in Web Api
    Routing in ASP.NET Web API
    how to create an asp.net web api project in visual studio 2017
    网站漏洞扫描工具
    How does asp.net web api work?
    asp.net web api history and how does it work?
    What is the difference between a web API and a web service?
  • 原文地址:https://www.cnblogs.com/zouhao/p/7278117.html
Copyright © 2011-2022 走看看