在 Javascript 中声明一个空的二维数组?

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

预定义的2d 数组示例:

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

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

如何声明一个空的二维数组,以便当我使用第一个 Arr.push ()时,它将被添加到索引0中,并且通过 push 写入的每个下一个记录将接受下一个索引?

这可能很容易做到,我只是一个 JS 的新手,如果有人能够编写一个简短的工作代码片段,我可以检查,我会非常感激。谢谢

361118 次浏览

You can try something like this:-

var arr = new Array([]);

Push data:

arr[0][0] = 'abc xyz';

An empty array is defined by omitting values, like so:

v=[[],[]]
a=[]
b=[1,2]
a.push(b)
b==a[0]

You can nest one array within another using the shorthand syntax:

   var twoDee = [[]];

You can just declare a regular array like so:

var arry = [];

Then when you have a pair of values to add to the array, all you need to do is:

arry.push([value_1, value2]);

And yes, the first time you call arry.push, the pair of values will be placed at index 0.

From the nodejs repl:

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

Of course, since javascript is dynamically typed, there will be no type checker enforcing that the array remains 2 dimensional. You will have to make sure to only add pairs of coordinates and not do the following:

> arry.push(100);
3
> arry
[ [ 1, 2 ],
[ 2, 3 ],
100 ]

If you want to be able access the matrix like so:

matrix[i][j]

I find it the most convenient to init it in a loop.

var matrix = [],
cols = 3;


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

This will give you

[ [], [], [] ]

so

matrix[0][0]
matrix[1][0]

returns undefined and not the error "Uncaught TypeError: Cannot set property '0' of undefined".

We usually know the number of columns but maybe not rows (records). Here is an example of my solution making use of much of the above here. (For those here more experienced in JS than me - pretty much everone - any code improvement suggestions welcome)

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

And if passing this array to the sever the ajax that works for me is

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

What's wrong with

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

should read out "sum is 7"

You can fill an array with arrays using a function:

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

The result is:

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]

If you want to initialize along with the creation, you can use fill and map.

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

5 is the number of rows and 4 is the number of columns.

ES6

Matrix m with size 3 rows and 5 columns (remove .fill(0) to not init by zero)

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

let Array2D = (r,c) => [...Array(r)].map(_=>Array(c).fill(0));


let m = Array2D(3,5);


m[1][0] = 2;  // second row, first column
m[2][4] = 8;  // last row, last column


// print formated array
console.log(JSON.stringify(m)
.replace(/(\[\[)(.*)(\]\])/g,'[\n  [$2]\n]').replace(/],/g,'],\n  ')
);

Create an object and push that object into an array

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


}

If we don’t use ES2015 and don’t have fill(), just use .apply()

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

// for 3 x 5 array

new Array(3).fill(new Array(5).fill(0))
const grid = Array.from(Array(3), e => Array(4));

Array.from(arrayLike, mapfn)

mapfn is called, being passed the value undefined, returning new Array(4).

An iterator is created and the next value is repeatedly called. The value returned from next, next().value is undefined. This value, undefined, is then passed to the newly-created array's iterator. Each iteration's value is undefined, which you can see if you log it.

var grid2 = Array.from(Array(3), e => {
console.log(e); // undefined
return Array(4); // a new Array.
});

No need to do so much of trouble! Its simple

This will create 2 * 3 matrix of string.

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

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

I know this is an old thread but I'd like to suggest using an array of objects rather than an array of arrays. I think it make the code simpler to understand and update.

// 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>

You can nest a new array as you fill the first one:

let ROWS = 2,
COLS = 6;
let arr = new Array(ROWS).fill(new Array(COLS).fill(-1));
Output:
arr =
[
[-1, -1, -1, -1, -1, -1],
[-1, -1, -1, -1, -1, -1]
]

If you're confused, lets break this down with declaring/filling 1 array: Make a new array size d, filled with any initial value

let arr1d = new Array(d).fill(<whatever_fill_val>);

Now, instead of filling your first array with a int/string/etc, you can fill it with ANOTHER array, as you fill the nested one!

let arr = new Array(d).fill(new Array(n).fill(-1));

One Liner

let m = 3 // rows
let n = 3 // columns
let array2D = Array(m).fill().map(entry => Array(n))

This implementation creates a unique subarray for each entry. So setting array2D[0][1] = 'm' does not set each entry's [1] index to 'm'

ES6

const rows = 2;
const columns = 3;


const matrix = [...Array(rows)].map(() => [...Array(columns)].fill(0));


console.log(matrix);

The most simple way to create an empty matrix is just define it as an empty array:

// Empty data structure
const matrix = []

However, we want to represent something similar to a grid with n and m parameters know ahead then we can use this instead.

// n x m data structure
const createGrid = (n, m) => [...Array(n)].map(() => [...Array(m)].fill(0))
const grid = createGrid(3, 5)

Here is a simple snippet showing how to use them.

const createGrid = (n, m) => [...Array(n)].map(() => [...Array(m)].fill(0))


const toString = m => JSON.stringify(m)
.replace(/(\[\[)(.*)(]])/g, '[\n  [$2]\n]')
.replace(/],/g, '],\n  ')


// Empty data structure
const matrix = []
console.log(toString(matrix))


matrix.push([1,2,3])
matrix.push([4,5,6])
matrix.push([7,8,9])
console.log(toString(matrix))


// n x m data structure
const grid = createGrid(3, 5)
console.log(toString(grid))