通过合并对象,我发现了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 方法将一个或多个源对象的属性复制到目标对象,常用于添加属性、创建浅拷贝、合并多个源对象和设置默认值。它执行浅拷贝,会修改目标对象并返回目标对象,原有属性值会被覆盖。

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

是小姐姐,不是小哥哥

相关推荐
haogexiaole2 小时前
vue知识点总结
前端·javascript·vue.js
哆啦A梦15884 小时前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app
智码看视界5 小时前
老梁聊全栈系列:(阶段一)架构思维与全局观
java·javascript·架构
汉克老师6 小时前
第十四届蓝桥杯青少组C++选拔赛[2023.2.12]第二部分编程题(5、机甲战士)
c++·算法·蓝桥杯·01背包·蓝桥杯c++·c++蓝桥杯
小周同学@6 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok6 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~6 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号7 小时前
【大前端】前端生成二维码
前端·二维码
Mr_Xuhhh7 小时前
项目需求分析(2)
c++·算法·leetcode·log4j
程序员码歌7 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端