So verwenden Sie object.assign()

Die Methode

object.assign() wird verwendet, um die Werte aller aufzählbaren Eigenschaften von einem oder mehreren Quellobjekten (Quellen) dem Zielobjekt (Ziel) zuzuweisen und die Zielsyntax „Object.assign(“ zurückzugeben. target, ..sources)“ bezieht sich der Parameter „target“ auf das Zielobjekt, das die Eigenschaften des Quellobjekts empfängt, und ist auch der geänderte Rückgabewert. Der Parameter „sources“ bezieht sich auf die Quelle -Objekt, das die Eigenschaften enthält, die zusammengeführt werden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Object.assign() Verwendung

Diese Methode wird verwendet, um die Werte aller aufzählbaren Eigenschaften von einem oder mehreren Quellobjekten (Quellen) dem Zielobjekt (Ziel) zuzuweisen und das Zielobjekt zurückzugeben .

Object.assign(target, ...sources)

target: Zielobjekt, das Objekt, das die Eigenschaften des Quellobjekts empfängt und auch der geänderte Rückgabewert ist.

Quellen: Quellobjekt, das die Eigenschaften enthält, die zusammengeführt werden.

1. Kopie des Objekts

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)

Hinweis:
1. Wenn sich die Eigenschaften des Quellobjekts von denen des Zielobjekts unterscheiden, werden sie auf das Zielobjekt kopiert;
2. Wenn Das Zielobjekt und das Quellobjekt haben die gleichen Attribute. Die Attributwerte des Zielobjekts werden durch die Attributwerte des Quellobjekts überschrieben.
3. Wenn mehrere Quellobjekte mit den gleichen Attributen vorhanden sind, dann werden die Attribute des Zielobjekts durch die Attribute des letzten Quellobjekts überschrieben.

2. Geerbte Eigenschaften und nicht aufzählbare Eigenschaften können nicht kopiert werden

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，则为可枚举属性

Hinweis: Die Object.assign-Methode kopiert nur die eigenen und aufzählbaren Eigenschaften des Quellobjekts in das Zielobjekt, geerbt und nicht aufzählbar Eigenschaften Die genannten Attribute werden nicht kopiert.

3. Tiefe Kopie des Objekts

Die Kopie von Object.assign() ist eine flache Kopie. Wenn der Attributwert des Quellobjekts ein Objektobjekt ist, wird dieses kopiert Der Zeiger des Objektwerts (dh die Adresse); wenn der Wert von obj zu diesem Zeitpunkt geändert wird, ist das Zielobjekt betroffen.
Um diesen Effekt zu vermeiden, müssen wir eine tiefe Kopie des Objekts erstellen:

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 的值。

Hinweis: Eine tiefe Kopie kann nur die Wertkopie des Referenztyps lösen, und Vererbung und nicht aufzählbare Eigenschaften können immer noch nicht kopiert werden. 4. Eine Ausnahme beendet den Kopiervorgang .

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，第三个源对象更是不会被拷贝到的。

Hinweis: Nur das Wrapper-Objekt eines Strings darf seine eigenen aufzählbaren Eigenschaften haben. 【Empfohlenes Lernen: Javascript-Video-Tutorial】

Das obige ist der detaillierte Inhalt vonSo verwenden Sie object.assign(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!