JS Object.assign详解

ZITG • 2024-10-04 00:21 • 编程

一、基本介绍

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并且返回目标对象。

Object.assign()方法接受任意数量的参数，第一个参数是目标对象，后面的参数是源对象。如果有多个源对象，后面的对象属性将覆盖前面的对象属性。

语法：

Object.assign(target, ...sources)

返回值：目标对象

二、使用场景

Object.assign()方法常用于对象的复制、对象属性的合并、对象属性的默认值设置等场景。

三、对象的复制

下面代码演示了如何使用Object.assign()方法进行浅复制对象。

const source = { a: 1, b: 2 };
const target = Object.assign({}, source);
console.log(target); // { a: 1, b: 2 }

在上面的代码中，我们将source对象的所有属性复制到了一个新的空对象中，并将其赋值给了target。这样就完成了浅复制对象的操作。

四、对象属性的合并

Object.assign()方法还可以用来合并多个对象，将多个对象的属性合并到一个新对象中。

const source1 = { a: 1 };
const source2 = { b: 2 };
const source3 = { c: 3 };
const target = Object.assign({}, source1, source2, source3);
console.log(target); // { a: 1, b: 2, c: 3 }

在上面的代码中，我们将3个源对象的属性合并到了一个新对象中，并将其赋值给了target。

五、对象属性的默认值设置

Object.assign()方法常用于为对象设置默认值，如果某个属性已经存在，则使用已有的属性值，如果不存在则使用默认值。

const source = { a: 1, b: 2 };
const defaults = { b: 0, c: 3 };
const target = Object.assign({}, source, defaults);
console.log(target); // { a: 1, b: 2, c: 3 }

在上面的代码中，我们将source和defaults对象的属性合并到了一个新对象中，并将其赋值给了target。如果defaults对象中的属性已经存在于source对象中，则使用source中的属性值；如果不存在，则使用defaults中的默认值。

六、其他使用方式

Object.assign()方法还可以用于数组的合并、字符串的复制、函数参数的默认值设置等场景。

// 对数组进行合并
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = Object.assign([], arr1, arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]

// 复制字符串
const str = 'hello';
const copyStr = Object.assign('', str);
console.log(copyStr); // 'hello'

// 函数参数默认值
function func(options) {
  const settings = Object.assign({}, {
    name: 'Default',
    age: 18
  }, options);
  console.log(settings);
}
func({ name: 'Tom' }); // { name: 'Tom', age: 18 }

七、注意事项

Object.assign()方法进行复制和合并时，涉及到的属性值都是浅复制的。也就是说，如果源对象的属性值是一个引用类型的值（如数组、对象等），则目标对象中的属性值仅仅是该引用类型值的引用，并不是该引用类型的深拷贝。

const source = { a: [1, 2, 3] };
const target = Object.assign({}, source);
console.log(target); // { a: [1, 2, 3] }
source.a.push(4);
console.log(target); // { a: [1, 2, 3, 4] }

在上面的代码中，我们将source对象的属性复制到了target对象中。然后改变了source.a属性值的内容，发现target对象中的a属性值也发生了改变，因为source和target对象中的a属性值其实是同一个数组的引用。

八、总结

Object.assign()方法是一个十分常用的JavaScript方法，可以实现对象的复制、属性的合并和默认值的设置等场景。使用Object.assign()方法需要注意属性值的浅复制问题。

原创文章，作者：ZITG，如若转载，请注明出处：https://www.506064.com/n/138769.html