ES6新增方法 Object.assign()

首先来看看它的定义作用:

Object.assign()方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

这里就先注意一下可枚举属性,简单的介绍一下:
js中有可枚举属性和不可枚举属性,它们是由属性的enumerable值决定的。用propertyIsEnumerable可以来判断该属性是否是可枚举属性。用最简单化能理解的话来说:

可枚举属性可以被 for…in…遍历,不可枚举的属性则不能被遍历。 js中的基本包装类型的原型属性是不可枚举的,比如Array,Number等

举个栗子:

        function Person() {
            this.name = "张三"
            this.age = 19;
        }
        var p = new Person();
        console.log(p.propertyIsEnumerable("name"));

        Person.prototype.prop = "李四" //添加一个原型属性
        console.log(p.propertyIsEnumerable("prop"));

        for (var k in p) {
            console.log(k + "," + p[k]);
        }

在这里插入图片描述
由此可见,在原型上加的属性,不管是不是可枚举的,使用propertyIsEnumerable方法的时候返回值都是:false,但是能被for…in…给遍历出来。说明它是可枚举属性。

**

言归正传,Object.assign()方法

**
先放上一个简单栗子:

     const a = {
            a: 1
        };

        const b = {
            b: 2
        };
        const c = {
            c: 3
        };

        Object.assign(a, b, c);
        console.log(a);

在这里插入图片描述
会发现,定义的对象 a 的值从一开始的 {a:1} 变成了{a:1,b:2,c:3}

第一个参数:是目标对象,就是将后面的对象都复制到它身上。(当它只有一个参数的时候,这个参数就是目标对象。)
第二个参数、第三个参数等等:都是源对象。

返回的参数都是一个object类型,如果里面的参数不是object类型,则它会自动先将它转换成object类型。
在这里插入图片描述
在这里插入图片描述

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

Object.assign(undefined) // 报错
Object.assign(null,b) // 报错

但是undefined和null作为源对象的时候,是不会报错的。因为它在处理源对象的时候,会先将它转换成对象,如果无法转成对象,就会跳过。

   Object.assign(b, undefined) === b // true
   Object.assign(b, null) === b // true

除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。

这里就要理解到,前面说的可枚举类型了。js中的基本包装类型的原型属性是不可枚举的,比如Number等。

      const a = {
            a: 1
        };

        const b = {
            b: 2
        };
        const c = {
            c: 3
        };

        Object.assign(a, b, c, 456, 'hi');
        console.log(a);

在这里插入图片描述
这里可以得知,参数里面的 456 是Number类型的,它是不可枚举的,所以 Object.assign()是不会将该属性复制到 a 对象中。但是,字符串类型的便可以。这是因为只有字符串的包装对象,会产生可枚举属性。

数组的处理

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

Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3]

上面代码中,Object.assign()把数组视为属性名为 0、1、2 的对象,因此源数组的 0 号属性4覆盖了目标数组的 0 号属性1。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值