【Object.assign()】【对象合并/拷贝】从【核心逻辑】到【落地实操】彻底搞懂对象合并的最佳写法避开浅拷贝高频坑 文章目录一、Object.assign() 到底是什么二、Object.assign() 基本语法三、Object.assign() 基础示例3.1 示例 1合并两个对象3.2 示例 2合并多个对象3.3 示例 3相同属性会被覆盖四、Object.assign() 常见使用场景4.1 场景 1创建对象副本浅拷贝4.2 场景 2给对象添加默认值4.3 场景 3复制并修改对象属性五、Object.assign() 注意事项5.1 . 浅拷贝不是深拷贝5.2 . 只复制可枚举自有属性5.3 . 会修改目标对象5.4 . 源参数不是对象时的处理六、Object.assign 和展开运算符的区别七、Object.assign 总结同学们好我是 Eugene尤金一个拥有多年中后台开发经验的前端工程师~Eugene 发音很简单/juːˈdʒiːn/大家怎么顺口怎么叫就好你是否也有过明明学过很多技术一到关键时候却讲不出来、甚至写不出来你是否也曾怀疑自己是不是太笨了明明感觉会却总差一口气就算想沉下心从头梳理可工作那么忙回家还要陪伴家人。一天只有24小时时间永远不够用常常感到力不从心。技术行业本就是逆水行舟不进则退。如果你也有同样的困扰别慌。从现在开始跟着我一起心态归零利用碎片时间来一次彻彻底底的基础扫盲。这一次我们一起慢慢来扎扎实实变强。不搞花里胡哨的理论堆砌只分享看得懂、用得上的前端干货咱们一起稳步积累真正摆脱面向搜索引擎写代码的尴尬。一、Object.assign() 到底是什么Object.assign()是 JavaScript 中用于对象合并的内置方法可以把多个对象的属性“合并”到第一个参数指定的目标对象里并返回这个目标对象。简单说把后面对象里的属性依次“拷贝”到第一个对象上相当于把多个源对象的属性“塞进”同一个目标对象常用于对象浅拷贝、默认值合并等场景。二、Object.assign() 基本语法Object.assign(目标对象,源对象1,源对象2,...)要点第一个参数是目标对象后面的参数都是源对象会把源对象上的可枚举自有属性复制到目标对象返回值就是修改后的目标对象ps. 不了解可枚举概念的同学可点击此处一文带你理解枚举。三、Object.assign() 基础示例3.1 示例 1合并两个对象consttarget{a:1};constsource{b:2,c:3};Object.assign(target,source);console.log(target);// { a: 1, b: 2, c: 3 }说明source的b、c被复制到targettarget被修改并返回。⬆ 返回目录3.2 示例 2合并多个对象constobj1{a:1};constobj2{b:2};constobj3{c:3};constresultObject.assign(obj1,obj2,obj3);console.log(result);// { a: 1, b: 2, c: 3 }console.log(obj1);// { a: 1, b: 2, c: 3 } —— obj1 被修改了说明从第二个参数开始的对象会依次合并到obj1obj1作为目标对象会被直接修改。⬆ 返回目录3.3 示例 3相同属性会被覆盖consttarget{a:1,b:2};constsource{b:99,c:3};// b 冲突了Object.assign(target,source);console.log(target);// { a: 1, b: 99, c: 3 }说明后面的源对象会覆盖前面的同名属性这里source的b: 99覆盖了原来的b: 2。⬆ 返回目录四、Object.assign() 常见使用场景4.1 场景 1创建对象副本浅拷贝constoriginal{name:小明,age:18};constcopyObject.assign({},original);copy.age20;console.log(original.age);// 18 —— 原对象没变console.log(copy.age);// 20要点目标对象用空对象{}不会修改原对象得到一份浅拷贝。⬆ 返回目录4.2 场景 2给对象添加默认值functioncreateUser(options){returnObject.assign({},{name:匿名用户,age:0,role:guest},options);// 用户传入的 options 会覆盖默认值}console.log(createUser({name:小红}));// { name: 小红, age: 0, role: guest }说明先用默认对象再合并用户传入的options实现默认值逻辑。⬆ 返回目录4.3 场景 3复制并修改对象属性constuser{name:张三,age:25};constupdatedUserObject.assign({},user,{age:26});console.log(user);// { name: 张三, age: 25 }console.log(updatedUser);// { name: 张三, age: 26 }说明先拷贝user到空对象再覆盖age得到新对象原对象不变。⬆ 返回目录五、Object.assign() 注意事项5.1 浅拷贝不是深拷贝constobj1{a:1,nested:{b:2}};constobj2Object.assign({},obj1);obj2.nested.b999;console.log(obj1.nested.b);// 999 —— 原对象里的嵌套对象也被改了嵌套对象仍是同一引用修改obj2.nested会影响obj1.nested。需要深拷贝时要用递归、结构化克隆或lodash.cloneDeep等。补充 - 深浅拷贝定义浅拷贝只复制对象的表层对嵌套的引用类型只复制引用新旧对象共享嵌套数据。深拷贝完整复制所有层级含嵌套引用类型新旧对象彼此独立、无数据共享。⬆ 返回目录5.2 只复制可枚举自有属性constobjObject.create({inherit:继承属性});obj.own自有属性;constresultObject.assign({},obj);console.log(result);// { own: 自有属性 } —— 继承属性不会被复制说明只复制源对象自身的可枚举属性原型链上的属性不会被复制。⬆ 返回目录5.3 会修改目标对象consttarget{a:1};Object.assign(target,{b:2});console.log(target);// { a: 1, b: 2 } —— target 被改变了第一个参数会被直接修改若不想影响原对象应使用空对象{}作为第一个参数。⬆ 返回目录5.4 源参数不是对象时的处理Object.assign({},undefined,null,123,abc);// 忽略 undefined、null、数字字符串会按字符拆分// 结果: { 0: a, 1: b, 2: c }undefined、null会被跳过基本类型会先被包装成对象字符串会被当作类数组处理一般不建议这样用⬆ 返回目录六、Object.assign 和展开运算符的区别constobj1{a:1};constobj2{b:2};// 方式 1Object.assignconstresult1Object.assign({},obj1,obj2);// 方式 2展开运算符constresult2{...obj1,...obj2};console.log(result1);// { a: 1, b: 2 }console.log(result2);// { a: 1, b: 2 }两者都能实现对象合并一般用展开运算符{ ...obj1, ...obj2 }更直观需要原地修改已有对象或处理非对象参数时用Object.assign更合适。⬆ 返回目录七、Object.assign 总结要点说明作用把多个源对象的属性合并到目标对象第一个参数目标对象会被修改返回值修改后的目标对象拷贝方式浅拷贝常见用法对象浅拷贝、添加默认值、合并多个对象一句话Object.assign(目标, 源1, 源2, ...)就是“把后面的对象属性依次塞进第一个对象里”。⬆ 返回目录学习本就是一场持久战不需要急着一口吃成胖子。哪怕今天你只记住了一点点这都是实打实的进步。后续我还会继续用这种大白话、讲实战的方式带大家扫盲更多前端基础。关注我不迷路咱们把那些曾经模糊的知识点一个个彻底搞清楚。如果你觉得这篇内容对你有帮助不妨点赞收藏下次写代码卡壳时拿出来翻一翻比搜引擎更靠谱。我是 Eugene你的电子学友我们下一篇干货见