zoukankan      html  css  js  c++  java
  • Jquery的深度拷贝和深度克隆

      有人问,拷贝和克隆不都是“复制”的意思吗。

      这位看官问的好,一般情况下是一样的,但在jquery中却有些不同。jqurey深度拷贝一般只js对象的复制,是$.extend()方法,jquery深度克隆一般指dom对象的复制,是$.clone()方法。

    $.extend()

      语法:jQuery.extend( [deep ], target, object1 [, objectN ] )

      用途:复制js对象,或将两个或更多对象的内容合并到第一个对象。

      深浅拷贝对应的参数就是[deep],是可选的,为true或false。默认情况是false(浅拷贝),并且false是不能够显示的写出来的。如果想写,只能写true(深拷贝),在默认情况下,通过$.extend()合并操作不是递归的(浅拷贝);如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。然而,如果将 true 作为该函数的第一个参数,那么会在对象上进行递归的合并(深拷贝)。

      浅拷贝(false 默认):如果第二个参数对象有的属性第一个参数对象也有,那么不会进行相同参数内部的比较,直接将第一个对象的相同参数覆盖。

      深拷贝(true):如果第二个参数对象有的属性第一个参数对象也有,还要继续在这个相同的参数向下一层找,比较相同参数的对象中是否还有不一样的属性,如果有,将其继承到第一个对象,如果没有,则覆盖。

     1 var object1 = {
     2     apple: 0,
     3     banana: {
     4         weight: 52,
     5         price: 100
     6     },
     7     cherry: 97
     8 };
     9 var object2 = {
    10     banana: {
    11         price: 200
    12     },
    13     durian: 100
    14 };
    15 //默认情况浅拷贝
    16 //object1--->{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
    17 //object2的banner覆盖了object1的banner,但是weight属性未被继承
    18 //$.extend(object1, object2);
    19 //深拷贝
    20 //object1--->{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
    21 //object2的banner覆盖了object1的banner,但是weight属性也被继承了呦
    22 $.extend(true,object1, object2);
    23 console.log('object1--->'+JSON.stringify(object1));

    $.clone()

      语法:$(selector).clone(includeEvents)

      用途:用于处理dom的克隆

      .clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。clone方法比较简单就是克隆节点,但是需要注意,如果节点有事件或者数据之类的其他处理,我们需要通过clone(ture)传递一个布尔值ture用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆了

    1 $("div").on('click', function() {//执行操作})
    2 //clone处理一
    3 $("div").clone()   //只克隆了结构,事件丢失
    4 //clone处理二
    5 $("div").clone(true) //结构、事件与数据都克隆
  • 相关阅读:
    Python入门-函数进阶
    Python入门-初始函数
    Leetcode300. Longest Increasing Subsequence最长上升子序列
    Leetcode139. Word Break单词拆分
    Leetcode279. Perfect Squares完全平方数
    Leetcode319. Bulb Switcher灯泡开关
    Leetcode322. Coin Change零钱兑换
    二叉树三种遍历两种方法(递归和迭代)
    Leetcode145. Binary Tree Postorder Traversal二叉树的后序遍历
    Leetcode515. Find Largest Value in Each Tree Row在每个树行中找最大值
  • 原文地址:https://www.cnblogs.com/guanghe/p/9999210.html
Copyright © 2011-2022 走看看