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]); 

的結果不是你所期望的，但你現在在正確的軌道上。