首頁 > web前端 > 前端問答 > object.assign()怎麼用

object.assign()怎麼用

青灯夜游
發布: 2023-01-06 16:34:50
原創
5371 人瀏覽過

object.assign()方法用於將所有可枚舉屬性的值從一個或多個來源物件(sources)指派到目標物件(target),並傳回目標物件;語法「Object.assign (target, ...sources)”,參數“target”是指目標對象,即接收來源對象屬性的對象,也是修改後的返回值,參數“sources”是指來源對象,包含將被合併的屬性。

object.assign()怎麼用

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

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'}
登入後複製
注意:只有字串的包裝物件可能有自身可枚舉屬性。

【推薦學習:

javascript影片教學#

以上是object.assign()怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板