Question

我找到了合并对象的方法

Object.assign({a:1,b:2},{c:3,d:4})

结果是

{一个：1，B：2，C：3，d：4}

现在我有一个视频DOM对象，其属性类似 currentTime，持续时间

所以我想将DOM视频对象与这样的简单对象合并

Object.assign(videoElement,{www:1})

结果不是我想要的，有时它只是视频元素，有时是{www：1}

所以我想知道是否有任何方法可以将这个DOM视频对象转换为javascript对象，以便我可以将它与这样的简单javascript对象合并

Object.assign(ConvertToObject(videoElement),{www:1})

所以我可以创建一个具有我自己的对象和视频dom元素属性的属性的新对象在此先感谢，如果你投票，请告诉我原因

Answer 1

结果不是我想要的，有时它只是视频元素，有时是{www:1}

除非你的论点顺序不一致，否则不应该这样。

Object.assign不会创建新对象。它通过从后续参数对象中复制任何直接分配的可枚举属性来修改并返回第一个参数。

以下是一些演示DOM元素可靠行为的简单示例：

var link = document.createElement('a');
Object.assign(link, { href: 'https://google.com' }) === link;
console.log(link.outerHTML);

<a href="https://google.com"></a>

var vid = document.createElement('video');
Object.assign(link, { src: 'https://example.com/video.mp4' }) === vid;
console.log(link.outerHTML);

<video src="https://example.com/video.mp4"></video>

如果您将另一个Object作为第一个参数，则会返回它。

如果没有复制某个属性，可能是因为它是一个“不可枚举”的属性。许多内置的DOM元素对象属性是不可枚举的，但这不是特定于DOM的。存在具有相同行为的非DOM对象。

Answer 2

您可以使用for...in循环所有属性并从HTML元素创建普通对象，并使用Object.assign()合并两个对象，这里是Fiddle

＆＃13;

var vid = document.querySelector('video');

function convertToObject(obj) {
  obj = {}
  for (var p in vid) {
    obj[p] = vid[p];
  }
  return obj;
}

var result = Object.assign(convertToObject(vid), {www: 1});
console.log(result.www);

＆＃13;

<video src=""></video>

＆＃13;

Answer 3

DOM对象不是纯JavaScript对象，它们是一种奇怪的东西，称为host objects.简而言之，主机对象可能在访问时表现不同。他们不必正确报告其类型，也不必将方法声称为类型function和其他类似的怪异。

在阅读Object.assign的polyfill方法时，有几行可能会导致主机对象出现问题：

if (Object.prototype.hasOwnProperty.call(source, key)) {
    target[key] = source[key];
}

因此，如同这样的捷径一样有用，我建议避免它。

将DOM对象转换为Javascript对象

3 个答案: