zoukankan      html  css  js  c++  java
  • $.extend(x,y); 函数用法介绍。

      第一篇资料:  转自: https://www.cnblogs.com/yuqingfamily/p/5813650.html

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

    描述: 将两个或更多对象的内容合并到第一个对象。

    关于$.extend()的用法网上有很多文章,在这里指向写写对深浅拷贝的理解

    深浅拷贝对应的参数就是[deep],是可选的,为true或false。默认情况是false(浅拷贝),并且false是不能够显示的写出来的。如果想写,只能写true(深拷贝)~~

    什么是深、浅拷贝呢?先讲定义,再举例子

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

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

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

    栗子:

    复制代码
    var object1 = {
        apple: 0,
        banana: {
            weight: 52,
            price: 100
        },
        cherry: 97
    };
    var object2 = {
        banana: {
            price: 200
        },
        durian: 100
    };
    
    //默认情况浅拷贝
    //object1--->{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
    //object2的banner覆盖了object1的banner,但是weight属性未被继承
    //$.extend(object1, object2);
    
    //深拷贝
    //object1--->{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
    //object2的banner覆盖了object1的banner,但是weight属性也被继承了呦
    $.extend(true,object1, object2);
    
    console.log('object1--->'+JSON.stringify(object1));
    复制代码

    仔细阅读上面这段代码,去运行看结果,你就会理解什么是深拷贝和浅拷贝了!

    第二篇文章:  转自 : https://blog.csdn.net/wuhaotian1996/article/details/82747153

    $.extend(setting,option)用于合并对象setting和对象option并将合并后的值返回给setting

    常规用法(1)

    1.  
      var settings = { validate: false, limit: 5, name: "foo" };
    2.  
      var options = { validate: true, name: "bar" };
    3.  
      jQuery.extend(settings, options);

    运行结果settings == { validate: true, limit: 5, name: “bar” }

    常规用法(2)
    不改变setting类型

      var settings = { validate: false, limit: 5, name: "foo" }; 

      var options = { validate: true, name: "bar" };

    1. //设置一个空类
      var x=jQuery.extend({},settings, options);

    结果 settings = { validate: false, limit: 5, name: “foo” };
    x== { validate: true, limit: 5, name: “bar” }
    好处:值被合并到这个空对象上,保护了默认值。

  • 相关阅读:
    jQuery横向手风琴
    jQuery宽屏游戏焦点图
    手风琴式相册图片展开效果
    鼠标悬停图片分享按钮动画
    jQuery水平滑动菜单
    jQuery图片水平滑动延迟加载动画
    jQuery悬浮焦点图宽屏
    jQuery自定义美化下拉框
    纯CSS3垂直动画菜单
    面向服务与微服务架构
  • 原文地址:https://www.cnblogs.com/qiaoyutao/p/10179232.html
Copyright © 2011-2022 走看看