JavaScript 克隆(根据数据类型的不同选择克隆方式)

克隆

在JavaScript如何把一个对象的属性和方法完完整整的搬过来到另一个空对象身上,对于继承的使用方法不能完成上述操作,所以我们开始另一种方法—-克隆。

  • 在Javascript里,如果克隆对象是基本类型,我们直接赋值就可以了:
<script type = "text/javascript"> 
    var sStr = "abc";
    var cStr = sStr;
    alert(cStr);    //输出abc
    sStr = "cba";
    alert(cStr);    //输出abc;
把一个值赋给另一个变量时,当那个变量的值改变的时候,另一个值不会受到影响。
</script>
  • 如果不是基本类型,那就有所有不同了:
<script type = "text/javascript"> 
    var aArr = [0,1,2];
    var m = aArrr;
    alert(m);   //输出0,1,2
    aArr=[2,1,0];
           alert(m);   //输出2,1,0;这个值改变了,因为m只是aArr的一个引用,如果aArr的值改变了,那么m也会相应的改变。
</script>

这并不是克隆对象,m和aArr是同一个对象,
他俩指向同一个内存地址空间,拿到了同样的一个小房子。

克隆分为:浅层克隆和深度克隆。

浅层克隆

<script type = "text/javascript"> 
    function alone(Origin,Target){
        var Target = Target || {};              //如果target为undefined或没传参,设置空对象
    for(var prop in Origin){
    Target[prop] = Origin[prop];
    }
    return Target;
    }
</script>

浅层克隆运用对象遍历的方法把一个对象的属性和方法克隆过来,对于基本类型没有问题,但是对于引用类型会存在问题,造成一方改变另一方也会改变,所以我们探究深度克隆。

深度克隆

深度克隆运用了递归,代码思路:

1.遍历对象      for(var prop in obj)   用hasOwnProperty()方法判断属性和方法是对象本身还是原型中的

2.首先判断是不是原始值      typeof() object

3.判断是数组还是对象        instanceof toString constructor

4.建立相应的新的数组或对象   

5.看数组里的或对象里的内容是不是原始值(然后重复2-5步)--递归
<script type = "text/javascript"> 

function deepAlone(Origin,Target){
    var Target = Target || {};                                                  
    var toStr = Object.prototype.toString;               //定义变量 方便书写
    var arrStr = '[object Array]';                       //定义字符串 用于比较是否为数组
    for(var prop in Origin){                             // 原对象遍历
         if(Origin.hasOwnProperty(prop)){                //判断属性和方法是原型的还是对象自身的
               if(Origin[prop] !== 'null' && typeof(Origin[prop]) == 'object'){
               //判断是否为引用值
                    Target[prop] = toStr.call(Origin[prop]) == arrStr ? [] : {};  //三目运算符判断是否为数组 是:定义数组 否:定义对象
                    deepAlone(Origin[prop],Target[prop]);  //递归
               }
               else{
                   Target[prop] = Origin[prop];            //递归终止条件
               }
         }
    }
    return Targin;                                      //返回克隆好的对象。
}
</script>

ps:
三木运算符:
//条件判断?是:否 并且会返回值
var num 1 > 0 ? (“10” > “9” ? 1 : 0) : 2;
//先算括号里面的,字符串比第一位,返回0
结果:num 0

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 JavaScript 中,深克隆一个对象通常可以通过递归实现。具体来说,需要遍历对象的每一个属性,如果某个属性是对象或数组,那么需要递归地进行深克隆,否则直接将其赋值给新对象即可。 以下是一个简单的深克隆实现: ```javascript function deepClone(obj) { if (obj === null || typeof obj !== "object") { // 如果不是对象或数组,则直接返回 return obj; } const clone = Array.isArray(obj) ? [] : {}; // 判断是数组还是对象 // 遍历每个属性并递归克隆 for (let key in obj) { clone[key] = deepClone(obj[key]); } return clone; } ``` 这个函数可以接受任何类型的对象作为参数,并返回一个深克隆后的对象。需要注意的是,该函数有一些限制: - 该函数不支持循环引用,如果原对象中有循环引用,将会导致栈溢出错误。 - 该函数不会克隆对象的原型链,只会克隆自身的属性。 因此,在使用这个函数时需要注意它的限制。如果需要处理循环引用或者原型链,需要使用更为复杂的实现。 ### 回答2: 在JavaScript中实现对象的深克隆,可以通过以下步骤实现: 1. 创建一个函数,命名为deepClone,该函数将接收一个参数obj,表示需要克隆的对象。 2. 首先判断obj的类型,如果obj是基本数据类型或者是null,则直接返回该值,因为基本数据类型是按值传递的,不存在引用关系。 3. 创建一个变量cloneObj,用于保存克隆后的对象。 4. 遍历obj的属性,使用for...in循环遍历obj的所有可枚举属性。 5. 在遍历的过程中,判断obj的属性值的类型,如果属性值是对象或者数组,则递归调用deepClone函数进行深克隆,将返回的克隆值赋给cloneObj的对应属性。 6. 如果属性值是基本数据类型或者是函数,则直接赋值给cloneObj的对应属性。 7. 最后,返回cloneObj,即为深克隆后的对象。 以下是一个实现深克隆的代码示例: function deepClone(obj) { if (obj === null || typeof obj !== "object") { return obj; } let cloneObj = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { cloneObj[key] = deepClone(obj[key]); } } return cloneObj; } 使用方法如下: const obj = { name: "Alice", age: 20, hobbies: ["coding", "reading"], address: { city: "Beijing", country: "China" } }; const clonedObj = deepClone(obj); console.log(clonedObj); 上述代码能够将obj深克隆得到一个独立的对象clonedObj,两者完全独立,修改其中一个对象不会影响另一个对象。 ### 回答3: 对象的深克隆是指将一个对象完全复制一份,并且新对象与原对象没有任何引用关系。Javascript实现对象的深克隆可以通过以下步骤: 1. 创建一个空的目标对象,用于存储克隆后的对象。 2. 遍历原始对象的属性,使用递归的方式克隆每个属性的值。 3. 对于原始对象的每个属性,判断其类型: - 若为基本数据类型(如字符串、数字、布尔值等),直接复制到目标对象。 - 若为引用类型(如对象、数组等),则需要再次进行克隆操作。 4. 对于引用类型的属性,根据其具体类型进行不同的处理: - 若为数组,创建一个新的空数组,并遍历原数组,递归地将每个元素克隆到新数组中。 - 若为对象,创建一个空对象,并遍历原对象的属性,递归地将每个属性值克隆到新对象中。 5. 将克隆后的属性值赋值给目标对象对应的属性。 6. 最后返回目标对象,完成深克隆操作。 下面是一个简单的Javascript代码示例: function cloneObject(source) { let target = {}; for(let key in source) { if(typeof source[key] === 'object' && source[key] !== null) { if(source[key].constructor === Array) { // 克隆数组 target[key] = source[key].map(item => cloneObject(item)); } else { // 克隆对象 target[key] = cloneObject(source[key]); } } else { // 复制基本数据类型 target[key] = source[key]; } } return target; } 使用该函数进行对象的深克隆: let obj1 = {a: 1, b: {c: 2}}; let obj2 = cloneObject(obj1); console.log(obj2); // 输出: {a: 1, b: {c: 2}} console.log(obj1 === obj2); // 输出: false

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值