通过合并对象,我发现了Object.assign的更多用法

关联精彩文章:# 改进tabs组件切换效果,丝滑的动画获得一致好评~

对象合并

��端开发过程中,我们经常会遇到需要合并对象的地方,比如把下面两个对象进行合并

js 复制代码
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

前端新手的我,通过循环遍历对象的键值对,高难度复杂的完成了这个需求

js 复制代码
function mergeObjects(target, ...sources) {
  sources.forEach(source => {
    for (let key in source) {
      if (source.hasOwnProperty(key)) {
        target[key] = source[key];
      }
    }
  });
  return target;
}

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObject = mergeObjects({}, obj1, obj2);
console.log(mergedObject); // 输出: { a: 1, b: 3, c: 4 }

同事看到我的代码,也为竖起了大拇指,然后给我说了很多简单方案

使用扩展运算符

js 复制代码
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject); // 输出: { a: 1, b: 3, c: 4 }

使用 Object.keysforEach 方法

js 复制代码
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObject = {};
Object.keys(obj1).forEach(key => {
  mergedObject[key] = obj1[key];
});
Object.keys(obj2).forEach(key => {
  mergedObject[key] = obj2[key];
});

console.log(mergedObject); // 输出: { a: 1, b: 3, c: 4 }

使用 Object.assign

js 复制代码
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObject = Object.assign({}, obj1, obj2);
console.log(mergedObject); // 输出: { a: 1, b: 3, c: 4 }

上面的方法都很不错,我学到了很多,但我对Object.assign情有独钟,我决定研究一番!

Object.assign的用法及使用场景

Object.assign用法简介

Object.assign() 官方是这么介绍的:它用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

简单来说就是:它可以用于复制对象的属性,合并对象,以及创建对象的浅拷贝。

它的语法如下

js 复制代码
Object.assign(target, ...sources)
  • target:目标对象。
  • sources:源对象。
  • 返回值:目标对象。
js 复制代码
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const newTarget = Object.assign(target, source);

console.log(target);
// { a: 1, b: 4, c: 5 }

console.log(newTarget);
//  { a: 1, b: 4, c: 5 }

Object.assign 会将源对象(source)的属性复制到目标对象(target),并返回目标对象。因此,targetnewTarget 会指向同一个对象,并且这个对象包含合并后的属性。

注意事项

  • 浅拷贝Object.assign 执行的是浅拷贝,即如果属性值是对象,则只复制对象的引用。
  • 目标对象的修改 :目标对象(target)会被修改,原来的属性值会被覆盖。

使用场景

除了用来简单的合并对象,我发现了它还有下面的一些使用场景

为对象添加属性

你可以使用 Object.assign 为一个对象添加新的属性或方法。

js 复制代码
const person = { name: '快乐就是哈哈哈' };

Object.assign(person, { age: 18, profession: 'Engineer' });
console.log(person); // 输出: { name: '快乐就是哈哈哈', age: 18, profession: 'Engineer' }

创建对象的浅拷贝

你可以使用 Object.assign 创建对象的浅拷贝。注意,这只是浅拷贝,嵌套的对象仍然会共享引用。

js 复制代码
const original = { a: 1, b: { c: 2 } };

const copy = Object.assign({}, original);
console.log(copy); // 输出: { a: 1, b: { c: 2 } }

// 修改原对象中的嵌套对象会影响到拷贝对象
original.b.c = 3;
console.log(copy.b.c); // 输出: 3

合并多个源对象

你可以使用 Object.assign 将多个源对象的属性合并到目标对象中。

js 复制代码
const target = {};
const source1 = { a: 1 };
const source2 = { b: 2 };
const source3 = { c: 3 };

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

为对象设置默认值

你可以使用 Object.assign 为一个对象设置默认值。如果目标对象中已经存在某个属性,它将不会被覆盖。

js 复制代码
const settings = { volume: 5, brightness: 70 };
const defaultSettings = { volume: 10, brightness: 50, contrast: 100 };

const mergedSettings = Object.assign({}, defaultSettings, settings);
console.log(mergedSettings); // 输出: { volume: 5, brightness: 70, contrast: 100 }

总结

在前端开发中,合并对象是常见需求。这篇文章中,我们介绍了使用扩展运算符、Object.keysforEach 以及 Object.assign 来实现合并。同时,详细介绍了Object.assign 的使用。

Object.assign 方法将一个或多个源对象的属性复制到目标对象,常用于添加属性、创建浅拷贝、合并多个源对象和设置默认值。它执行浅拷贝,会修改目标对象并返回目标对象,原有属性值会被覆盖。

了解这些方法和场景可以极大提升我们的学习效率~

是小姐姐,不是小哥哥

相关推荐
naice3 分钟前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼7 分钟前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin12 分钟前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗15 分钟前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀69629 分钟前
CSS-响应式布局
前端
三小河34 分钟前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法38 分钟前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku38 分钟前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀69642 分钟前
2025-35st-w-日常开发总结
前端
我是日安44 分钟前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js