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

Question

我试图弄清楚为什么当其中一个是 HTML 元素时我不能合并 2 个或更多对象。

编辑：
为什么当我与Object.assign 2 个“普通”对象（如obj1 和obj2）合并时，我会从 obj2 的公共属性中获取值，但是当我对 root（这是一个 HTML 元素）执行相同操作时，我不会获取其值（例如id 属性的值）

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);

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

Answer 1

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

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);

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

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

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);

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

编辑：为什么当我与Object.assign 2“正常”对象合并时 obj1 和 obj2 我从 obj2 获取公共属性的值，但是 当我对root 做同样的事情时，这是一个 HTML 元素，我没有得到它 值（例如id 属性的值）

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

Object.assign()

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

const root = document.getElementById("root");
const props = ["textContent", "id"];

for (const prop of props) console.log(Object.propertyIsEnumerable(root, prop));

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