Question

我试图找出当其中一个是HTML元素时我无法合并两个或更多对象的原因。

修改：
为什么当我与Object.assign合并2＆＃34;正常＆＃34;像obj1和obj2之类的对象我从公共属性的obj2获取值，但是当我使用root这样的HTML元素时，我不会得到它的值（例如id属性的值

＆＃13;

const root = document.getElementById("root");
const obj1 = { id: "obj1", textContent: "i am obj1" };
const obj2 = { id: "obj2", textContent: "i am obj2"};
const merged1 = Object.assign({}, obj1, obj2); // the new object got the id and textContent from obj2
const merged2 = Object.assign({}, obj1, root); // the new object got the id and textContent from obj1. why not from root?
console.log(merged1);
console.log(merged2);
console.log(root.id);
console.log(root.textContent);

＆＃13;

<div id="root">i am root</div>

＆＃13;

Answer 1

将root作为第一个参数传递给Object.assign()

＆＃13;

const root = document.getElementById("root");
const obj1 = { id: "obj1", textContent: "i am obj1" };
const obj2 = { textContent: "i am obj2"}
const merged = Object.assign(root, obj1, obj2);
console.log(merged);
console.log(root.id);
console.log(root.textContent);

＆＃13;

<div id="root">i am root</div>

＆＃13;

我不想覆盖root，我想要一个新对象并获得来自root对象的相关值。

＆＃13;

const root = document.getElementById("root");
const obj1 = { id: "obj1", textContent: "i am obj1" };
const obj2 = { textContent: "i am obj2"};
const {id, textContent} = root;
const merged = Object.assign({}, obj1, obj2, {id, textContent});
console.log(merged);
console.log(root.id);
console.log(root.textContent);

＆＃13;

<div id="root">i am root</div>

＆＃13;

编辑：为什么当我与Object.assign合并2＆＃34;正常＆＃34;对象喜欢 obj1和obj2我从公共属性的obj2获取值，但是当我对root执行相同操作时，这是一个HTML元素我不会得到它值（例如id属性的值）

Object.assign()可以复制对象的可枚举属性。 <{1}} HTMLDivElement和id属性不可枚举。

Object.assign()

textContent方法用于复制所有值枚举从一个或多个源对象到目标的自有属性宾语。它将返回目标对象。

＆＃13;

Object.assign()

＆＃13;

const root = document.getElementById("root");
const props = ["textContent", "id"];

for (const prop of props) console.log(Object.propertyIsEnumerable(root, prop));

＆＃13;

将HTML Element对象与自定义对象合并

1 个答案: