Как сложить цифры?

Question

[Максим]

Имеются SVG в которых есть viewBox.
Необходимо сложить эти цифры так, чтобы результат был таким 0 0 97 54.
Для этого я перебрал все svg и получил все viewBox так:

let svg = document.querySelectorAll("svg");
svg.forEach(function (el){
  let viewbox = el.getAttribute("viewBox");
  console.log(viewbox)
})

Получил вот это:

"0 0 33 18"
"0 0 33 9"
"0 0 31 27"

Для сложения использую

viewbox.reduce(function (a,b){return a+b;})
Но выходит ошибка viewbox.reduce is not a function.

Как можно сложить эти цифры, чтобы получить такой результат?

https://codepen.io/topicstarter/pen/MWaBOvB

Comments

[Евгений]

Так у вас строки) чтобы получить массивы, воспользуйтесь .split(' ')

[Максим]

Евгений, вы можете показать ?

[Евгений]

Максим Ленский, элегантный способ на ум не приходит, ща нацарапаю примитив)

[Евгений]

Максим Ленский, ответ уже написпли) с деструктуризацией и прочим))

Answer 1

[0xD34F]

const viewBox = Array
  .from(document.querySelectorAll('svg'), n => n.getAttribute('viewBox').split(' '))
  .reduce((acc, n) => (n.forEach((m, i) => (acc[i] = (acc[i] ?? 0) + +m)), acc), [])
  .join(' ');

Comments

[Максим]

спс - но а попроще незя ? что бы дошло до меня что там происходит

[SideWest]

Максим Ленский, JS spread, регулярные выражения

Для остального названия есть

Сиди гугли, постигай светлое знание

Answer 2

[Андрей Пастухов]

viewbox.split(' ').reduce(function (a,b){return a+b;})

Comments

[Максим]

сложение не произошло - почему ?