Как лучше конвертировать 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]
}

Мой вопрос: есть лучший способ?

Ответ 1

Не перегружайте вещи!

function getBoundingClientRect(element) {
  const 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
  };
}

Ответ 2

Вы можете использовать метод expand, если вы используете jQuery.

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

Ответ 3

Предупреждение: нестандартное поведение (не работает в Firefox <62, включая ESR 60 и, возможно, другие браузеры, кроме Chrome)

var obj = el.getBoundingClientRect().toJSON();

Ответ 4

Это то, с чем я могу жить:

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

Ответ 5

Функциональный вариант 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())