Porting C# 3D Array to JS 3D Array

Question

I developed a c# library which used across 3 project that relay in that specific piece of code, though, I still need to use that code in a javascript, so im porting it out, the thing is, I don't think I can replicate the same logic, for example, I've been thinking about this for a few days I couldn't get to the answer.

In the C# library I have a 3D array which is kinda like the core property in the application, and I cannot seem to figure out how to make that work in JS environment.

For example I have this piece of code:

public Obj[,,] objs = new Obj[18, 14, 8];

In which I would allocate objects in EVERY single position, and trying to port that to javascript, seemingly would result in:

var 3dArr = new Array();
    3dArr[0] = new Array();
    3dArr[0][0] = new Array();

Wouldnt this always hold the array object in the first position and if I set whatever else I would lose the whole array? Or am I wrong

Answer 1

At the time of writing, there is no language feature in JavaScript that would closely resemble multidimensional arrays in C#. It is also not recommended to expose ordinary arrays for the usage of whole application as that would make it easy to mistakenly harm the whole code by writing to the array something it is not supposed to hold.

However, it should be relatively easy to encapsulate an array you need into a simple new class, e.g. Array3d in the code below:

/***** CODE OF THE ARRAY *****/
function Array3d(width, height, depth, type) {
    this.width = width;
    this.height = height;
    this.depth = depth;
    this.type = type;
    this.array = new Array(width * height * depth);
}

Array3d.prototype = {
    get: function(x, y, z) {
        return this.array[calcIndex(this, x, y, z)];
    },
    set: function(x, y, z, item) {
        if (!(item instanceof this.type)) {
            throw new Error(item + ' is not instance of ' + this.type + '.');
        }
        this.array[calcIndex(this, x, y, z)] = item;
    }
};

function calcIndex(array3d, x, y, z) {
    return x + array3d.width * y + array3d.width * array3d.height * z;
}

/***** USAGE CODE *****/
function Something(i) {
    this.index = i;
}

var array3d = new Array3d(10, 11, 12, Something);
var something = new Something(11);
array3d.set(4, 0, 0, something);
var gettingBack = array3d.get(4, 0, 0);
if (gettingBack === something) {
    console.log('1: Works as expected');
}
else {
    console.error('1: Not expected ' + gettingBack);
}
gettingBack = array3d.get(0, 0, 4);
if (gettingBack == null) {
    console.log('2: Works as expected');
}
else {
    console.error('1: Not expected ' + gettingBack);
}

Answer 2

Try this ...

Array3d = function (width, height, depth, defaultValue) {
   width = width || 1;
   height = height || 1;
   depth = depth || 1;
   defaultValue= defaultValue|| 0;
   var arr = [];
   for (var i = 0; i < width; i++) {
      arr.push([]);
      for (var j = 0; j < height; j++) {
         var last = arr[arr.length - 1];
        last.push([]);
        for (var k = 0; k < depth; k++) {
            last[last.length - 1].push(defaultValue);
        }
      }
   }
   return arr;
}
console.log(new Array3d(3, 5, 2, 0));

So, specify the width, height, depth (these three default to 1), and defaultValue (defaults to zero) and you can manipulate it just as you would any javascript array ...