如何动态访问JavaScript对象的i.MoveTo属性值并执行逻辑处理？

嘿，我懂你这种卡壳的感觉！动态访问带点的属性名在JS里确实容易踩坑，咱们针对你的场景分两种情况来解决：

情况1：对象的属性名就是 i.MoveTo #

比如你的对象数组长这样（每个对象的属性名直接是i.MoveTo/i.LineTo，对应包含x、y的子对象）：

const pathPoints = [
  { "i.MoveTo": { x: 10, y: 20 } },
  { "i.LineTo": { x: 30, y: 20 } },
  { "i.MoveTo": { x: 50, y: 60 } }
];

这种时候不能用.语法访问（因为.会把i当成父对象，MoveTo当成它的属性），必须用方括号语法item["i.MoveTo"]来精准定位。

处理逻辑示例：

pathPoints.forEach(item => {
  // 检查当前对象是否包含i.MoveTo属性
  if (item.hasOwnProperty("i.MoveTo")) {
    const moveToCoords = item["i.MoveTo"];
    // 这里写你的业务逻辑，比如初始化路径起点
    console.log(`设置路径起点：x=${moveToCoords.x}, y=${moveToCoords.y}`);
  } else if (item.hasOwnProperty("i.LineTo")) {
    const lineToCoords = item["i.LineTo"];
    // 处理线段绘制逻辑
    console.log(`绘制线段到：x=${lineToCoords.x}, y=${lineToCoords.y}`);
  }
});

如果不确定每个对象的属性名，也可以先用Object.keys(item)拿到所有属性名再判断：

pathPoints.forEach(item => {
  const prop = Object.keys(item)[0]; // 假设每个对象只有一个目标属性
  if (prop === "i.MoveTo") {
    const coords = item[prop];
    // 处理MoveTo逻辑
  }
});

情况2：对象有name属性，值为i.MoveTo/i.LineTo #

如果你的数组是这种结构（每个对象自带name字段标记类型，x、y直接在对象里）：

const pathPoints = [
  { name: "i.MoveTo", x: 10, y: 20 },
  { name: "i.LineTo", x: 30, y: 20 }
];

这种情况就简单多了，直接通过item.name判断类型即可：

pathPoints.forEach(item => {
  switch(item.name) {
    case "i.MoveTo":
      console.log(`新路径起点：(${item.x}, ${item.y})`);
      // 执行MoveTo相关逻辑，比如Canvas的ctx.moveTo()
      break;
    case "i.LineTo":
      console.log(`绘制到：(${item.x}, ${item.y})`);
      // 执行LineTo相关逻辑，比如Canvas的ctx.lineTo()
      break;
    default:
      console.log(`未知路径类型：${item.name}`);
  }
});

顺便说下你之前尝试的方法为啥没用： #

• item.constructor.name：这是获取对象的构造函数名称（比如普通对象就是Object），和属性名完全不相关；
• Object.getOwnPropertyDescriptors(item)：能拿到属性的描述信息，但用来判断属性是否存在有点大材小用，不如hasOwnProperty或in直接；
• JSON.parse(JSON.stringify(item))：这是深拷贝对象的操作，对访问属性本身没有帮助，除非你需要处理循环引用的拷贝问题。

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