在JavaScript中声明一个空的二维数组？

76

我想在Javascript中创建一个二维数组，在其中存储坐标（x，y）。我还不知道会有多少对坐标，因为它们将由用户输入动态生成。

预定义2d数组的示例：

var Arr=[[1,2],[3,4],[5,6]];

我想我可以使用PUSH方法在数组末尾添加新记录。

如何声明一个空的二维数组，以便在我使用第一个Arr.push（）时将其添加到索引0，并且push写入的每个下一条记录都将获取下一个索引？

这可能很容易做到，我只是JS的新手，如果有人可以编写一个我可以检查的简短工作代码段，我将不胜感激。谢谢

javascript  arrays  dynamic  2d  push 
— 赞尼克斯
source
你试过了var Arr = new Array(new Array());吗？是的，push并且pop从该阵列的端部添加或删除元素，而shift和unshift删除或添加元素添加到数组的开始。
— 2013年
这听起来像两个不同的问题。首先，您需要任意大小的数组。然后，您有点想问一个涉及push方法的不同问题。（此外，如果您想回答自己的问题，我认为最好在答案部分中回答。）这是Google中用于在JavaScript中创建多维数组的最重要问题，我知道Google不会在这里规定内容，但我想说这是一个非常重要的问题，答案范围很广。
— PJ Brunet

Answers:

86

您可以像这样声明一个常规数组：

var arry = [];

然后，当您有一对要添加到数组中的值时，您要做的就是：

arry.push([value_1, value2]);

是的，第一次调用时arry.push，一对值将放置在索引0处。

从nodejs repl：

> var arry = [];
undefined
> arry.push([1,2]);
1
> arry
[ [ 1, 2 ] ]
> arry.push([2,3]);
2
> arry
[ [ 1, 2 ], [ 2, 3 ] ]

当然，由于javascript是动态类型化的，因​​此不会有类型检查器强制数组保持二维。您将必须确保仅添加坐标对，而不要执行以下操作：

> arry.push(100);
3
> arry
[ [ 1, 2 ],
  [ 2, 3 ],
  100 ]
— DJG
source
1
这似乎是一个很好的解决方案，所以我得到了X和Y坐标，然后像这样插入它们：arry.push（[x，y]）; -但是如何稍后返回，例如索引0的x坐标？
— Zannix
2
您可以只检索arry [0] [0]。（要获取Y坐标，可以检索arry [0] [1]。）
— DJG 2013年
50

如果要在创建时进行初始化，则可以使用fill和map。

const matrix = new Array(5).fill(0).map(() => new Array(4).fill(0));

5是行数，4是列数。

— AbhinavD
source
这在声明性上下文中也很好用，例如将2d数组预分配为对象成员。也许不是一个从头开始设计的东西，但是对于诸如从其他语言移植之类的任务很有用。
— steve.sims
17
另请注意，此处map(() => {})用于创建独立行，这是必要的。这样做new Array(5).fill(new Array(4).fill(0))是非常危险的举动。由于所有行均填充了对ONE数组的引用，因此如果您更新，arr[0][0]其值arr[1][0]也会更改。当您将此数组用作缓存表时，这可能会引起非常严重的黑暗问题。
— 开化
@Kaihua我是JavaScript新手，但使用了下面的KamilKiełczewski提供的打印格式代码，Abhinav的解决方案没有问题。如果修改了任何元素，则其他任何元素都不会更改。我想您的评论类似于Python中的浅表副本，但事实并非如此。
— yamex20年
@Kaihua，我不明白，这是如何引用同一数组的。如果创建由5个元素组成的数组（new Array(5)），并用新创建的数组（new Array(4)）填充它？并不new Array()意味着您就不再创建新的数组吗？JS怎么了？！
— Ramzan Chasygov，
@RamzanChasygov语言可能会因上下文而异= D
— Kaihua
33

ES6

m大小为3行5列的矩阵（删除.fill(0)不初始化为零）

[...Array(3)].map(x=>Array(5).fill(0))

显示代码段

— 卡米尔（KamilKiełczewski）
source
@AndrewBenjamin-问题出在哪里-您能描述一下还是提供测试用例？
— 卡米尔·基列夫斯基（KamilKiełczewski）
好吧，我复制了您的代码，当我尝试随机访问数组中的值时，它引发了错误。但是，进行了一个微小的修改并起作用：Array <number []>（n + 1）.fill（Array <number>（m + 1）.fill（0））
— AndrewBenjamin
而且由于您按正确的方向发送给我，并且我喜欢您的风格...赞成...尽管不确定为什么您按原样编写代码对我而言并不奏效。忽略打字稿转换，唯一的修饰是“填充”而不是“地图”
— AndrewBenjamin
我想我知道出了什么问题，我在复制粘贴脚本后不小心将第一个数组转换为<number>而不是<number []>。所以我不好。
— AndrewBenjamin
27

如果您希望能够像这样访问矩阵，那么matrix [i] [j]

我发现将其循环初始化最方便。

var matrix = [],
    cols = 3;

//init the grid matrix
for ( var i = 0; i < cols; i++ ) {
    matrix[i] = []; 
}

这会给你[[]，[]，[]]

因此matrix [0] [0] matrix [1] [0]返回未定义，而不是错误“未捕获的TypeError：无法设置未定义的属性'0'”

— 洛伦佐·甘吉（Lorenzo Gangi）
source
4

空数组是通过省略值来定义的，如下所示：

v=[[],[]]
a=[]
b=[1,2]
a.push(b)
b==a[0]
— UIlrvnd
source
3

我知道这是旧线程，但我建议使用array of objects而不是array of arrays。我认为这使代码更易于理解和更新。

// Use meaningful variable names like 'points', 
// anything better than a bad pirate joke, 'arr'!
var points = [];

// Create an object literal, then add it to the array
var point = {x: 0, y: 0};
points.push(point);

// Create and add the object to the array in 1 line
points.push({x:5, y:5});

// Create the object from local variables 
var x = 10;
var y = 8;
points.push({x, y});

// Ask the user for a point too
var response = prompt("Please enter a coordinate point. Example: 3,8");
var coords = response.split(",").map(Number);
points.push({x: coords[0], y: coords[1]});

// Show the results
var canvas = document.getElementById('graph');
var painter = canvas.getContext("2d");
var width = canvas.width, height = canvas.height;
var scale = 10, radius = 3.5, deg0 = 0, deg360 = 2 * Math.PI;

painter.beginPath();
for (var point of points) {
    var x = point.x * scale + scale;
    var y = height - point.y * scale - scale;
    painter.moveTo(x + radius, y);
    painter.arc(x, y, radius, deg0, deg360);
    painter.fillText(`${point.x}, ${point.y}`, x + radius + 1, y + radius + 1);
}
painter.stroke();
<canvas id="graph" width="150" height="150" style="border: 1px solid red;"></canvas>
展开摘要

— sdphm80
source
2

您可以使用函数使用数组填充数组：




var arr = [];
var rows = 11;
var columns = 12;

fill2DimensionsArray(arr, rows, columns);

function fill2DimensionsArray(arr, rows, columns){
    for (var i = 0; i < rows; i++) {
        arr.push([0])
        for (var j = 0; j < columns; j++) {
            arr[i][j] = 0;
        }
    }
}

结果是：




Array(11)
0:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
1:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
2:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
3:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
4:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
5:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
6:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
7:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
8:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
9:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
10:(12)[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

— Entoniperez
source
1

创建一个对象并将该对象推入数组

 var jSONdataHolder = function(country, lat, lon) {

    this.country = country;
    this.lat = lat;
    this.lon = lon;
}

var jSONholderArr = [];

jSONholderArr.push(new jSONdataHolder("Sweden", "60", "17"));
jSONholderArr.push(new jSONdataHolder("Portugal", "38", "9"));
jSONholderArr.push(new jSONdataHolder("Brazil", "23", "-46"));

var nObj = jSONholderArr.length;
for (var i = 0; i < nObj; i++) {
   console.log(jSONholderArr[i].country + "; " + jSONholderArr[i].lat + "; " + 
   jSONholderArr[i].lon);

}
— 比约恩·霍尔斯特伦
source
1 
const grid = Array.from(Array(3), e => Array(4));

Array.from(arrayLike, mapfn)

mapfn被调用，传递值undefined，返回new Array(4)。

创建一个迭代器，并next重复调用该值。从返回的值next，next().value是undefined。undefined然后，将这个值传递给新创建的数组的迭代器。每次迭代value都是undefined，您可以查看是否将其记录下来。

var grid2 = Array.from(Array(3), e => {
  console.log(e); // undefined
  return Array(4); // a new Array.
});
— 加勒特
source
请添加一些说明，说明其工作方式和原因。您的答案应允许其他用户学习。
— 大卫
0

怎么了 

var arr2 = new Array(10,20);
    arr2[0,0] = 5;
    arr2[0,1] = 2
    console.log("sum is   " + (arr2[0,0] +  arr2[0,1]))

应该读出“ sum is 7”

— 疯哈卡
source
4
现在设置arr2[1,0]=4。console.log("sum is " + (arr2[0,0] + arr2[0,1]))然后给出“和为6”。您实际上并没有创建二维数组，而是创建了一个包含条目“ 10”和“ 20”的简单数组。当您使用逗号分隔indizes尝试访问条目，你真的在这里描述的内容：stackoverflow.com/questions/7421013/...
— 丹尼尔
0

如果我们不使用ES2015并且没有fill（），则只需使用 .apply()

参见https://stackoverflow.com/a/47041157/1851492

let Array2D = (r, c, fill) => Array.apply(null, new Array(r)).map(function() {return Array.apply(null, new Array(c)).map(function() {return fill})})

console.log(JSON.stringify(Array2D(3,4,0)));
console.log(JSON.stringify(Array2D(4,5,1)));
展开摘要

— 烯丙基
source
0

无需做那么多麻烦！这很简单

这将创建2 * 3的字符串矩阵。

var array=[];
var x = 2, y = 3;
var s = 'abcdefg';

for(var i = 0; i<x; i++){
    array[i]=new Array();
      for(var j = 0; j<y; j++){
         array[i].push(s.charAt(counter++));
        }
    }
— 吉安·萨塔皮（Gyan Satapathy）
source
0 

var arr = [];
var rows = 3;
var columns = 2;

for (var i = 0; i < rows; i++) {
    arr.push([]); // creates arrays in arr
}
console.log('elements of arr are arrays:');
console.log(arr);

for (var i = 0; i < rows; i++) {
    for (var j = 0; j < columns; j++) {
        arr[i][j] = null; // empty 2D array: it doesn't make much sense to do this
    }
}
console.log();
console.log('empty 2D array:');
console.log(arr);

for (var i = 0; i < rows; i++) {
    for (var j = 0; j < columns; j++) {
        arr[i][j] = columns * i + j + 1;
    }
}
console.log();
console.log('2D array filled with values:');
console.log(arr);
展开摘要

— Zsolt Ventilla
source
-1

一线解决方案：

var x = 3, y = 4;

var ar = new Array(x).fill(new Array(y).fill(0));

它创建值为0的矩阵数组

— 爱德华
source
该解决方案的问题是每一行都包含相同的数组。如果设置，则ar[1][2] = 1每一行将包含[0, 0, 1, 0]。
— MrMartiniMo
-2

我们通常知道列数，但可能不知道行数（记录）。这是我的解决方案的一个示例，在这里利用了以上内容。（对于那些在JS方面比我有经验的人-几乎每个人-欢迎任何代码改进建议）

     var a_cols = [null,null,null,null,null,null,null,null,null];
     var a_rxc  = [[a_cols]];

     // just checking  var arr =  a_rxc.length ; //Array.isArray(a_rxc);
     // alert ("a_rxc length=" + arr) ; Returned 1 
     /* Quick test of array to check can assign new rows to a_rxc. 
        i can be treated as the rows dimension and  j the columns*/
       for (i=0; i<3; i++) {
          for (j=0; j<9; j++) {
            a_rxc[i][j] = i*j;
            alert ("i=" + i + "j=" + j + "  "  + a_rxc[i][j] );
           }
          if (i+1<3) { a_rxc[i+1] = [[a_cols]]; }
        }

如果将此数组传递给服务器，对我有用的ajax是 

 $.post("../ajax/myservercode.php",
       {
        jqArrArg1 : a_onedimarray,
        jqArrArg2 : a_rxc
       },
       function(){  },"text" )
        .done(function(srvresp,status) { $("#id_PageContainer").html(srvresp);} ) 
        .fail(function(jqXHR,status) { alert("jqXHR AJAX error " + jqXHR + ">>" + status );} );
— GMC
source
-4

// 3 x 5数组 

new Array(3).fill(new Array(5).fill(0))
— Leannez
source
6
不起作用。第一维中的每个项目都包含对同一辅助数组的引用。因此a [0] [y] === a [1] [y] === a [2] [y]可确保您得到一些奇怪的结果。
— Franck Jeannin
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.