如何使用循环简化JavaScript六边形路径数组的定义逻辑？

你可以通过提取重复的角度计算逻辑，用循环替代冗余的重复代码，这里提供几种实现方式：

方式一：基于角度数组遍历 #

先把原代码用到的所有角度整理成数组，再通过循环批量计算坐标：

// 定义和原代码一致的角度序列
const angles = [0, 30, 90, 150, 210, 270, 330];
const hexgon = ['M'];

angles.forEach(angle => {
  // 角度转弧度（Math.cos/sin 只接受弧度参数）
  const radian = angle * Math.PI / 180;
  // 计算并推入对应坐标
  hexgon.push(r * Math.cos(radian), r * Math.sin(radian));
});

// 最后添加路径闭合标记
hexgon.push('Z');

方式二：利用角度规律循环 #

观察原代码的角度：从30°开始，每次递增60°直到330°，加上初始的0°，可以用for循环直接生成角度：

const hexgon = ['M'];

// 先处理初始的0°点
let radian = 0 * Math.PI / 180;
hexgon.push(r * Math.cos(radian), r * Math.sin(radian));

// 循环生成剩下的角度点
for (let angle = 30; angle <= 330; angle += 60) {
  radian = angle * Math.PI / 180;
  hexgon.push(r * Math.cos(radian), r * Math.sin(radian));
}

hexgon.push('Z');

方式三：用ES6数组方法简化（更紧凑） #

借助flatMap和展开运算符可以写出更简洁的代码：

const angles = [0, 30, 90, 150, 210, 270, 330];
const hexgon = [
  'M',
  // 展开每个角度对应的坐标数组
  ...angles.flatMap(angle => {
    const rad = angle * Math.PI / 180;
    return [r * Math.cos(rad), r * Math.sin(rad)];
  }),
  'Z'
];

这些方式都能完全替代原有的冗余代码，逻辑更清晰，后续要调整角度或修改计算规则时，只需要改动循环逻辑或角度数组即可。

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