如何将逗号分隔的坐标字符串转换为含x、y属性的对象数组

实现代码 #

你已经完成了字符串转普通数字数组的步骤，之后只要按索引奇偶位分组取值即可，两种常用实现方式如下：

方式1：易懂的for循环实现

const areaStr = "73,159,160,178,165,340,70,382";
// 你已实现的字符串转数字数组逻辑
const numArr = JSON.parse(`[${areaStr}]`);
const result = [];

// 索引从0开始，偶数位存x、下一位奇数位存y，每次循环步进2
for (let i = 0; i < numArr.length; i += 2) {
  // 增加边界判断，避免原始数组长度为奇数时出现y为undefined的异常
  if (numArr[i + 1] === undefined) break;
  result.push({
    x: numArr[i],
    y: numArr[i + 1]
  })
}
// result即为你需要的嵌套对象数组
const area = result;

方式2：简洁的reduce实现

const areaStr = "73,159,160,178,165,340,70,382";
const numArr = JSON.parse(`[${areaStr}]`);
const area = numArr.reduce((acc, cur, index) => {
  if (index % 2 === 0) {
    const yVal = numArr[index + 1];
    if (yVal !== undefined) acc.push({ x: cur, y: yVal });
  }
  return acc;
}, [])

实现逻辑说明 #

• 数组索引从0开始计数，你需要的x值全部对应偶数索引位（0、2、4、6...），y值全部对应x索引+1的奇数索引位（1、3、5、7...）
• 代码中的非空判断可根据你的业务需求调整，如果可以确定原始字符串永远是偶数个数字，可去掉该判断

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