试一试
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget === target);
// Expected output: true
语法
js
Object.assign(target)
Object.assign(target, source1)
Object.assign(target, source1, source2)
Object.assign(target, source1, source2, /* …, */ sourceN)
参数
目标-
目标对象 — 要应用源属性的对象,在修改后返回。如果目标提供了原始值,它将被转换为对象。
source1, …,sourceN-
源对象 — 包含要应用的属性的对象。
返回值
目标对象。
异常
描述
如果目标对象中的属性与源对象中的属性具有相同的 键,则源对象中的属性会覆盖目标对象中的属性。后面的源对象中的属性会覆盖前面的源对象中的属性。
Object.assign() 方法只从源对象复制 *可枚举* 和 *自有* 属性到目标对象。它在源上使用 `[[Get]]`,在目标上使用 `[[Set]]`,因此它会调用 getter 和 setter。因此,它 *赋值* 属性,而不是复制或定义新属性。这可能使其不适合将新属性合并到原型中,如果合并源包含 getter 的话。
要将属性定义(包括它们的枚举性)复制到原型,请改用 Object.getOwnPropertyDescriptor() 和 Object.defineProperty()。
String 和 Symbol 属性都会被复制。
如果发生错误,例如属性不可写,则会抛出 TypeError,并且如果任何属性在错误抛出之前被添加,target 对象也会被更改。
示例
克隆对象
js
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
深克隆警告
对于 深克隆,我们需要使用 structuredClone() 等替代方法,因为 Object.assign() 仅复制属性值。
如果源值是对对象的引用,它只复制引用值。
js
const obj1 = { a: 0, b: { c: 0 } };
const obj2 = Object.assign({}, obj1);
console.log(obj2); // { a: 0, b: { c: 0 } }
obj1.a = 1;
console.log(obj1); // { a: 1, b: { c: 0 } }
console.log(obj2); // { a: 0, b: { c: 0 } }
obj2.a = 2;
console.log(obj1); // { a: 1, b: { c: 0 } }
console.log(obj2); // { a: 2, b: { c: 0 } }
obj2.b.c = 3;
console.log(obj1); // { a: 1, b: { c: 3 } }
console.log(obj2); // { a: 2, b: { c: 3 } }
// Deep Clone
const obj3 = { a: 0, b: { c: 0 } };
const obj4 = structuredClone(obj3);
obj3.a = 4;
obj3.b.c = 4;
console.log(obj4); // { a: 0, b: { c: 0 } }
合并对象
js
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed.
合并具有相同属性的对象
js
const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
在参数顺序中,后面的对象会覆盖具有相同属性的对象。
复制 Symbol 类型属性
js
const o1 = { a: 1 };
const o2 = { [Symbol("foo")]: 2 };
const obj = Object.assign({}, o1, o2);
console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
Object.getOwnPropertySymbols(obj); // [Symbol(foo)]
原型链上的属性和不可枚举属性无法复制
js
const obj = Object.create(
// foo is on obj's prototype chain.
{ foo: 1 },
{
bar: {
value: 2, // bar is a non-enumerable property.
},
baz: {
value: 3,
enumerable: true, // baz is an own enumerable property.
},
},
);
const copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }
原始值将被包装成对象
js
const v1 = "abc";
const v2 = true;
const v3 = 10;
const v4 = Symbol("foo");
const obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
// Primitives will be wrapped, null and undefined will be ignored.
// Note, only string wrappers can have own enumerable properties.
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
// Primitives as the target are also wrapped to objects
const number = Object.assign(3, { a: 1 });
console.log(number); // Number {3, a: 1}
console.log(typeof number); // object
console.log(number.a); // 1
// null and undefined as targets throw TypeError
try {
Object.assign(null, { a: 1 });
} catch (e) {
console.log(e.message); // "Cannot convert undefined or null to object"
}
异常会中断正在进行的复制任务
js
const target = Object.defineProperty({}, "foo", {
value: 1,
writable: false,
}); // target.foo is a read-only property
Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
// TypeError: "foo" is read-only
// The Exception is thrown when assigning target.foo
console.log(target.bar); // 2, the first source was copied successfully.
console.log(target.foo2); // 3, the first property of the second source was copied successfully.
console.log(target.foo); // 1, exception is thrown here.
console.log(target.foo3); // undefined, assign method has finished, foo3 will not be copied.
console.log(target.baz); // undefined, the third source will not be copied either.
复制访问器
js
const obj = {
foo: 1,
get bar() {
return 2;
},
};
let copy = Object.assign({}, obj);
console.log(copy);
// { foo: 1, bar: 2 }
// The value of copy.bar is obj.bar's getter's return value.
// This is an assign function that copies full descriptors
function completeAssign(target, ...sources) {
sources.forEach((source) => {
const descriptors = Object.keys(source).reduce((descriptors, key) => {
descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
return descriptors;
}, {});
// By default, Object.assign copies enumerable Symbols, too
Object.getOwnPropertySymbols(source).forEach((sym) => {
const descriptor = Object.getOwnPropertyDescriptor(source, sym);
if (descriptor.enumerable) {
descriptors[sym] = descriptor;
}
});
Object.defineProperties(target, descriptors);
});
return target;
}
copy = completeAssign({}, obj);
console.log(copy);
// { foo:1, get bar() { return 2 } }
规范
| 规范 |
|---|
| ECMAScript® 2026 语言规范 # sec-object.assign |
浏览器兼容性
加载中…