阵列中的串联对象与SVG路径

Question

我想动态设置SVG路径的段。我将这些段作为对象存储在数组中。但是我有问题将它们连接到有效的路径，并作为分离器的空间。我尝试了加入((，但是我不确定如何正确访问数组中的对象。实现这一目标的最佳方法是什么？

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