javascript - 设置网格。 Eloquent js第7章

Question

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

我很难理解我们添加的 .get 和 .set 的 Grid 方法甚至做了什么。首先，让我们看一个示例。var grid = new Grid(5,5);现在 space 是一个包含 25 元素的数组。当然 width 和 height 都是 5.

现在的问题是“get”的方法是做什么的。

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

所以在我们创建的新对象中，x变成了1，y变成了1。当然，我们需要执行 grid.get，因此我们返回 this.space[1+ 1 * 5]，即空间数组中的第 6 个位置，长度为 25 个元素。那么为什么这个打印未定义？是不是空间阵里面什么都没有？

TLDR

.get 和 .set 原型(prototype)在这里如何工作(它们做什么)？还有为什么我们要设置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 = ["左上", "中上", "右上", "左下", "中下", "右下"];

然后再次声明同一个变量:

var grid = new Grid(5, 5);

因此，最终 grid 等于 [undefined, 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)。