object.assign()如何使用

這篇“object.assign()如何使用”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“object.assign()如何使用”文章吧。

object.assign()方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對象（sources）分配到目標(biāo)對象（target），并返回目標(biāo)對象；語法“Object.assign(target, ...sources)”，參數(shù)“target”是指目標(biāo)對象，即接收源對象屬性的對象，也是修改后的返回值，參數(shù)“sources”是指源對象，包含將被合并的屬性。

Object.assign() 的用法

該方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對象（sources）分配到目標(biāo)對象（target），并返回目標(biāo)對象。

Object.assign(target, ...sources)

target：目標(biāo)對象，接收源對象屬性的對象，也是修改后的返回值。

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、源對象屬性與目標(biāo)對象屬性不同，則會被拷貝到目標(biāo)對象中；
2、如果目標(biāo)對象和源對象有相同的屬性，目標(biāo)對象的屬性值會被源對象的屬性值覆蓋掉；
3、如果有多個(gè)源對象有相同的屬性，那么目標(biāo)對象的屬性將會被最后一個(gè)源對象屬性覆蓋。

二、繼承屬性和不可枚舉屬性不能拷貝

const obj1 = Object.create({foo: 1}, { // foo 是個(gè)繼承屬性。
    bar: {
        value: 2  // bar 是個(gè)不可枚舉屬性。
    },
    baz: {
        value: 3,
        enumerable: true  // baz 是個(gè)自身可枚舉屬性。
    }
});
const obj= Object.assign({}, obj1);
console.log(obj); // { baz: 3 }
//創(chuàng)建對象時(shí)，如果沒有設(shè)置enumerable的值，默認(rèn)為false（不可枚舉屬性），設(shè)置為true，則為可枚舉屬性

注意：Object.assign 方法只會拷貝源對象自身的并且可枚舉的屬性到目標(biāo)對象，繼承的和不可枚舉的屬性不會拷貝。

三、對象的深拷貝

Object.assign()拷貝是淺拷貝，它拷貝的是屬性值，假如源對象的屬性值是一個(gè)對象 obj，那么拷貝的則是這個(gè)對象值的指針（也就是地址）；這個(gè)時(shí)候修改obj 的值，則目標(biāo)對象會受到影響。
想要避免這種影響我們需要對對象進(jìn)行深拷貝：

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 值的變化則不會再影響到目標(biāo)對象 obj 的值。

注意：深拷貝只能解決引用類型的值拷貝，對于繼承和不可枚舉屬性依然不可以拷貝。

四、異常會終止拷貝

const target = Object.defineProperty({}, "foo", {
    value: 1,
    writable: false
}); // target 的 foo 屬性是個(gè)只讀屬性。

Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
// TypeError: "foo" is read-only
// 注意這個(gè)異常是在拷貝第二個(gè)源對象的第二個(gè)屬性時(shí)發(fā)生的。
console.log(target.bar);  // 2，說明第一個(gè)源對象拷貝成功了。
console.log(target.foo2); // 3，說明第二個(gè)源對象的第一個(gè)屬性也拷貝成功了。
console.log(target.foo);  // 1，只讀屬性不能被覆蓋，所以第二個(gè)源對象的第二個(gè)屬性拷貝失敗了。
console.log(target.foo3); // undefined，異常之后 assign 方法就退出了，第三個(gè)屬性是不會被拷貝到的。
console.log(target.baz);  // undefined，第三個(gè)源對象更是不會被拷貝到的。

五、原始類型將會被包裝成對象

原始類型會被包裝，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'}

注意：只有字符串的包裝對象才可能有自身可枚舉屬性。

以上就是關(guān)于“object.assign()如何使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。