设置网格.Eloquent js第7章

Question

(http://eloquentjavascript.net/07_elife.html)

我很难理解我们添加的网格方法.get和.set甚至可以.首先,让我们来看一个示例案例. var grid = new Grid(5,5); 现在,space是一个25元素数组.当然width还有height are5.

现在的问题是"获取"的方法是什么.

现在我们说 console.log(grid.get(new Vector(1, 1)));.

所以x成为1,y成为1在我们创建新的对象.当然我们需要做grid.get因此我们返回,this.space[1+ 1 * 5]即空间数组中第6个点是25元素long.那为什么这个打印未定义？是因为空间数组中没有任何东西吗？

TLDR

原型.get和.set原型如何在这里工作(他们做了什么)？为什么我们设置 return this.space[vector.x + this.width*vector.y];,是否有一些数值意义vector.x+this.width*vector.y？

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


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


    function Grid (width,height){

        this.space = new Array(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];
        // 5 + 5 * 1;

    }

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

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

    }

    var grid = new Grid(5, 5);

    console.log(grid.get(new Vector(1, 1)));
    // ? undefined
    grid.set(new Vector(1, 1), "X");
    console.log(grid.get(new Vector(1, 1)));
    // ? X

Answer 1

我不知道我是否比你已经关注的文章更清楚,但我会尝试一下.

这个:new Array(25)相当于:[undefined, undefined, undefined, ...25x]

在您的代码中,您有:

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

然后再次声明相同的var:

var grid = new Grid(5, 5);

所以,最终,grid等于[undefined, undefined, undefined, ...].这就是为什么你在设置任何东西之前得到的不确定.

get并且set,只需找到数组中项目的位置,然后读取或写入所述位置的值.这是在数组中找到位置的代码:vector.x+this.width*vector.y.让我们分解一下:

vector.x =表格列

vector.y =表格行

想象一个表3x2 = ['row0 col0','row0 col1','row0 col2','row1 col0','row1 col1','row1 col2']

现在我们想要第2列,第1行的项目,所以new Vector(2, 1).这是我们阵列中第5位的项目.所以,从第1行开始(this.width*vector.y)=(3*1),在第2列获取项目(+ vector.x)=(+ 2)

this.width是每行的大小,因此当你乘以vector.y时,它意味着vector.y相当于一定数量的行.然后从那里,您只需对列位置(vector.x)求和.

表示表格数据

一个表有几行,每行有几列,因此您可以使用每个行的数组表示一个表,如:

row1 = ['item1', 'item2'];
row2 = ['item3', 'item4'];

table = [row1, row2];

这会给你一个多维数组: [ ['item1', 'item2'], ['item3', 'item4'] ]

这意味着您将访问以下数据: table[ rowIndex ][ columnIndex ]

但是您使用的方法将所有项目存储在一个列表中,一个数组: table = ['item1', 'item2', 'item3', 'item4']

现在假设我们想要找到与前一个示例中相同的项目,使用rowIndex和columnIndex,除了这次只有一个项目列表,所以我们需要组合rowIndex并columnIndex使用一个数字来获取项目:table[ indexOfItemIWant ].我们怎么做？您知道所有行都是一个接一个列出的,并且所有行都有相同数量的项目.因此,要在列表中找到行的开头,我们将行的大小乘以我们想要跳过的行数.在每个行有两个项目的表中,如我们的示例中,第一行从位置0开始,占据两个位置,因此下一行从位置0 + 2开始,然后是下一个位置,位置0 + 2 + 2,然后是0 +2 +2 +2,依此类推,这就是你使用width(一行中的项数)乘以我想要的行(vector.y)的原因.