object.assign怎样运用

发布时间：2023-07-11 11:30:34 所属栏目：教程来源：转载

导读： 　　这篇“object.assign()如何使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所

　　这篇“object.assign()如何使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“object.assign()如何使用”文章吧。

　　object.assign()方法用于将所有可枚举属性的值从一个或多个源对象（sources）分配到目标对象（target），并返回目标对象；语法“Object.assign(target, ...sources)”，参数“target”是指目标对象，即接收源对象属性的对象，也是修改后的返回值，参数“sources”是指源对象，包含将被合并的属性。

　　Object.assign() 的用法

　　该方法用于将所有可枚举属性的值从一个或多个源对象（sources）分配到目标对象（target），并返回目标对象。

　　Object.assign(target, ...sources)

　　target：目标对象，接收源对象属性的对象，也是修改后的返回值。

　　sources：源对象，包含将被合并的属性。

　　一、对象的拷贝

　　const target = { a: 1, b: 2 };

　　const source1 = { b: 4, c: 5 };

　　const source2 = { b: 6, c: 7 };

　　const obj = Object.assign(target,source1,source2);

　　console.log(obj); // (a: 1, b: 6, c: 7)

　　注意：

　　1、源对象属性与目标对象属性不同，则会被拷贝到目标对象中；

　　2、如果目标对象和源对象有相同的属性，目标对象的属性值会被源对象的属性值覆盖掉；

　　3、如果有多个源对象有相同的属性，那么目标对象的属性将会被最后一个源对象属性覆盖。

　　二、继承属性和不可枚举属性不能拷贝

　　const obj1 = Object.create({foo: 1}, { // foo 是个继承属性。

　　    bar: {

　　        value: 2 // bar 是个不可枚举属性。

　　    },

　　    baz: {

　　        value: 3,

　　        enumerable: true // baz 是个自身可枚举属性。

　　    }

　　});

　　const obj= Object.assign({}, obj1);

　　console.log(obj); // { baz: 3 }

　　//创建对象时，如果没有设置enumerable的值，默认为false（不可枚举属性），设置为true，则为可枚举属性

　　注意：Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象，继承的和不可枚举的属性不会拷贝。

　　三、对象的深拷贝

　　Object.assign()拷贝是浅拷贝，它拷贝的是属性值，假如源对象的属性值是一个对象 obj，那么拷贝的则是这个对象值的指针（也就是地址）；这个时候修改obj 的值，则目标对象会受到影响。

　　想要避免这种影响我们需要对对象进行深拷贝：

　　let obj1 = { a: 1, b: {c: 2 }};

　　let obj2 = { d: 2 };

　　let obj = Object.assign(obj2,JSON.parse(JSON.stringify(obj1)));

　　console.log(obj); // { d: 2, a:1, b:{ c:2 }}

　　obj1.b.c = 4;

　　console.log(obj); // { d: 2, a:1, b:{ c:2 }}

　　// 对象obj1.b.c 值的变化则不会再影响到目标对象 obj 的值。

　　注意：深拷贝只能解决引用类型的值拷贝，对于继承和不可枚举属性依然不可以拷贝。

　　四、异常会终止拷贝

　　const target = Object.defineProperty({}, "foo", {

　　    value: 1,

　　    writable: false

　　}); // target 的 foo 属性是个只读属性。

　　Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});

　　// TypeError: "foo" is read-only

　　// 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。

　　console.log(target.bar); // 2，说明第一个源对象拷贝成功了。

　　console.log(target.foo2); // 3，说明第二个源对象的第一个属性也拷贝成功了。

　　console.log(target.foo); // 1，只读属性不能被覆盖，所以第二个源对象的第二个属性拷贝失败了。

　　console.log(target.foo3); // undefined，异常之后 assign 方法就退出了，第三个属性是不会被拷贝到的。

　　console.log(target.baz); // undefined，第三个源对象更是不会被拷贝到的。

　　五、原始类型将会被包装成对象

　　原始类型会被包装，null 和 undefined 会被忽略。

　　const obj1 = 'aaa';

　　const obj2 = false;

　　const obj3 = true;

　　const obj4 = 10;

　　const obj= Object.assign(obj1,obj2,obj3,obj4);

　　console.log(obj); // { 0:'a', 1:'a', 2:'a'}

　　注意：只有字符串的包装对象才可能有自身可枚举属性。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!