Jak najlepiej konwertować ClientRect/DomRect do zwykłego obiektu

Question

Wynik someElement.getBoundingClientRect() zwraca specjalną obiektu typu ClientRect (lub DomRect podobno)

Jest strukturze jak {top: 10, right: 20, bottom: 30, left: 10, width: 10}

Niestety, tego obiektu nie zachowuje się tak jak inne obiekty.

Na przykład, używając Object.keys na to zwraca pustą tablicę (myślę ponieważ ClientRect właściwości nie są przeliczalny

znalazłem coś brudnego sposób przekonwertować do zwykłego obiektu:

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

Moje pytanie brzmi: czy jest lepszy sposób?

Answer 1

var obj = Object.assign({}, el.getBoundingClientRect().toJSON()) 

Answer 2

Nie kompilujmy zbytnio rzeczy!

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

Answer 3

można użyć przedłużyć metodę, jeśli używasz jQuery.

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