本文详解如何根据 `forward`、`back`、`left`、`right` 等字符串指令，准确更新二维坐标 `[x, y]`，指出常见错误（如误用循环索引代替指令值、未返回新坐标），并提供两种清晰、健壮的实现方案。
在 JavaScript 中，将一组移动指令（如 'forward'、'left'）映射为二维坐标变化，是一个典型的状态更新问题。核心逻辑是：
- 'forward' → y += 1
- 'back' → y -= 1
- 'right' → x += 1
- 'left' → x -= 1
但初学者常犯两个关键错误：
- 混淆循环变量 i 与指令内容：for (let i = 0; i
- 修改局部变量却未更新返回值：函数中解构出 x 和 y 并修改，但最终 return coordinates 返回的是原始数组（其元素未被改变），导致结果始终不变。
✅ 正确的基础实现如下：
function getLocation(coordinates, commands) {
let x = coordinates[0];
let y = coordinates[1];
for (let i = 0; i < commands.length; i++) {
if (commands[i] === 'forward') y += 1;
else if (commands[i] === 'back') y -= 1;
else if (commands[i] === 'right') x += 1;
else if (commands[i] === 'left') x -= 1;
}
return [x, y]; // ✅ 返回新坐标数组，而非原数组
}
console.log(getLocation([0, 0], ['forward', 'forward', 'left'])); // 输出: [-1, 2]? 进阶写法：利用 ES6 解构赋值与剩余参数，使函数签名更语义化、调用更简洁：
立即学习“Java免费学习笔记（深入）”；
function getLocation([x, y], ...commands) {
for (const command of commands) {
switch (command) {
case 'forward': y += 1; break;
case 'back': y -= 1; break;
case 'right': x += 1; break;
case 'left': x -= 1; break;
default: break; // 忽略非法指令，也可抛错处理
}
}
return [x, y];
}
console.log(getLocation([0, 0], 'forward', 'forward', 'left')); // 输出: [-1, 2]? 注意事项：
- 建议使用 else if 或 switch 替代多个独立 if，避免意外多条件触发；
- 实际项目中应增加输入校验（如检查 commands 是否为数组、指令是否合法）；
- 若需支持斜向移动或步长控制，可扩展指令格式（如 'forward:2'），再做解析；
- 坐标更新是纯函数行为，不修改原始 coordinates 数组，符合不可变数据原则。
掌握这一模式，可轻松扩展至机器人路径模拟、游戏角色控制、SVG 动画位移等场景。
