javascript座标_Javascript数组与坐标

前几日，看Eloquent Javascript一书，其中第二单元最后又这么一道题：用代码创建一串字符串，形成8×8的网格。其中，使用 newline character 也就是 \n 来分行。网格的每个位置要么是一个空格，要么是一个#号。这些字符要形成黑白棋盘一样的布局。将这一串数组传给console.log之后，应当打出下面这样的形式：

# # # #

# # # #

# # # #

# # # #

# # # #

# # # #

# # # #

# # # #

题目要求，要在程序中定义一个 size = 8 的变量，当传入不同的数值时，这个黑白棋盘的大小可以随意改变。一开始我自己写得很麻烦，进行了多重的判断和循环才得以实现。看了书上的参考代码之后，顿觉十分优雅：

var size = 8;

var str = "";

for(var x = 0; x < size; x++){

for(var y = 0; y < size; y++){

if((x+y)%2){

str += "#";

} else {

str += " ";

}

}

str += "\n";

}

console.log(str);

在此例中，虽然题干中说的是网格，但是由于网格的单位大小相同，其实也可以视为坐标系来看待。

按照坐标来看，上述x和y分别代表了横坐标和纵坐标

按照网格来看，上述x和y分别代表了行号和列号

倒推回来，如果将网格的字符视为一个一维数组(先忽略其中的换行符)，那么根据一维数组中某个元素的index，就可以得到它在这样一个网格中的行号和列号(或者说它在坐标系中的x和y值)。方法也十分常见：

对于一维数组，可以字形设置宽高，将其视为二维的来使用，例如：

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

var width = 4, height = 3;

/*

0, 1, 2, 3,

4, 5, 6, 7,

8, 9, 10, 11

*/

//要想得到其中某个数字(比如6)在宽为4、高为3的网格(坐标系)中的位置(即坐标或行列号)，可以通过该数字的index来反向取得。下面以数字6为例：

var index = arr.indexOf(6);

console.log(index);

var row = Math.floor(index/width);

var col = index % width;

console.log("row: ", row, "; col: ", col);

//row: 1; col: 2 注意，这时候row和col都是从0开始的

//另外根据坐标中的位置，也可以得到数组中某个处于这个位置的值，例如 (2, 1) 这个坐标位置的数字，我们看到是6。

//要得到6的位置，只需要用 x + y * width 就可以得到。如：2 + 1 * 4 = 6

//注意，行列的概念与坐标的概念，两者是相对的。如果得到行号和列号，那么行号所代表的其实是y轴的值；列号代表的其实是x轴的值。

可能引用Eloquent Javascript第7章中的一个例子，可以看得更明白。当我们面对的是二位数组时，可能使用行列的概念更加的直观，如：

var grid = [["top left", "top middle", "top right"],

["bottom left", "bottom middle", "bottom right"]];

console.log(grid[1][2]);

// → bottom right

//这里的grid[1][2]中的1、2可以分别视为行号为1、列号为2(两者都是从0开始记)

如果面对的是一维数组，那么用坐标的概念就更为直观，如：

var grid = ["top left", "top middle", "top right",

"bottom left", "bottom middle", "bottom right"];

console.log(grid[2 + (1 * 3)]);

// → bottom right

//这里的grid[2 + (1 * 3)] 中的2为x值，1为y值，3为width。

关于网格与坐标的使用，Eloquent Javascript中用到过很多次。很有意思的就是在第7章 Electronic Life 里面，用到的几个对象：

首先与坐标相关的就是坐标点了。作者定义了一个名为Vector的对象，可以简单理解为坐标的操作：

function Vector(x, y){

this.x = x; this.y = y;

}

Vector.prototype.plus = function(other){

return new Vector(this.x + other.x, this.y + other.y);

//此处定义了两个向量相加的运算

}

Vector.prototype.times = function(factor){

return new Vector(this.x * factor, this.y * factor);

//此处定义了向量乘法的运算

}

现在坐标点有了，接下来就是坐标系或者网格了。作者定义了Grid这样一个对象，如下：

function Grid(width, height){

this.space = new Array(width * height);

//该Grid中的space属性其实就是一个width*height这么长的一维数组

this.width = width;

this.height = height;

}

Grid.prototype.isInside = function(vector){

return vector.x >= 0 && vector.x < this.width && vector.y >= 0 && vector.y < this.height;

//该方法判断一个坐标是否在网格中

}

Grid.prototype.get = function(vector){

return this.space[vector.x + this.width * vector.y];

//此处定义了返回space这个数组中指定坐标位置的值的方法。这里就用到了 x + y * width 来寻找的

}

Grid.ptototype.set = function(vector, value){

this.space[vector.x + this.width * vector.y] = value;

//此处定义了设置space这个数组中指定坐标位置的值的方法。

}

//注意：space其实一直是一个一维数组，但是却可以将其视为二维分布的，根据坐标来进行设置和取值。

要看行列与坐标x、y的对应关系，下面这个例子可能更清楚一些

var objectMap = [];

var plan = ["############",

"# # #",

"# ~ ~ #",

"# ## #",

"# ## o####",

"# #",

"############"];

var width = plan[0].length;

var height = plan.length;

var chr = {

"#": "wall",

" ": "null",

"~": "water",

"o": "human"

}

plan.forEach(function(line, y){ //注意这里的第二个参数是y，也就是行数

for(var x = 0; x < line.length; x++){ //这里遍历的是x，也就是列数

objectMap[x + y * line.length] = chr[line[x]];

}

});

console.log(objectMap);

/*

["wall", "wall", "wall", "wall", "wall", "wall", "wall", "wall", "wall", "wall", "wall", "wall",

"wall", "null", "null", "null", "null", "null", "wall", "null", "null", "null", "null", "wall",

"wall", "null", "null", "null", "water", "null", "null", "null", "null", "water", "null", "wall",

"wall", "null", "null", "wall", "wall", "null", "null", "null", "null", "null", "null", "wall",

"wall", "null", "null", "wall", "wall", "null", "null", "human", "wall", "wall", "wall", "wall",

"wall", "null", "null", "null", "null", "null", "null", "null", "null", "null", "null", "wall",

"wall", "wall", "wall", "wall", "wall", "wall", "wall", "wall", "wall", "wall", "wall", "wall"]

*/