Javascript 如何最好地将ClientRect/DomRect转换为普通对象

someElement.getBoundingClientRect（）

的结果返回类型为

ClientRect

（或

DomRect

的特殊对象）

它的结构类似于

{top:10，right:20，bottom:30，left:10，width:10}

不幸的是，此对象的行为与其他对象不太一样

例如，对其使用

Object.keys

返回一个空数组（我认为是因为

ClientRect

属性不可枚举）

我找到了一种肮脏的方式来转换为普通对象：

var obj = {}
for (key in rect) {
  obj[key] = rect[key]
}

---

我的问题是，有更好的方法吗？让我们不要把事情复杂化

function getBoundingClientRect(element) {
  var rect = element.getBoundingClientRect();
  return {
    top: rect.top,
    right: rect.right,
    bottom: rect.bottom,
    left: rect.left,
    width: rect.width,
    height: rect.height,
    x: rect.x,
    y: rect.y
  };
}

ES2015：

const getBoundingClientRect=element=>{
const{top，right，bottom，left，width，height，x，y}=element.getBoundingClientRect（）
返回{top，right，bottom，left，width，height，x，y}
}
console.log(
getBoundingClientRect（document.body）
)

如果您使用的是jQuery，则可以使用extend方法

var obj = $.extend( {}, element.getBoundingClientRect());

警告：非标准行为（不适用于Firefox<62，包括ESR 60和除Chrome以外的其他浏览器）

---

这是我可以接受的：

const persistRect = JSON.parse(JSON.stringify(someElement.getBoundingClientRect()))

---

功能性ES6变体：

const propValueSet = (prop) => (value) => (obj) => ({...obj, [prop]: value})
const toObj = keys => obj => keys.reduce((o, k) => propValueSet(k)(obj[k])(o), {})
const getBoundingClientRect = el => toObj(['top', 'right', 'bottom', 'left', 'width', 'height', 'x', 'y'])(el.getBoundingClientRect())

---

这是非常粗糙的，但是Object.keys（document.body.getBoundingClientRect（）。\uuu proto\uuuu）似乎在chrome中工作。：p这可以而且确实工作，但是$.extend与其他各种克隆方法相比效率非常低。请参见。正如OP说明的那样，ClientRect是一个特殊的对象，而且大多数（全部？）其他技术不能像预期的那样工作，因此这里没有太多的选择。这是一个ES6版本：

const getBoundingClientRect=（element）=>{const{top，right，bottom，left，width，height，x，y}=element.getBoundingClientRect（）；返回{top，right，bottom，left，width，x，y}}

我想你甚至不需要

对象。在那里分配
。
.toJSON
重新运行一个合适的对象（
对象.keys（$0.getBoundingClientRect（）.toJSON（））
工作）。你每次也会得到一个新的对象！
$0.getBoundingClientRect（）.toJSON（）！==$0.getBoundingClientRect（）.toJSON（）
请记住，
toJSON
不适用于firefox Folks上的rect对象抱歉，但我不得不对答案投反对票，因为您没有提到它不支持firefox，它在Edge中不起作用。但是当Edge切换到Chromium时，这将得到解决。
const propValueSet = (prop) => (value) => (obj) => ({...obj, [prop]: value})
const toObj = keys => obj => keys.reduce((o, k) => propValueSet(k)(obj[k])(o), {})
const getBoundingClientRect = el => toObj(['top', 'right', 'bottom', 'left', 'width', 'height', 'x', 'y'])(el.getBoundingClientRect())