JavaScript数学在哪里出错？

Question

我试着翻译了 “形”（四个方块组相对坐标）的像素网格：

var grid_center = 6; 
var square_size = 20; 

l_shape = { 
    coords: [[-1, 0], [0, 0], [1, 0], [-1, 1]] 
} 

function draw_shape(shape, grid_location) { 
    for (coord in shape.coords) { 
     trans_coord = (grid_location[0] + coord[0]) * square_size; 
     console.log(trans_coord); 
    } 
} 

draw_shape(l_shape, [grid_center - 1, 0]); 

预期输出：

100 
120 
140 
160 

实际输出：

1000 
1020 
1040 
1060 

看起来像它可能是自动类型转换奇怪，但我不知道如何。我所有的数字都是实际的数字，没有任何字符串被引用。当手动输入数学，我得到预期的结果：

> (5 + 0) * 20 
100 

可能有更好的方法来从计算机科学的角度做到这一点，但我不感兴趣的那些。我只想知道为什么上面的程序无法按预期工作。

Answer 1

for (coord in shape.coords)将分配指数字符串coord

你想for (coord of shape.coords)

Answer 2

for (coord in shape.coords)将返回属性索引。您需要使用shape.coords[coord]才能访问实际的号码值。

或者你也可以使用forEach

例如

var grid_center = 6; 
 
var square_size = 20; 
 

 
l_shape = { 
 
    coords: [ 
 
    [-1, 0], 
 
    [0, 0], 
 
    [1, 0], 
 
    [-1, 1] 
 
    ] 
 
} 
 

 
function draw_shape(shape, grid_location) { 
 
    for (coord in shape.coords) { 
 
    trans_coord = (grid_location[0] + shape.coords[coord][0]) * square_size; 
 
    console.log(trans_coord); 
 
    } 
 

 
    // or 
 
    shape.coords.forEach(function(coord) { 
 
    trans_coord = (grid_location[0] + coord[0]) * square_size; 
 
    console.log(trans_coord); 
 
    }); 
 
} 
 

 
draw_shape(l_shape, [grid_center - 1, 0]);

Answer 3

你在这里迭代的方式是有点过。您使用的是for ... in方法，它是专门为：

的 for...in语句遍历对象的枚举的属性...

如果你看看coord值你得到他们'0' ，'1'等等。这是因为在JavaScript中，一个数组的对象足以使for工作，但这不是您想要的。

你想要的是数组迭代器forEach。该代码看起来是这样的，如果你正在使用ES6：

var grid_center = 6; 
var square_size = 20; 

var l_shape = { 
    coords: [[-1, 0], [0, 0], [1, 0], [-1, 1]] 
} 

function draw_shape(shape, grid_location) { 
    shape.coords.forEach(coord => { 
    trans_coord = (grid_location[0] + coord[0]) * square_size; 
    console.log(trans_coord); 
    }) 
} 

draw_shape(l_shape, [grid_center - 1, 0]); 

的结果不是你所期望的，但你现在在正确的轨道上。