当前位置: 首页 > news >正文

js把两个对象合并成一个对象

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

语法:

Object.assign(target, ...sources)
参数

target
目标对象。
sources
源对象。

返回值

目标对象。

描述

如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()Object.defineProperty() 。

String类型和 Symbol 类型的属性都会被拷贝。

在出现错误的情况下,例如,如果属性不可写,会引发TypeError,如果在引发错误之前添加了任何属性,则可以更改target对象。

注意,Object.assign 不会跳过那些值为 null 或 undefined 的源对象。

示例:
var obj = { a: 1 }; var copy = Object.assign({}, obj); console.log(copy); // { a: 1 }
function test() { 'use strict'; let obj1 = { a: 0 , b: { c: 0}}; let obj2 = Object.assign({}, obj1); console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} obj1.a = 1; console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} obj2.a = 2; console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} obj2.b.c = 3; console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} // Deep Clone obj1 = { a: 0 , b: { c: 0}}; let obj3 = JSON.parse(JSON.stringify(obj1)); obj1.a = 4; obj1.b.c = 4; console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}} } test();

合并对象

var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

合并具有相同属性的对象

var o1 = { a: 1, b: 1, c: 1 }; var o2 = { b: 2, c: 2 }; var o3 = { c: 3 }; var obj = Object.assign({}, o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 }

属性被后续参数中具有相同属性的其他对象覆盖。

拷贝 symbol 类型的属性

var o1 = { a: 1 }; var o2 = { [Symbol('foo')]: 2 }; var obj = Object.assign({}, o1, o2); console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox) Object.getOwnPropertySymbols(obj); // [Symbol(foo)]

继承属性和不可枚举属性是不能拷贝的

var obj = Object.create({foo: 1}, { // foo 是个继承属性。 bar: { value: 2 // bar 是个不可枚举属性。 }, baz: { value: 3, enumerable: true // baz 是个自身可枚举属性。 } }); var copy = Object.assign({}, obj); console.log(copy); // { baz: 3 }

原始类型会被包装为对象

var v1 = "abc";
var v2 = true; var v3 = 10; var v4 = Symbol("foo") var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); // 原始类型会被包装,null 和 undefined 会被忽略。 // 注意,只有字符串的包装对象才可能有自身可枚举属性。 console.log(obj); // { "0": "a", "1": "b", "2": "c" }

 

异常会打断后续拷贝任务

var target = Object.defineProperty({}, "foo", { value: 1, writable: false }); // target 的 foo 属性是个只读属性。 Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4}); // TypeError: "foo" is read-only // 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。 console.log(target.bar); // 2,说明第一个源对象拷贝成功了。 console.log(target.foo2); // 3,说明第二个源对象的第一个属性也拷贝成功了。 console.log(target.foo); // 1,只读属性不能被覆盖,所以第二个源对象的第二个属性拷贝失败了。 console.log(target.foo3); // undefined,异常之后 assign 方法就退出了,第三个属性是不会被拷贝到的。 console.log(target.baz); // undefined,第三个源对象更是不会被拷贝到的。

 

拷贝访问器

var obj = {
  foo: 1, get bar() { return 2; } }; var copy = Object.assign({}, obj); // { foo: 1, bar: 2 } // copy.bar的值来自obj.bar的getter函数的返回值 console.log(copy); // 下面这个函数会拷贝所有自有属性的属性描述符 function completeAssign(target, ...sources) { sources.forEach(source => { let descriptors = Object.keys(source).reduce((descriptors, key) => { descriptors[key] = Object.getOwnPropertyDescriptor(source, key); return descriptors; }, {}); // Object.assign 默认也会拷贝可枚举的Symbols Object.getOwnPropertySymbols(source).forEach(sym => { let descriptor = Object.getOwnPropertyDescriptor(source, sym); if (descriptor.enumerable) { descriptors[sym] = descriptor; } }); Object.defineProperties(target, descriptors); }); return target; } var copy = completeAssign({}, obj); console.log(copy); // { foo:1, get bar() { return 2 } }

Polyfill

此polyfill不支持 symbol 属性,因为ES5 中根本没有 symbol :

if (typeof Object.assign != 'function') { // Must be writable: true, enumerable: false, configurable: true Object.defineProperty(Object, "assign", { value: function assign(target, varArgs) { // .length of function is 2 'use strict'; if (target == null) { // TypeError if undefined or null throw new TypeError('Cannot convert undefined or null to object'); } var to = Object(target); for (var index = 1; index < arguments.length; index++) { var nextSource = arguments[index]; if (nextSource != null) { // Skip over if undefined or null for (var nextKey in nextSource) { // Avoid bugs when hasOwnProperty is shadowed if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { to[nextKey] = nextSource[nextKey]; } } } } return to; }, writable: true, configurable: true }); }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


























































转载于:https://www.cnblogs.com/zhouyideboke/p/9556296.html

相关文章:

  • LeetCode 42. 接雨水(Trapping Rain Water)
  • 多线程与单例模式
  • 我为什么要写博文?要写什么样的博文?
  • 要做一个什么样的人?
  • sklearn word2vec 实践
  • 遍历数组
  • html5特效库
  • Leetcode#344. Reverse String(反转字符串)
  • python3之os、sys
  • 经典类、新式类,网络编程
  • app和bootloader跳转 MSP与PSP
  • 最近的一些心态
  • flex 布局
  • Redis的概念及与MySQL的区别
  • 1078 字符串压缩与解压
  • -------------------- 第二讲-------- 第一节------在此给出链表的基本操作
  • (ckeditor+ckfinder用法)Jquery,js获取ckeditor值
  • [NodeJS] 关于Buffer
  • Android Volley源码解析
  • ECMAScript入门(七)--Module语法
  • Essential Studio for ASP.NET Web Forms 2017 v2,新增自定义树形网格工具栏
  • httpie使用详解
  • nodejs:开发并发布一个nodejs包
  • PHP 使用 Swoole - TaskWorker 实现异步操作 Mysql
  • Python_网络编程
  • React as a UI Runtime(五、列表)
  • Spring Cloud Feign的两种使用姿势
  • Vue实战(四)登录/注册页的实现
  • 编写高质量JavaScript代码之并发
  • - 转 Ext2.0 form使用实例
  • 新年再起“裁员潮”,“钢铁侠”马斯克要一举裁掉SpaceX 600余名员工 ...
  • 曾刷新两项世界纪录,腾讯优图人脸检测算法 DSFD 正式开源 ...
  • !!java web学习笔记(一到五)
  • $GOPATH/go.mod exists but should not goland
  • $NOIp2018$劝退记
  • (c语言)strcpy函数用法
  • (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
  • (done) NLP “bag-of-words“ 方法 (带有二元分类和多元分类两个例子)词袋模型、BoW
  • (floyd+补集) poj 3275
  • (论文阅读11/100)Fast R-CNN
  • (论文阅读30/100)Convolutional Pose Machines
  • (四) Graphivz 颜色选择
  • (四)JPA - JQPL 实现增删改查
  • (转)linux下的时间函数使用
  • (转载)Linux网络编程入门
  • (轉貼) 2008 Altera 亞洲創新大賽 台灣學生成果傲視全球 [照片花絮] (SOC) (News)
  • (轉貼) VS2005 快捷键 (初級) (.NET) (Visual Studio)
  • .locked1、locked勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET C#版本和.NET版本以及VS版本的对应关系
  • .net core 依赖注入的基本用发
  • .net web项目 调用webService
  • /run/containerd/containerd.sock connect: connection refused
  • @vue/cli 3.x+引入jQuery
  • [ C++ ] STL---仿函数与priority_queue
  • [ Linux Audio 篇 ] 音频开发入门基础知识