I have been reading online and some places say it isn't possible, some say it is and then give an example and others refute the example, etc.
How do I declare a 2 dimensional array in JavaScript? (assuming it's possible)
How would I access its members? (myArray[0][1] or myArray[0,1]?)
Practically? Yes. You can create an array of arrays which functions as an 2D array as every item is an array itself:
let items = [
[1, 2],
[3, 4],
[5, 6]
];
console.log(items[0][0]); // 1
console.log(items[0][1]); // 2
console.log(items[1][0]); // 3
console.log(items[1][1]); // 4
console.log(items);But technically this is just an array of arrays and not a “true” 2D array, as I. J. Kennedy pointed out.
It should be noted that you could keep nesting arrays into one another and so create “multidimensional” arrays.
.lenght or .join('') for example in a multi-dimensionnal array like above or that array is actually considered as an object ? –
Wallace jagged array (array of arrays) - Does JavaScript have a difference between jagged and multidimensional as some other languages do? –
Mm You simply make each item within the array an array.
var x = new Array(10);
for (var i = 0; i < x.length; i++) {
x[i] = new Array(3);
}
console.log(x);new Array(size) where size is a variable. –
Interrex new Array(3) creates a new array with 3 indexes, and initializes each to undefined. See 'Array constructor with a single parameter', MDN. –
Sextuplicate Similar to activa's answer, here's a function to create an n-dimensional array:
function createArray(length) {
var arr = new Array(length || 0),
i = length;
if (arguments.length > 1) {
var args = Array.prototype.slice.call(arguments, 1);
while(i--) arr[length-1 - i] = createArray.apply(this, args);
}
return arr;
}
createArray(); // [] or new Array()
createArray(2); // new Array(2)
createArray(3, 2); // [new Array(2),
// new Array(2),
// new Array(2)]
var array = createArray(2, 3, 4, 5);. –
Puentes [[[[[null,null],[null,null]],[[null,null],[null,null]]],[[[null,null],[null,null]],[[null,null],[null,null]]]],[[[[null,null],[null,null]],[[null,null],[null,null]]],[[[null,null],[null,null]],[[null,null],[null,null]]]]] –
Rookie Array.from(Array(2), () => new Array(4))
2 and 4 being first and second dimensions respectively.
We are making use of Array.from, which can take an array-like param and an optional mapping for each of the elements.
Array.from(arrayLike[, mapFn[, thisArg]])
var arr = Array.from(Array(2), () => new Array(4));
arr[0][0] = 'foo';
console.info(arr);The same trick can be used to Create a JavaScript array containing 1...N
n = 10,000)Array(2).fill(null).map(() => Array(4))
The performance decrease comes with the fact that we have to have the first dimension values initialized to run .map. Remember that Array will not allocate the positions until you order it to through .fill or direct value assignment.
var arr = Array(2).fill(null).map(() => Array(4));
arr[0][0] = 'foo';
console.info(arr);Here's a method that appears correct, but has issues.
Array(2).fill(Array(4)); // BAD! Rows are copied by reference
While it does return the apparently desired two dimensional array ([ [ <4 empty items> ], [ <4 empty items> ] ]), there a catch: first dimension arrays have been copied by reference. That means a arr[0][0] = 'foo' would actually change two rows instead of one.
var arr = Array(2).fill(Array(4));
arr[0][0] = 'foo';
console.info(arr);
console.info(arr[0][0], arr[1][0]);Array.from({length:5}, () => []) –
Cyclostyle Array.from(Array(2), () => new Array(4)) and Array.from(Array(2), () => Array(4))? –
Zadoc new Array(100).fill(null).map(() => new Array(100).fill(null)) is faster than Array.from({ length: 100 }, () => Array.from({ length: 100 }, () => null)); When testing arrays of all sizes (10 to 1000), Array.from is ~67% slower than new Array see: jsbench.me/z3l905yt6p/2 –
Linette Javascript only has 1-dimensional arrays, but you can build arrays of arrays, as others pointed out.
The following function can be used to construct a 2-d array of fixed dimensions:
function Create2DArray(rows) {
var arr = [];
for (var i=0;i<rows;i++) {
arr[i] = [];
}
return arr;
}
The number of columns is not really important, because it is not required to specify the size of an array before using it.
Then you can just call:
var arr = Create2DArray(100);
arr[50][2] = 5;
arr[70][5] = 7454;
// ...
The easiest way:
var myArray = [[]];
myArray[1]=[]; before assigning myArray[1][0]=5; –
Shurlock [[]] to define that it's a 2-dimensional array? Or simply make it [], and we can use some method like .push([2,3])? DEMO –
Judoka myArray.length == 1 and myArray[0].length == 0. Which then gives the wrong result if you then copy a "genuinely empty" "0x0" array into it. –
Sabbatarian var myArray= [[], [], [], [], [], []]; This will create 6 rows with each dynamic column. For three dimensional array: var myArray= [[[], []], [[], []], [[], []]] This will create 3x2xdynamicColumn array. –
Spoony The reason some say that it isn't possible is because a two dimensional array is really just an array of arrays. The other comments here provide perfectly valid methods of creating two dimensional arrays in JavaScript, but the purest point of view would be that you have a one dimensional array of objects, each of those objects would be a one dimensional array consisting of two elements.
So, that's the cause of the conflicting view points.
string[3,5] = "foo";. It's a better approach for some scenarios, because the Y axis is not actually a child of the X axis. –
Gnarly Few people show the use of push:
To bring something new, I will show you how to initialize the matrix with some value, example: 0 or an empty string "".
Reminding that if you have a 10 elements array, in javascript the last index will be 9!
function matrix( rows, cols, defaultValue){
var arr = [];
// Creates all lines:
for(var i=0; i < rows; i++){
// Creates an empty line
arr.push([]);
// Adds cols to the empty line:
arr[i].push( new Array(cols));
for(var j=0; j < cols; j++){
// Initializes:
arr[i][j] = defaultValue;
}
}
return arr;
}
usage examples:
x = matrix( 2 , 3,''); // 2 lines, 3 cols filled with empty string
y = matrix( 10, 5, 0);// 10 lines, 5 cols filled with 0
for (which sets default value) from your procedure and write m=matrix(3,4); m[1][2]=2; console.log(JSON.stringify(m)); - and we get very strage matrix (too much nested) - you repair it in last for-defaultValue step, but I think you can rewrite procedure to use less nested arras before setting default values. –
Mckinney Two-liner:
var a = [];
while(a.push([]) < 10);
It will generate an array a of the length 10, filled with arrays. (Push adds an element to an array and returns the new length)
for (var a=[]; a.push([])<10;);? –
Rascality var works. It's always function-scoped. –
Rascality var a = new Array(10).fill([]) doen't have the same effect when indexing ? –
Leniency The sanest answer seems to be
var nrows = ~~(Math.random() * 10);
var ncols = ~~(Math.random() * 10);
console.log(`rows:${nrows}`);
console.log(`cols:${ncols}`);
var matrix = new Array(nrows).fill(0).map(row => new Array(ncols).fill(0));
console.log(matrix);Note we can't directly fill with the rows since fill uses shallow copy constructor, therefore all rows would share the same memory...here is example which demonstrates how each row would be shared (taken from other answers):
// DON'T do this: each row in arr, is shared
var arr = Array(2).fill(Array(4));
arr[0][0] = 'foo'; // also modifies arr[1][0]
console.info(arr);
Array.apply(null, Array(nrows)) but this is much more elegant. –
Oxendine fill. This won't work on a majority of browsers. –
Oxendine Array(nrows).map(() => 0), or, Array(nrows).map(function(){ return 0; }); –
Cobra The easiest way:
var arr = [];
var arr1 = ['00','01'];
var arr2 = ['10','11'];
var arr3 = ['20','21'];
arr.push(arr1);
arr.push(arr2);
arr.push(arr3);
alert(arr[0][1]); // '01'
alert(arr[1][1]); // '11'
alert(arr[2][0]); // '20'
Today 2020.02.05 I perform tests on MacOs HighSierra 10.13.6 on Chrome v79.0, Safari v13.0.4 and Firefox v72.0, for chosen solutions.
Conclusions for non-initialised 2d array
{}/arr[[i,j]] (N) is fastest for big and small arrays and it looks like it is good choice for big sparse arraysfor-[]/while (A,G) are fast and they are good choice for small arrays.for-[] (B,C) are fast and they are good choice for big arraysArray..map/from/fill (I,J,K,L,M) are quite slow for small arrays, and quite fast for big arraysfor-Array(n) (B,C) is much slower on safari than for-[] (A)for-[] (A) for big array is slow on all browsers
Conclusions for initialised 2d array
for/while (A,B,C,D,E,G) are fastest/quite fast for small arrays on all browsersfor (A,B,C,E) are fastest/quite fast for big arrays on all browsersArray..map/from/fill (I,J,K,L,M) are medium fast or slow for small arrays on all browsers{}/arr[[i,j]] (N) is slowest for small and big arrays on all browsers
Test for solutions which not fill (initialise) output array
We test speed of solutions for
function A(r) {
var arr = [];
for (var i = 0; i < r; i++) arr[i] = [];
return arr;
}
function B(r, c) {
var arr = new Array(r);
for (var i = 0; i < arr.length; i++) arr[i] = new Array(c);
return arr;
}
function C(r, c) {
var arr = Array(r);
for (var i = 0; i < arr.length; i++) arr[i] = Array(c);
return arr;
}
function D(r, c) {
// strange, but works
var arr = [];
for (var i = 0; i < r; i++) {
arr.push([]);
arr[i].push(Array(c));
}
return arr;
}
function E(r, c) {
let array = [[]];
for (var x = 0; x < c; x++) {
array[x] = [];
for (var y = 0; y < r; y++) array[x][y] = [0];
}
return array;
}
function F(r, c) {
var makeArray = function(dims, arr) {
if (dims[1] === undefined) {
return Array(dims[0]);
}
arr = Array(dims[0]);
for (var i = 0; i < dims[0]; i++) {
arr[i] = Array(dims[1]);
arr[i] = makeArray(dims.slice(1), arr[i]);
}
return arr;
}
return makeArray([r, c]);
}
function G(r) {
var a = [];
while (a.push([]) < r);
return a;
}
function H(r,c) {
function createArray(length) {
var arr = new Array(length || 0),
i = length;
if (arguments.length > 1) {
var args = Array.prototype.slice.call(arguments, 1);
while(i--) arr[length-1 - i] = createArray.apply(this, args);
}
return arr;
}
return createArray(r,c);
}
function I(r, c) {
return [...Array(r)].map(x => Array(c));
}
function J(r, c) {
return Array(r).fill(0).map(() => Array(c));
}
function K(r, c) {
return Array.from(Array(r), () => Array(c));
}
function L(r, c) {
return Array.from({length: r}).map(e => Array(c));
}
function M(r, c) {
return Array.from({length: r}, () => Array.from({length: c}, () => {}));
}
function N(r, c) {
return {}
}
// -----------------------------------------------
// SHOW
// -----------------------------------------------
log = (t, f) => {
let A = f(3, 4); // create array with 3 rows and 4 columns
A[1][2] = 6 // 2-nd row 3nd column set to 6
console.log(`${t}[1][2]: ${A[1][2]}, full: ${JSON.stringify(A).replace(/null/g,'x')}`);
}
log2 = (t, f) => {
let A = f(3, 4); // create array with 3 rows and 4 columns
A[[1,2]] = 6 // 2-nd row 3nd column set to 6
console.log(`${t}[1][2]: ${A[[1,2]]}, full: ${JSON.stringify(A).replace(/null/g,'x')}`);
}
log('A', A);
log('B', B);
log('C', C);
log('D', D);
log('E', E);
log('F', F);
log('G', G);
log('H', H);
log('I', I);
log('J', J);
log('K', K);
log('L', L);
log('M', M);
log2('N', N);This is presentation of solutions - not benchmarkTest for solutions which fill (initialise) output array
We test speed of solutions for
function A(r, c, def) {
var arr = [];
for (var i = 0; i < r; i++) arr[i] = Array(c).fill(def);
return arr;
}
function B(r, c, def) {
var arr = new Array(r);
for (var i = 0; i < arr.length; i++) arr[i] = new Array(c).fill(def);
return arr;
}
function C(r, c, def) {
var arr = Array(r);
for (var i = 0; i < arr.length; i++) arr[i] = Array(c).fill(def);
return arr;
}
function D(r, c, def) {
// strange, but works
var arr = [];
for (var i = 0; i < r; i++) {
arr.push([]);
arr[i].push(Array(c));
}
for (var i = 0; i < r; i++) for (var j = 0; j < c; j++) arr[i][j]=def
return arr;
}
function E(r, c, def) {
let array = [[]];
for (var x = 0; x < c; x++) {
array[x] = [];
for (var y = 0; y < r; y++) array[x][y] = def;
}
return array;
}
function F(r, c, def) {
var makeArray = function(dims, arr) {
if (dims[1] === undefined) {
return Array(dims[0]).fill(def);
}
arr = Array(dims[0]);
for (var i = 0; i < dims[0]; i++) {
arr[i] = Array(dims[1]);
arr[i] = makeArray(dims.slice(1), arr[i]);
}
return arr;
}
return makeArray([r, c]);
}
function G(r, c, def) {
var a = [];
while (a.push(Array(c).fill(def)) < r);
return a;
}
function H(r,c, def) {
function createArray(length) {
var arr = new Array(length || 0),
i = length;
if (arguments.length > 1) {
var args = Array.prototype.slice.call(arguments, 1);
while(i--) arr[length-1 - i] = createArray.apply(this, args).fill(def);
}
return arr;
}
return createArray(r,c);
}
function I(r, c, def) {
return [...Array(r)].map(x => Array(c).fill(def));
}
function J(r, c, def) {
return Array(r).fill(0).map(() => Array(c).fill(def));
}
function K(r, c, def) {
return Array.from(Array(r), () => Array(c).fill(def));
}
function L(r, c, def) {
return Array.from({length: r}).map(e => Array(c).fill(def));
}
function M(r, c, def) {
return Array.from({length: r}, () => Array.from({length: c}, () => def));
}
function N(r, c, def) {
let arr={};
for (var i = 0; i < r; i++) for (var j = 0; j < c; j++) arr[[i,j]]=def;
return arr;
}
// -----------------------------------------------
// SHOW
// -----------------------------------------------
log = (t, f) => {
let A = f(1000,1000,7); // create array with 1000 rows and 1000 columns,
// each array cell initilised by 7
A[800][900] = 5 // 800nd row and 901nd column set to 5
console.log(`${t}[1][2]: ${A[1][2]}, ${t}[800][901]: ${A[800][900]}`);
}
log2 = (t, f) => {
let A = f(1000,1000,7); // create array with 1000 rows and 1000 columns,
// each array cell initilised by 7
A[[800,900]] = 5 // 800nd row 900nd column set to 5
console.log(`${t}[1][2]: ${A[[1,2]]}, ${t}[800][900]: ${A[[800,900]]}`);
}
log('A', A);
log('B', B);
log('C', C);
log('D', D);
log('E', E);
log('F', F);
log('G', G);
log('H', H);
log('I', I);
log('J', J);
log('K', K);
log('L', L);
log('M', M);
log2('N', N);This is presentation of solutions - not benchmark
To create an 4x6 array, simply do this
const x = [...new Array(6)].map(elem => new Array(4))
It's usually a good practice to start with an empty array, rather than filling w random values. (You normally declare array as const x = [] in 1D, so better to start w empty in 2D.)
This is what i achieved :
var appVar = [[]];
appVar[0][4] = "bineesh";
appVar[0][5] = "kumar";
console.log(appVar[0][4] + appVar[0][5]);
console.log(appVar);This spelled me bineeshkumar
appVar[1][4] = "bineesh"; is wrong, how to solve it? –
Acosta var appVar = [[], [], [], [], [], []]; This will create 6 rows with each dynamic multiple columns. –
Spoony Two dimensional arrays are created the same way single dimensional arrays are. And you access them like array[0][1].
var arr = [1, 2, [3, 4], 5];
alert (arr[2][1]); //alerts "4"
For one liner lovers Array.from()
// creates 8x8 array filed with "0"
const arr2d = Array.from({ length: 8 }, () => Array.from({ length: 8 }, () => "0"))
Another one (from comment by dmitry_romanov) use Array().fill()
// creates 8x8 array filed with "0"
const arr2d = Array(8).fill(0).map(() => Array(8).fill("0"))
Using ES6+ spread operator ("inspired" by InspiredJW answer :) )
// same as above just a little shorter
const arr2d = [...Array(8)].map(() => Array(8).fill("0"))
0 in the first fill() function: const arr2d = Array(8).fill().map(() => Array(8).fill("0")); –
Obnoxious I'm not sure if anyone has answered this but I found this worked for me pretty well -
var array = [[,],[,]]
eg:
var a = [[1,2],[3,4]]
For a 2 dimensional array, for instance.
var array = [[],[]] is adequate. –
Taste To create a non-sparse "2D" array (x,y) with all indices addressable and values set to null:
let 2Darray = new Array(x).fill(null).map(item =>(new Array(y).fill(null)))
bonus "3D" Array (x,y,z)
let 3Darray = new Array(x).fill(null).map(item=>(new Array(y).fill(null)).map(item=>Array(z).fill(null)))
Variations and corrections on this have been mentioned in comments and at various points in response to this question but not as an actual answer so I am adding it here.
It should be noted that (similar to most other answers) this has O(x*y) time complexity so it probably not suitable for very large arrays.
fill set the same value. if change null to `object it will be the same object in every column –
Thurmond let 2Darray = new Array(x).fill(null).map(item =>(new Array(y).fill(null).map(cell =>(yourValueHere)))) –
Rookie To create a 2D array in javaScript we can create an Array first and then add Arrays as it's elements. This method will return a 2D array with the given number of rows and columns.
function Create2DArray(rows,columns) {
var x = new Array(rows);
for (var i = 0; i < rows; i++) {
x[i] = new Array(columns);
}
return x;
}
to create an Array use this method as below.
var array = Create2DArray(10,20);
In JavaScript 1.7 and higher you can use array comprehensions to create two dimensional arrays. You can also filter and/or manipulate the entries while filling the array and don't have to use loops.
var rows = [1, 2, 3];
var cols = ["a", "b", "c", "d"];
var grid = [ for (r of rows) [ for (c of cols) r+c ] ];
/*
grid = [
["1a","1b","1c","1d"],
["2a","2b","2c","2d"],
["3a","3b","3c","3d"]
]
*/
You can create any n x m array you want and fill it with a default value by calling
var default = 0; // your 2d array will be filled with this value
var n_dim = 2;
var m_dim = 7;
var arr = [ for (n of Array(n_dim)) [ for (m of Array(m_dim) default ]]
/*
arr = [
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
]
*/
More examples and documentation can be found here.
Please note that this is not a standard feature yet.
for statement is still a loop... –
Pentapody Row and Column sizes of an array known only at the run time then following method could be used for creating a dynamic 2d array.
var num = '123456';
var row = 3; // Known at run time
var col = 2; // Known at run time
var i = 0;
var array2D = [[]];
for(var r = 0; r < row; ++r)
{
array2D[r] = [];
for(var c = 0; c < col; ++c)
{
array2D[r][c] = num[i++];
}
}
console.log(array2D);
// [[ '1', '2' ],
// [ '3', '4' ],
// [ '5', '6' ]]
console.log(array2D[2][1]); // 6Array(m).fill(v).map(() => Array(n).fill(v))
You can create a 2 Dimensional array m x n with initial value m and n can be any numbers v can be any value string, number, undefined.
One approach can be var a = [m][n]
The following example defines a two-dimensional array named activities:
let activities = [
['Work', 9],
['Eat', 1],
['Commute', 2],
['Play Game', 1],
['Sleep', 7]
];
In the activities array, the first dimension represents the activity and the second one shows the number of hours spent per day for each.
To show the activities array in the console, you use the console.table() method as follows:
console.table(activities);
The following illustrates the output:
┌─────────┬─────────────┬───┐ │ (index) │ 0 │ 1 │ ├─────────┼─────────────┼───┤ │ 0 │ 'Work' │ 9 │ │ 1 │ 'Eat' │ 1 │ │ 2 │ 'Commute' │ 2 │ │ 3 │ 'Play Game' │ 1 │ │ 4 │ 'Sleep' │ 7 │ └─────────┴─────────────┴───┘
Note that the (index) column is for the illustration that indicates the indices of the inner array.
To access an element of the multidimensional array, you first use square brackets to access an element of the outer array that returns an inner array; and then use another square bracket to access the element of the inner array.
The following example returns the second element of the first inner array in the activities array above:
console.log(activities[0][1]); // 9
Adding elements to the JavaScript multidimensional array
You can use the Array methods such as push() and splice() to manipulate elements of a multidimensional array.
For example, to add a new element at the end of the multidimensional array, you use the push() method as follows:
activities.push(['Study',2]);
┌─────────┬─────────────┬───┐ │ (index) │ 0 │ 1 │ ├─────────┼─────────────┼───┤ │ 0 │ 'Work' │ 9 │ │ 1 │ 'Eat' │ 1 │ │ 2 │ 'Commute' │ 2 │ │ 3 │ 'Play Game' │ 1 │ │ 4 │ 'Sleep' │ 7 │ │ 5 │ 'Study' │ 2 │ └─────────┴─────────────┴───┘
To insert an element in the middle of the array, you use the splice() method. The following inserts an element in the second position of the activities array:
activities.splice(1, 0, ['Programming', 2]);
┌─────────┬───────────────┬───┐ │ (index) │ 0 │ 1 │ ├─────────┼───────────────┼───┤ │ 0 │ 'Work' │ 9 │ │ 1 │ 'Programming' │ 2 │ │ 2 │ 'Eat' │ 1 │ │ 3 │ 'Commute' │ 2 │ │ 4 │ 'Play Game' │ 1 │ │ 5 │ 'Sleep' │ 7 │ │ 6 │ 'Study' │ 2 │ └─────────┴───────────────┴───┘
This example calculates the percentage of the hours spent on each activity and appends the percentage to the inner array.
activities.forEach(activity => {
let percentage = ((activity[1] / 24) * 100).toFixed();
activity[2] = percentage + '%';
});
┌─────────┬───────────────┬───┬───────┐ │ (index) │ 0 │ 1 │ 2 │ ├─────────┼───────────────┼───┼───────┤ │ 0 │ 'Work' │ 9 │ '38%' │ │ 1 │ 'Programming' │ 2 │ '8%' │ │ 2 │ 'Eat' │ 1 │ '4%' │ │ 3 │ 'Commute' │ 2 │ '8%' │ │ 4 │ 'Play Game' │ 1 │ '4%' │ │ 5 │ 'Sleep' │ 7 │ '29%' │ │ 6 │ 'Study' │ 2 │ '8%' │ └─────────┴───────────────┴───┴───────┘
Removing elements from the JavaScript multidimensional array
To remove an element from an array, you use the pop() or splice() method.
For example, the following statement removes the last element of the activities array:
activities.pop();
┌─────────┬───────────────┬───┬───────┐ │ (index) │ 0 │ 1 │ 2 │ ├─────────┼───────────────┼───┼───────┤ │ 0 │ 'Work' │ 9 │ '38%' │ │ 1 │ 'Programming' │ 2 │ '8%' │ │ 2 │ 'Eat' │ 1 │ '4%' │ │ 3 │ 'Commute' │ 2 │ '8%' │ │ 4 │ 'Play Game' │ 1 │ '4%' │ │ 5 │ 'Sleep' │ 7 │ '29%' │ └─────────┴───────────────┴───┴───────┘
Similarly, you can remove the elements from the inner array of the multidimensional array by using the pop() method. The following example removes the percentage element from the inner arrays of the activities array.
activities.forEach((activity) => {
activity.pop(2);
});
┌─────────┬───────────────┬───┐ │ (index) │ 0 │ 1 │ ├─────────┼───────────────┼───┤ │ 0 │ 'Work' │ 9 │ │ 1 │ 'Programming' │ 2 │ │ 2 │ 'Eat' │ 1 │ │ 3 │ 'Commute' │ 2 │ │ 4 │ 'Play Game' │ 1 │ │ 5 │ 'Sleep' │ 7 │ └─────────┴───────────────┴───┘
Iterating over elements of the JavaScript multidimensional array
To iterate a multidimensional array, you use a nested for loop as in the following example.
// loop the outer array
for (let i = 0; i < activities.length; i++) {
// get the size of the inner array
var innerArrayLength = activities[i].length;
// loop the inner array
for (let j = 0; j < innerArrayLength; j++) {
console.log('[' + i + ',' + j + '] = ' + activities[i][j]);
}
}
The first loop iterates over the elements of the outer array and the nested loop iterates over elements of the inner array.
The following shows the output of the script in the console:
[0,0] = Work [0,1] = 9 [1,0] = Eat [1,1] = 1 [2,0] = Commute [2,1] = 2 [3,0] = Play Game [3,1] = 1 [4,0] = Sleep [4,1] = 7 [5,0] = Study [5,1] = 2
Or you can use the forEach() method twice:
activities.forEach((activity) => {
activity.forEach((data) => {
console.log(data);
});
});
Work 9 Eat 1 Commute 2 Play Game 1 Sleep 7 Study 2
I found below is the simplest way:
var array1 = [[]];
array1[0][100] = 5;
alert(array1[0][100]);
alert(array1.length);
alert(array1[0].length);array1[1][100] = 666; throws Uncaught TypeError: Cannot set property '100' of undefined –
Mckinney array1[1][100] = 666;, you need to do this array1[1] = [];. –
Pachton My approach is very similar to @Bineesh answer but with a more general approach.
You can declare the double array as follows:
var myDoubleArray = [[]];
And the storing and accessing the contents in the following manner:
var testArray1 = [9,8]
var testArray2 = [3,5,7,9,10]
var testArray3 = {"test":123}
var index = 0;
myDoubleArray[index++] = testArray1;
myDoubleArray[index++] = testArray2;
myDoubleArray[index++] = testArray3;
console.log(myDoubleArray[0],myDoubleArray[1][3], myDoubleArray[2]['test'],)
This will print the expected output
[ 9, 8 ] 9 123
var playList = [
['I Did It My Way', 'Frank Sinatra'],
['Respect', 'Aretha Franklin'],
['Imagine', 'John Lennon'],
['Born to Run', 'Bruce Springsteen'],
['Louie Louie', 'The Kingsmen'],
['Maybellene', 'Chuck Berry']
];
function print(message) {
document.write(message);
}
function printSongs( songs ) {
var listHTML;
listHTML = '<ol>';
for ( var i = 0; i < songs.length; i += 1) {
listHTML += '<li>' + songs[i][0] + ' by ' + songs[i][1] + '</li>';
}
listHTML += '</ol>';
print(listHTML);
}
printSongs(playList);Below one, creates a 5x5 matrix and fill them with null
var md = [];
for(var i=0; i<5; i++) {
md.push(new Array(5).fill(null));
}
console.log(md);md[1][0] = 3 and all the rest of elements are updated too –
Blotchy ES6+, ES2015+ can do this in even simpler way
Creating 3 x 2 Array filled with true
[...Array(3)].map(item => Array(2).fill(true))
I had to make a flexible array function to add "records" to it as i needed and to be able to update them and do whatever calculations e needed before i sent it to a database for further processing. Here's the code, hope it helps :).
function Add2List(clmn1, clmn2, clmn3) {
aColumns.push(clmn1,clmn2,clmn3); // Creates array with "record"
aLine.splice(aPos, 0,aColumns); // Inserts new "record" at position aPos in main array
aColumns = []; // Resets temporary array
aPos++ // Increments position not to overlap previous "records"
}
Feel free to optimize and / or point out any bugs :)
aLine.push([clmn1, clmn2, clmn3]); ? –
Pentapody Javascript does not support two dimensional arrays, instead we store an array inside another array and fetch the data from that array depending on what position of that array you want to access. Remember array numeration starts at ZERO.
Code Example:
/* Two dimensional array that's 5 x 5
C0 C1 C2 C3 C4
R0[1][1][1][1][1]
R1[1][1][1][1][1]
R2[1][1][1][1][1]
R3[1][1][1][1][1]
R4[1][1][1][1][1]
*/
var row0 = [1,1,1,1,1],
row1 = [1,1,1,1,1],
row2 = [1,1,1,1,1],
row3 = [1,1,1,1,1],
row4 = [1,1,1,1,1];
var table = [row0,row1,row2,row3,row4];
console.log(table[0][0]); // Get the first item in the array
Here's a quick way I've found to make a two dimensional array.
function createArray(x, y) {
return Array.apply(null, Array(x)).map(e => Array(y));
}
You can easily turn this function into an ES5 function as well.
function createArray(x, y) {
return Array.apply(null, Array(x)).map(function(e) {
return Array(y);
});
}
Why this works: the new Array(n) constructor creates an object with a prototype of Array.prototype and then assigns the object's length, resulting in an unpopulated array. Due to its lack of actual members we can't run the Array.prototype.map function on it.
However, when you provide more than one argument to the constructor, such as when you do Array(1, 2, 3, 4), the constructor will use the arguments object to instantiate and populate an Array object correctly.
For this reason, we can use Array.apply(null, Array(x)), because the apply function will spread the arguments into the constructor. For clarification, doing Array.apply(null, Array(3)) is equivalent to doing Array(null, null, null).
Now that we've created an actual populated array, all we need to do is call map and create the second layer (y).
One liner to create a m*n 2 dimensional array filled with 0.
new Array(m).fill(new Array(n).fill(0));
a = Array(m).fill(0).map(() => Array(n).fill(0)) ? map will untie reference and create unique array per slot. –
Mylo There is another solution, that does not force you to pre-define the size of the 2d array, and that is very concise.
var table = {}
table[[1,2]] = 3 // Notice the double [[ and ]]
console.log(table[[1,2]]) // -> 3This works because, [1,2] is transformed into a string, that is used as a string key for the table object.
var table = new Proxy({}, {get:(t,n)=>n in t ? t[n] : 42}); –
Pentapody You could allocate an array of rows, where each row is an array of the same length. Or you could allocate a one-dimensional array with rows*columns elements and define methods to map row/column coordinates to element indices.
Whichever implementation you pick, if you wrap it in an object you can define the accessor methods in a prototype to make the API easy to use.
I found that this code works for me:
var map = [
[]
];
mapWidth = 50;
mapHeight = 50;
fillEmptyMap(map, mapWidth, mapHeight);
...
function fillEmptyMap(array, width, height) {
for (var x = 0; x < width; x++) {
array[x] = [];
for (var y = 0; y < height; y++) {
array[x][y] = [0];
}
}
}
A simplified example:
var blocks = [];
blocks[0] = [];
blocks[0][0] = 7;
I'm not a fan of the ES6 solutions using .fill(). Some may work but the extra hoops to avoid the copy-by-reference problems make them non-intuitive.
My suggested ES6 approach is to fully leverage the spread operator for both outer and inner arrays. It's easier to reason about IMO.
[...Array(3)].map(() => [...Array(4)])
If you need to set an initial value, then you chain on a .map() on the inner array creation:
[...Array(3)].map(() => [...Array(4)].map(() => 0))
Lastly, a type-safe TypeScript util function:
export const createMultiDimensionalArray = <T>(
n: number,
m: number,
initialVal?: T,
): T[][] => {
const matrix = [...Array(n)].map(() => [...Array(m)]);
return initialVal === undefined
? matrix
: matrix.map(r => r.map(() => initialVal));
};
Examples using it:
const a = createMultiDimensionalArray(1, 2);
a[1][2] = 3; // Works
const b = createMultiDimensionalArray(2, 3, false);
b[1][2] = true; // Works
b[1][2] = 3; // Error: Type '3' is not assignable to type 'boolean'.
use the global object Array and fill items with arrays:
let arr = new Array(5).fill([]);
or if the 2d array of known length:
let arr = new Array(5).fill(new Array(2));
I've made a modification of Matthew Crumley's answer for creating a multidimensional array function. I've added the dimensions of the array to be passed as array variable and there will be another variable - value, which will be used to set the values of the elements of the last arrays in the multidimensional array.
/*
* Function to create an n-dimensional array
*
* @param array dimensions
* @param any type value
*
* @return array array
*/
function createArray(dimensions, value) {
// Create new array
var array = new Array(dimensions[0] || 0);
var i = dimensions[0];
// If dimensions array's length is bigger than 1
// we start creating arrays in the array elements with recursions
// to achieve multidimensional array
if (dimensions.length > 1) {
// Remove the first value from the array
var args = Array.prototype.slice.call(dimensions, 1);
// For each index in the created array create a new array with recursion
while(i--) {
array[dimensions[0]-1 - i] = createArray(args, value);
}
// If there is only one element left in the dimensions array
// assign value to each of the new array's elements if value is set as param
} else {
if (typeof value !== 'undefined') {
while(i--) {
array[dimensions[0]-1 - i] = value;
}
}
}
return array;
}
createArray([]); // [] or new Array()
createArray([2], 'empty'); // ['empty', 'empty']
createArray([3, 2], 0); // [[0, 0],
// [0, 0],
// [0, 0]]
Recursive function to create a multi-dimensional array:
var makeArray = function (dims, arr) {
if (dims[1] === undefined) {
return new Array(dims[0]);
}
arr = new Array(dims[0]);
for (var i=0; i<dims[0]; i++) {
arr[i] = new Array(dims[1]);
arr[i] = makeArray(dims.slice(1), arr[i]);
}
return arr;
}
Build a 2x3x4x2 4D-Array:
var array = makeArray([2, 3, 4, 2]);
var items = [
["January 01", 42.5],
["February 01", 44.3],
["March 01", 28.7],
["April 01", 44.3],
["May 01", 22.9],
["June 01", 54.4],
["July 01", 69.3],
["August 01", 19.1],
["September 01", 82.5],
["October 01", 53.2],
["November 01", 75.9],
["December 01", 58.7]
];
alert(items[1][0]); // February 01
alert(items[5][1]); // 54.4
const arr = new Array(5).fill(new Array(5).fill(0));
console.log(arr);
You can also create a function to create a 2D array like this:
var myTable = [];
function createArray(myLength) {
myTable = new Array(myLength);
var cols, rows;
for (cols = 0; cols < myLength; cols++) {
myTable[cols] = new Array(myLength);
}
}
You can call it by using the following, which will give you a 10x10 2D array.
createArray(10);
You also can create a 3D array using this method.
nodejs + lodash version:
var _ = require("lodash");
var result = _.chunk(['a', 'b', 'c', 'd', 'e', 'f'], 2);
console.log(result);
console.log(result[2][0]);
The output:
[ [ 'a', 'b' ], [ 'c', 'd' ], [ 'e', 'f' ] ]
e
Array.from({length: rows}).map(e => new Array(columns));
My solution won't be the best one, But just giving my solutions to create user-defined multidimensional array.
This function accepting rows and columns,
function createArray(row,column) {
let arr = [];
for(var i=0; i<row; i++){
arr[i] = [Math.floor(Math.random() * (10))];
for(var j=0;j<column;j++){
arr[i][j]= [Math.floor(Math.random() * (20))];
}
}
return arr;
}
var arrVal = createArray(4, 5);
console.log(arrVal);
This constructs arrays of any dimension.
function makeArrayChildren(parent, firstDimension, ...dimensions) {
for (let i = 0; i < parent.length; i++) {
parent[i] = new Array(firstDimension);
if (dimensions.length != 0) {
makeArrayChildren(parent[i], ...dimensions);
}
}
}
function makeArray(firstDimension, ...dimensions) {
if (firstDimension == undefined) {
throw Exception("Too few dimensions");
}
let topArray = new Array(firstDimension);
if (dimensions.length != 0) makeArrayChildren(topArray, ...dimensions);
return topArray;
}
Here's another two functions I wanted to make, which I can use as a sanity check: a for each that executes on all the lowest level items in a multi dimensional array and a fill method.
Array.prototype.dimensionalFill = function (value) {
for (let i = 0; i < this.length; i++) {
const elem = this[i];
if (elem instanceof Array) {
elem.dimensionalFill(value);
} else {
this[i] = value;
}
}
};
/*Unlike forEach, this also loops over undefined values. */
Array.prototype.dimensionalForEach = function (callableFunc, thisArg) {
if (thisArg != undefined) {
return this.dimensionalForEach(callableFunc.bind(thisArg));
}
for (let i = 0; i < this.length; i++) {
const elem = this[i];
if (elem instanceof Array) {
elem.dimensionalForEach(callableFunc);
} else {
callableFunc(elem, i, this);
}
}
};
And here's a nice little sanity check that uses all the features. So at the very least, it can't be completely wrong.
let arr = makeArray(10, 10, 5, 4);
arr.dimensionalFill(2);
let sum = 0;
arr.dimensionalForEach((elem) => {
sum += elem;
});
console.log(`sum: ${sum} === ${10 * 10 * 5 * 4 * 2}`);
It bears mentioning that at this point, it would've been a far better practice to create an altogether new structure, but this was fun.
TL;DR To make a 2-dimensional array in JavaScript:
let grid = Array(NUMBER_ROWS).fill().map(_ => Array(NUMBER_COLUMNS).fill(0));
Explanation:
grid[iRow][iColumn]Array(NUMBER_ROWS) creates the barest of bones outer array. It has length but no elements. It is empty.Array(NUMBER_ROWS).fill() creates an array of undefined elements. This is a not the same as an empty array..fill() expects a parameter. But in JavaScript omitting a parameter is well behaved: if it doesn't have a default value, it passes undefined. From MDN: "In JavaScript, function parameters default to undefined.".map() would not convert any of the somethings -- the arrow function would never get called back..map() translates each undefined element from the outer array into an inner array..map() gets passed an argument but we ignore it. Here it is represented by _.undefined. What's ultimately stored in grid is the output of .map(), a new outer array that contains the inner arrays.Array(NUMBER_COLUMNS) creates an inner array, a row..fill(0) fills it with zeroes.Array() constructor does not need the new operator._ for unused parameters.Array.fill(). That leads to clones and madness. Here, each iteration of .map() calls the arrow function and creates a shiny new and distinct inner array.This method expands well to higher dimensions. Here is a 3-dimensional array:
If you are after 2D array for google charts, the best way to do it is
var finalData = [];
[["key",value], ["2013-8-5", 13.5], ["2013-7-29",19.7]...]
referring to Not a valid 2d array google chart
var _field = (function()
{
var array = [];
for(var y = 0; y != 3; y++) { array[y] = new Array(5); }
return array;
})();
// var item = _field[2][4];
What happens if the size of array is unknown? Or array should be dynamically created and populated? Alternative solution which worked for me is to use class with static 2d array variable which in case of non-existence of index in array will initiate it:
function _a(x,y,val){
// return depending on parameters
switch(arguments.length){
case 0: return _a.a;
case 1: return _a.a[x];
case 2: return _a.a[x][y];
}
// declare array if wasn't declared yet
if(typeof _a.a[x] == 'undefined')
_a.a[x] = [];
_a.a[x][y] = val;
}
// declare static empty variable
_a.a = [];
The syntax will be:
_a(1,1,2); // populates [1][1] with value 2
_a(1,1); // 2 or alternative syntax _a.a[1][1]
_a(1); // [undefined × 1, 2]
_a.a; // [undefined × 1, Array[2]]
_a.a.length
An awesome repository here .
api : masfufa.js
sample : masfufa.html
Two Examples will be enough to understand this library :
/* | 1 , 2 , 3 |
* MX= | 4 , 5 , 6 | Dimensions= 3 x 3
* | 7 , 8 , 9 |
*/
jsdk.getAPI('my');
var A=[1, 2, 3, 4, 5, 6, 7, 8, 9];
var MX=myAPI.getInstance('masfufa',{data:A,dim:'3x3'});
then :
MX.get[0][0] // -> 1 (first)
MX.get[2][2] // ->9 (last)
/* | 1 , 9 , 3 , 4 |
* MXB= | 4 , 5 , 6 , 2 | Dimensions= 2 x 4
*
*/
var B=[1 , 9 , 3 , 4 , 4 , 5 , 6 , 2];
var MXB=myAPI.getInstance('masfufa',{data:B,dim:'2x4'});
then :
MXB.get[0][0] // -> 1 (first)
MXB.get[1][3] // -> 2 (last)
MXB.get[1][2] // -> 6 (before last)
This is mentioned in a few of the comments, but using Array.fill() will help construct a 2-d array:
function create2dArr(x,y) {
var arr = [];
for(var i = 0; i < y; i++) {
arr.push(Array(x).fill(0));
}
return arr;
}
this will result in an array of length x, y times in the returned array.
This is my implementation of Multi-Dimension Array.
In this approach, I am creating a single dimension array
I have added a prototype function multi to Array object, Which can be used to create any dimension Array.
I have also added a prototype function index to Array object, Which can be used to get index in linear Array from multi-dimension indexes.
Creating a Array
//Equivalent to arr[I][J][K]..[] in C
var arr = new Array().multi(I,J,K,..);
Accessing array value at any index
//Equivalent in C arr[i][j][k];
var vaue = arr[arr.index(i,j,k)];
SNIPPET
/*
Storing array as single dimension
and access using Array.index(i,j,k,...)
*/
Array.prototype.multi = function(){
this.multi_size = arguments;
this.multi_len = 1
for(key in arguments) this.multi_len *= arguments[key];
for(var i=0;i<this.multi_len;i++) this.push(0);
return this;
}
Array.prototype.index = function(){
var _size = this.multi_len;
var temp = 1;
var index = 0;
for(key in arguments) {
temp*=this.multi_size[key];
index+=(arguments[key]*(_size/temp))
}
return index;
}
// Now you can use the multi dimension array
// A 3x3 2D Matrix
var arr2d = new Array().multi(3,3); // A 2D Array
arr2d[arr2d.index(1,1,1)] = 5;
console.log(arr2d[arr2d.index(1,1,1)]);
// A 3x3x3 3D Matrix
var arr3d = new Array().multi(3,3,3); // a 3D Array
arr3d[arr3d.index(1,1,1)] = 5;
console.log(arr3d[arr3d.index(1,1,1)]);
// A 4x3x3 4D Matrix
var arr4d = new Array().multi(4,3,3,3); // a 4D Array
arr4d[arr4d.index(4,0,0,1)] = 5;
console.log(arr4d[arr4d.index(4,0,0,1)]);If all you want is a 4x4 matrix have a look at DOMMatrix, it is easy to use I can say,
let m = new DOMMatrix();
// m.m11, m.m12, m.m13, m.m14, ..., m.m41, m.m42, m.m43, m.m44
Initially brought for different reasons, it is not available on node.js and only limited to 4x4.
Also you can consider using an auto-vivification object instead arrays for JS, have a look at my answer here but brought here also for more convince:
var tree = () => new Proxy({}, { get: (target, name) => name in target ? target[name] : target[name] = tree() });
var t = tree();
t[0][2][3] = 4;
console.log(t[0][2][3]);
It uses new JS and acts not correctly when you iterate through it so be careful with it.
Also have a look at this if you need a flexible multi-dimension array generator.
Creates n dimensional matrix array for Java Script, filling with initial default of value 0.
function arr (arg, def = 0){
if (arg.length > 2){
return Array(arg[0]).fill().map(()=>arr(arg.slice(1)));
} else {
return Array(arg[0]).fill().map(()=>Array(arg[1]).fill(def));
}
}
// Simple Usage of 4 dimensions
var s = arr([3,8,4,6])
// Use null default value with 2 dimensions
var k = arr([5,6] , null)
© 2022 - 2024 — McMap. All rights reserved.
var arr2D = new Array(5).fill(new Array(3));besides if you don't want the cells to be "undefined" you can do likevar arr2D = new Array(5).fill(new Array(3).fill("hey"));– Quatrainvar arr2D = new Array(5).fill(new Array(3));, each element of Array(5) will point to the same Array(3). So it's best to use a for loop to dynamically populate sub arrays. – Isadoraa = Array(5).fill(0).map(x => Array(10).fill(0))– Recusancyvar arr2D = new Array(5).fill(new Array(3));doesn't properly create a 2d array? – Dayenew Array(3)call, since that is executed to create a new array, then that array is passed into the function to populate the one that you are filling... – Isadorafilldoesn't callnew Array(3)for each index of the array being filled, since it's not a lambda expression or anything, such as Longfei Wu's comment above, which initially fills the array with 0's, then uses the map function with a lambda to fill each element with a new array. The fill function simply fills the array with exactly what you tell it to. Does that make sense? For more info on themapfunction, see: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – IsadoraIf the new question is a better question or has better answers, then vote to close the old one as a duplicate of the new one.– Hyponitritelet AA = Array.from({ length: 2 }, () => new Array(3).fill(0));– Hiltonhilum