交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • ES6 Object.assign()的用法及其使用

    北冥有鱼 教程大全 2020-01-19 ,

    1.Object.assign()基本用法:

    Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。

    let targetObj1 = { a: 1 };
        let sourceObj1 = { b: 1 };
        let sourceObj11 = { c: 3 };
        Object.assign(targetObj1, sourceObj1, sourceObj11);
        console.log(targetObj1);
    

    注:如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

    let targetObj1 = { a: 1, b: 2 };
        let sourceObj1 = { b: 1 };
        let sourceObj11 = { c: 3 };
        Object.assign(targetObj1, sourceObj1, sourceObj11);
        console.log(targetObj1);
    

    如果只有一个参数,Object.assign会直接返回该参数。

    let targetObj1 = { a: 4 }
        Object.assign(targetObj1);
        console.log(targetObj1)
    

    如果该参数不是对象,则会先转成对象,然后返回。

    console.log(typeof (Object.assign(2)));

    由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。

    console.log(typeof(Object.assign(null)));
     
     console.log(typeof(Object.assign(underfind)));

    注意:如果非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着, 如果undefined和null不在首参数,就不会报错。其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。

    Object.assign只拷贝自身属性,不可枚举的属性(enumerable为false)和继承的属性不会被拷贝。

    let obj1 = Object.assign({ dwb: 'zjl' },
     
    Object.defineProperty({}, 'zmf', {
     
    enumerable: false,
     
    value: 'zmf'
     
    })
     
    )
     
    console.log(obj1);
     
    let obj2 = Object.assign({ dwb: 'zjl' },
     
    Object.defineProperty({}, 'zmf', {
     
    enumerable: true,
     
    value: 'zmf'
     
    })
     
    )
     
    console.log(obj2);

    对于嵌套的对象,Object.assign的处理方法是替换,而不是添加。

    var target = { a: { b: 'c', d: 'e' } }
     
    var source = { a: { b: 'hello' } }
     
    Object.assign(target, source);
    

    上面代码中,target对象的a属性被source对象的a属性整个替换掉了,而不会得到{ a: { b: 'hello', d: 'e' } }的结果。这通常不是开发者想要的,需要特别小心。有一些函数库提供Object.assign的定制版本(比如Lodash的_.defaultsDeep方法),可以解决深拷贝的问题。

    注意,Object.assign可以用来处理数组,但是会把数组视为对象。

    console.log(Object.assign([1, 2, 3], [4, 5]));

    其中,4覆盖1,5覆盖2,因为它们在数组的同一位置,所以就对应位置覆盖了。

    Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

    var object1 = { a: { b: 1 } };
     
    var object2 = Object.assign({}, object1);
     
    object1.a.b = 2;
     
    console.log(object2.a.b);
    

    2.用途

    2.1为对象添加属性

    2.2为对象添加方法

    2.3克隆对象

    function copyFnc(origin) {
     
    return Object.assign({}, origin)
     
    }
     
    var sur = { a: 1, b: 2 };
     
    console.log(copyFnc(sur));
    

    上面代码将原始对象拷贝到一个空对象,就得到了原始对象的克隆。

    不过,采用这种方法克隆,只能克隆原始对象自身的值,不能克隆它继承的值。如果想要保持继承链,可以采用下面的代码。

    function clone(origin) {
     
    let originProto = Object.getPrototypeOf(origin);
     
    return Object.assign(Object.create(originProto), origin);
     
    }
    

     在JS里子类利用Object.getPrototypeOf去调用父类方法,用来获取对象的原型。

    2.4 合并多个对象

    //多个对象合并到某个对象
    
    const merge = (target, ...sources) => Object.assign(target, ...sources);
    //多个对象合并到新对象
    
    const merge = (...sources) => Object.assign({}, ...sources);
     
    
    

    2.5为属性指定默认值

    const DEFAULTS = {
     
    logLevel: 0,
     
    outputFormat: 'html'
     
    };
     
    function processContent(options) {
     
    let options = Object.assign({}, DEFAULTS, options);
     
    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。


    广而告之:
    热门推荐:
    jQuery 常见开发使用技巧总结

    1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。···

    php实现建立多层级目录的方法

    本文以实例形式说明了php建立多层级目录的实现方法,代码简洁实用,功能强大,对于php程序员来说有一定的参考借鉴价值。实例详情如下: /** *根据路径path建立多级目录 *$dir目标目录 $mode权限,0700表示最高权限 */ function makedir( $dir , $mode = "0700" ) { if(str···

    刷新时清空文本框内容的js代码

    在做注册页面(.htm静态格式)时, 我想在刷新时(如F5,而不是提交表单后的返回)把开始输入文本框的内容清空 要怎么做呢? 只有密码框可以,其它的框默认保留了开始输入的信息 复制代码 代码如下:<body onload="document.forms[0].reset()"> 您可能感兴趣的文章: ···

    DedeCMS5.5与uc整合 会员投稿空白的问题

       问题:DedeCMS5.5与uc整合 会员投稿空白,不知道什么原因,会员无法从前台发布文章 图片 软件了。 知道的高手告诉一下~~~~~~~    回答:   以下为引用的内容: include/common.inc.php  把 //error_reporting(E_ALL); error_report···

    探讨:如何查看和获取SQL Server实例名

    一、查看實例名時可用 1、服务—SQL Server(实例名),默认实例为(MSSQLSERVER) 或在连接企业管理时-查看本地实例 2、通過注冊表HKEY_LOCAL_MACHINE/SOFTWARE/Microsoft/Microsoft SQL Server/InstalledInstance 3、用命令sqlcmd/osqlsqlcmd -Lsqlcmd -Lcosql -L 获取可用實例,···

    不用注册会员也能为 DedeCms 增加邮箱订阅

    为了与朋友们更好的交流,也为了朋友们更好的关注我的个人网站,网站添加了邮箱订阅,其实织梦自带有订阅,但是只能是注册会员,如果不是会员没办法订阅的,我们只能另想办法,现在就有了。您在我网站底部可以看到有“订阅到邮箱”,也可以内容页右侧看到“请···

    原生javascript实现拖动元素示例代码

    本文介绍原生javascript实现元素拖动。 思路: 1.首先改变被拖动元素的布局属性,关键是“position:absolue”; 2.捕捉鼠标事件"mousedown","mousemove","mouseup"; 3.当触发"mousedown"时,记录下当前鼠标在元素中的相对位置,_x,_y; 4.紧接着处理"mousemove"事件,通过改变元···

    优化使用mysql存储session的php代码

    之前写过两篇文章《自定义SESSION(二)——数据库保存》和《我为什么不使用session》   但后来发现都有问题。前者处理在实际中几乎没什么用处,而且session回收还得自己另外处理。后者频繁的操作数据库,打来了很大的性能问题。   这两天仔细考虑下···

    如何一次性删除DEDECMS中所有等待审核的文档

    织梦cms网站使用过程中,长遇到没有关闭会员中心,导致被大量提交待审核文档,如果手动一页一页删,文档太多,那怎么样一次性清理掉所有的等审核文档呢。。 注意,此操作是直接对SQL执行语句,操作前一定要备份好数据库,以防万一。 操作方法: 后台》系统》sql命令行工具···

    删除节点的jquery代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery6<···