如何用ES6将SVG polyline平面坐标数组转换为[x,y]二维配对数组

符合ES6规范的实现方案 #

首先优化原始分割逻辑，避免输入中出现连续空格/逗号时产生空字符串项，同时将分割出的字符串坐标转为数值类型：

// 兼容纯空格、逗号分隔、混合分隔三种输入格式
const rawPoints = "0 0 50 0 25 50 0 0"
  .split(/[\s,]+/)
  .map(Number);

方案1：使用Array.from实现（最简洁）

直接按每两个元素一组生成二维数组：

const points = Array.from({ length: rawPoints.length / 2 }, (_, index) => [
  rawPoints[index * 2],
  rawPoints[index * 2 + 1]
]);

方案2：基于你提到的i%2 === 0判断实现

筛选出所有偶数索引的x坐标，再配对对应的y坐标：

const points = rawPoints
  .filter((_, i) => i % 2 === 0)
  .map((x, index) => [x, rawPoints[index * 2 + 1]]);

两种方案最终输出的结果都为：[[0,0], [50,0], [25,50], [0,0]]，符合需求。

如果需要处理坐标总数为奇数的异常场景，可以在分组前先做长度补全/截断处理：

// 示例：奇数长度时忽略最后一个异常坐标
if (rawPoints.length % 2 !== 0) rawPoints.pop();

内容的提问来源于stack exchange，提问作者thednp