Объединить объекты в массиве в SVG-путь

Question

Я хочу установить сегменты svg-пути динамически. Я храню сегменты как объекты в массиве. Но у меня есть проблемы, чтобы объединить их в допустимый путь с пробелом в качестве разделителя. Я попытался join (), но я не уверен, как правильно получить доступ к объектам в массиве. Каков наилучший способ достичь этого?

d="M 10 20 L 10 0 L 30 50 z"

let segments = [
       {
           "type": "M",
           "values": [ 10, 20 ]
       },
       {
            "type": "L",
            "values": [ 10, 0 ]
       },
       {
             "type": "L",
             "values": [ 30, 5 ]
       }
]

Answer 1

Карта + соединение должны хорошо здесь:

> segments.map(seg => `${seg.type} ${seg.values.join(' ')}`).join(' ') + " z";
  "M 10 20 L 10 0 L 30 5 z"

Answer 2

Вы можете использовать reduce так:

let segments = [
    {
        "type": "M",
        "values": [ 10, 20 ]
    },
    {
        "type": "L",
        "values": [ 10, 0 ]
    },
    {
        "type": "L",
        "values": [ 30, 5 ]
    }
];

function getSvgPath(data) {
  return data.reduce((acc, val) => {    
    const item = `${val.type} ${val.values.join(' ')}`;
    acc.push(item);
    return acc;
  }, []).join(' ');
}

const path = getSvgPath(segments);
console.log(path);