Concatenate Arrays -how to concat two dimensional arrays in javascript? - javascript

I have the following two arrays in JavaScript:
var array1=[[6, 12, 18],[7, 13, 19],[6, 12, 18],[7, 13, 19],[6, 12, 18],[6, 12, 18]];
var array2=[0,1,2,3,4,5];
How to concat the above arrays such that each element of array2 gets inserted at the end of each array1.
The result should be such that
var merge array=[[0, 6, 12, 18],[1, 7, 13, 19],[2, 6, 12, 18],[3, 7, 13, 19],[4, 6, 12, 18],[5, 6, 12, 18]]

var array1=[[6, 12, 18],[7, 13, 19],[6, 12, 18],[7, 13, 19],[6, 12, 18],[6, 12, 18]];
var array2=[0,1,2,3,4,5];
var merged_array = array1.map(function (value, index) {
value.unshift(array2[index]);
return value;
});
alert(JSON.stringify(merged_array));

var array1=[[6, 12, 18],[7, 13, 19],[6, 12, 18],[7, 13, 19],[6, 12, 18],[6, 12, 18]];
var array2=[0,1,2,3,4,5];
$.each(array1,function(index,val){
val.unshift(array2[index]);
});

Something like this should do it. Note this depends on your arrays being of the same length.
for (var i = 0; i < array2.length; i++)
{
array1[i].unshift(array2[i]);
}

Related

Mutating elements in an array in Javascript

Ok so I want to subtract 9 to numbers(elements in an array) over 9:
finalCredDigits = [10, 8, 18, 9, 16, 6, 16, 5, 14, 3, 14, 6, 10, 5, 8]
Thats what I tried
finalCredDigits.forEach(arr =>{
if(arr > 9){
finalCredDigits.push(arr - 9);
}
});
Output = [10, 8, 18, 9, 16, 6, 16, 5, 14, 3, 14, 6, 10, 5, 8, 1, 9, 7, 7, 5, 5, 1]
I know its cuz the result is being pushed in the array but i want to mutate it and replace the answer with numbers over 9
If you want a similar but new array, you should use Array.map():
const finalCredDigits = [10, 8, 18, 9, 16, 6, 16, 5, 14, 3, 14, 6, 10, 5, 8];
const newFinalCredDigits = finalCredDigits.map(v => {
if (v > 9) {
return v - 9;
} else {
return v;
}
});
console.log(newFinalCredDigits.join());
console.log("Is new array?", newFinalCredDigits !== finalCredDigits);
If you want to mutate the array itself with Array.forEach(), you should use the callback's additional parameters:
const finalCredDigits = [10, 8, 18, 9, 16, 6, 16, 5, 14, 3, 14, 6, 10, 5, 8];
finalCredDigits.forEach((v, i, array) => {
if (v > 9) {
array[i] = v - 9;
}
});
console.log(finalCredDigits.join());
But functional programming usually implies preferring immutable over mutable states, so if your array is shared and we'd mutate it with Array.forEach(), it would be considered a code smell. Therefore I'd use a regular for-loop instead:
const finalCredDigits = [10, 8, 18, 9, 16, 6, 16, 5, 14, 3, 14, 6, 10, 5, 8];
{
const l = finalCredDigits.length;
for (let i = 0; i < l; ++i) {
if (finalCredDigits[i] > 9) finalCredDigits[i] -= 9;
}
}
console.log(finalCredDigits.join());
You need to assign to the array index to replace the element, not push a new element.
forEach() passes a second argument to the callback function, containing the current index. You can use this for the assignment.
const finalCredDigits = [10, 8, 18, 9, 16, 6, 16, 5, 14, 3, 14, 6, 10, 5, 8];
finalCredDigits.forEach((el, i) =>{
if(el > 9){
finalCredDigits[i] = el - 9;
}
});
console.log(finalCredDigits);
Try this
let finalCredDigits = [10, 8, 18, 9, 16, 6, 16, 5, 14, 3, 14, 6, 10, 5, 8]
finalCredDigits = finalCredDigits.map(number => {
if (number > 9) {
return number - 9
}
return number
})
console.log(finalCredDigits)

How to remove last element from every row of a matrix in javascript

I am trying to remove the last element from every row of a matrix in javascript. I am trying to use the "map" function but I am not successful.
Here is my code:
var matrixWithExtraInfo = [
[1, 2, 3, 4, "dog"],
[5, 6, 7, 8, "dog"],
[9, 10, 11, 12, "dog"],
[13, 14, 15, 16, "dog"],
[17, 18, 19, 20, "dog"]
];
var conciseMatrix = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
[13, 14, 15, 16],
[17, 18, 19, 20]
]
var conciseMatrix = matrixWithExtraInfo.map(function(index) {
console.log(index)
matrixWithExtraInfo[index].pop();
return matrixWithExtraInfo[index];
});
console.log(matrixWithExtraInfo);
I get
TypeError: Cannot read property 'pop' of undefined
The first argument to .map is the item you're iterating over, not the index.
Since each item here is an array, you can either .pop the array (which will mutate the existing array), or .slice the array (which will not mutate the existing array).
var matrixWithExtraInfo = [
[1,2,3,4,"dog"],
[5,6,7,8,"dog"],
[9,10,11,12,"dog"],
[13,14,15,16,"dog"],
[17,18,19,20,"dog"]
];
var conciseMatrix = [
[1,2,3,4],
[5,6,7,8],
[9,10,11,12],
[13,14,15,16],
[17,18,19,20]
]
var conciseMatrix = matrixWithExtraInfo.map((arr) => {
arr.pop();
return arr;
});
console.log(matrixWithExtraInfo);
console.log(conciseMatrix);
(the above is weird - the structure you need is already in matrixWithExtraInfo, making another variable to hold it is confusing, but this is the closest to your original code)
var matrixWithExtraInfo = [
[1,2,3,4,"dog"],
[5,6,7,8,"dog"],
[9,10,11,12,"dog"],
[13,14,15,16,"dog"],
[17,18,19,20,"dog"]
];
var conciseMatrix = [
[1,2,3,4],
[5,6,7,8],
[9,10,11,12],
[13,14,15,16],
[17,18,19,20]
]
var conciseMatrix = matrixWithExtraInfo.map(arr => arr.slice(0, -1));
console.log(matrixWithExtraInfo);
console.log(conciseMatrix);
If you want to mutate the existing array, an easy way is to use Array.forEach() to apply Array.pop() to each element:
var matrixWithExtraInfo = [
[1, 2, 3, 4, "dog"],
[5, 6, 7, 8, "dog"],
[9, 10, 11, 12, "dog"],
[13, 14, 15, 16, "dog"],
[17, 18, 19, 20, "dog"]
];
matrixWithExtraInfo.forEach(arr => arr.pop());
console.log(matrixWithExtraInfo);
Otherwise, just use Array.slice():
var matrixWithExtraInfo = [
[1, 2, 3, 4, "dog"],
[5, 6, 7, 8, "dog"],
[9, 10, 11, 12, "dog"],
[13, 14, 15, 16, "dog"],
[17, 18, 19, 20, "dog"]
];
var conciseMatrix = matrixWithExtraInfo.map(arr => arr.slice(0, -1));
console.log(conciseMatrix);
Map will return the element so by iterating all rows we just pop the element which will remove the last element from the each row. As we need a new matrix in different array we should use slice(not pop/splice) which will return the elements in new array and not modifying original matrix.
var matrixWithExtraInfo = [
[1,2,3,4,"dog"],
[5,6,7,8,"dog"],
[9,10,11,12,"dog"],
[13,14,15,16,"dog"],
[17,18,19,20,"dog"]
];
var conciseMatrix = [
[1,2,3,4],
[5,6,7,8],
[9,10,11,12],
[13,14,15,16],
[17,18,19,20]
]
var conciseMatrix = matrixWithExtraInfo.map(row => row.slice(0, row.length-1));
console.log(matrixWithExtraInfo);
console.log(conciseMatrix);
Just adding _, in map function in your code should fix. function(_,index)
var matrixWithExtraInfo = [
[1, 2, 3, 4, "dog"],
[5, 6, 7, 8, "dog"],
[9, 10, 11, 12, "dog"],
[13, 14, 15, 16, "dog"],
[17, 18, 19, 20, "dog"]
];
var conciseMatrix = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
[13, 14, 15, 16],
[17, 18, 19, 20]
]
var conciseMatrix = matrixWithExtraInfo.map(function(_,index) {
console.log(index)
matrixWithExtraInfo[index].pop();
return matrixWithExtraInfo[index];
});
console.log(matrixWithExtraInfo);

Restructure one dimensional array into variable length two dimension array

I am trying to convert a one dimensional array into a two dimensional array where the length of the rows are different depending on the maximum number of columns which is supplied as an argument. I basically want to include every nth index till the end of array is reached or max number of columns are done whatever happens earlier. So for the following input:
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
19, 20]
columns = 7
I want the following output:
[1, 4, 7, 10, 13, 16, 19]
[2, 5, 8, 11, 14, 17, 20]
[3, 6, 9, 12, 15, 18]
I have tried the following code but it only works for few values:
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
function getOutput(arr, columns) {
var rows = Math.ceil(arr.length / columns);
var res = [];
for (var i = 0; i < rows; i++) {
tmp = [];
for (var j = 0, index = i; j < columns; j++) {
if (index < arr.length)
tmp.push(arr[index]);
index += rows;
}
res.push(tmp);
}
return res;
}
console.log(getOutput(array, 7))
JSFiddle available here: https://jsfiddle.net/varunsharma38/fwfz4veo/4/
I do not understand what I am missing. Although, I would not mind using some libraries, I would prefer a vanilla JS based solution.
Thanks in advance!!
Here is another solution using array#reduce.
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
columns = 7,
result = arr.reduce((r,v,i,a) => {
var index = i% (Math.ceil(a.length/columns));
r[index] = r[index] || [];
r[index].push(v);
return r;
},[]);
console.log(result);

jquery multidimensional array shuffle random

I want to minimize my code from:
myArrayA = [1, 2, 3, 4, 5];
fisherYates(myArrayA);
myArrayB = [6, 7, 8, 9, 10];
fisherYates(myArrayB);
myArrayC = [11, 12, 13, 14, 15];
fisherYates(myArrayC);
myArrayD = [16, 17, 18, 19, 20];
fisherYates(myArrayD);
myArrayE = [21, 22, 23, 24, 25];
fisherYates(myArrayE);
To:
var multArr = [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [16, 17, 18, 19, 20], [21, 22, 23, 24, 25]];
fisherYates(multArr);
The output I want is like this:
[4,2,3,5,1],[7,10,6,9,8],[11,15,12,14,13],[18,17,16,20,19],[22,21,25,23,24]
I tried this code:
http://jsfiddle.net/arrow/yFn8U/
function fisherYates(myArray) {
var i = myArray.length, j, tempi, tempj;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
tempi = myArray[i];
tempj = myArray[j];
myArray[i] = tempj;
myArray[j] = tempi;
}
}
var multArr = [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [16, 17, 18, 19, 20], [21, 22, 23, 24, 25]];
fisherYates(multArr);
But my code only randomizes the order of the chunks not the values in each chunk.
The output I want is like this:
[4,2,3,5,1],[7,10,6,9,8],[11,15,12,14,13],[18,17,16,20,19],[22,21,25,23,24]
I want each chunk inside the array to be in the same order but each chunk must be randomized.
Is there a way to do this with jQuery?
I also wonder how to get values from the shuffled/randomized array?
At the moment I get the values like this:
myArrayA[i]
myArrayB[i]
myArrayC[i]
myArrayD[i]
myArrayE[i]
I would guess I will get them with something like:
multArr [[0][i]];
multArr [[1][i]];
multArr [[2][i]];
multArr [[3][i]];
multArr [[4][i]];
Finally I wonder if minimizing the code will give better performance?
If you simply want to run an operation over all the elements in an array, then you should use map or forEach. I'm sure jquery provides shims for these methods in older browsers. So if we assume you're using your original fisherYates function unaltered, we might have something like this:
var multArr = [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [16, 17, 18, 19, 20], [21, 22, 23, 24, 25]];
multArr.forEach(fisherYates);
On accessing the elements, you're almost right, but you have one set too many of brackets :
multArr[1]; // == [6, 7, 8, 9, 10]
multArr[1][3]; // == 9
I wouldn't speculate about the performance, if you're really worried you should put together a jsperf test case.
All you need is jQuery's .each() method, like so:
$.each(multArr, function(i) { fisherYates(this) });
See console on this working example
Fiddle Code
function fisherYates(myArray) {
var i = myArray.length, j, tempi, tempj;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
tempi = myArray[i];
tempj = myArray[j];
myArray[i] = tempj;
myArray[j] = tempi;
}
}
$(function() {
$("button").on("click", function(e) {
multArr = [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [16, 17, 18, 19, 20], [21, 22, 23, 24, 25]];
$.each(multArr, function(i) { fisherYates(this) });
console.log(multArr)
})
})
Check out my code here. Basically just looped over the elements of the multidimensional array and run the fisherYates on them like so:
function fisherYates(myArray) {
for(var i = 0; i< myArray.length; i++) {
k = myArray[i].length;
while(k--){
j = Math.floor(Math.random() * (myArray.length - 1));
tempk = myArray[i][k];
tempj = myArray[i][j];
myArray[i][k] = tempj;
myArray[i][j] = tempk;
}
}
}
Now if you wanted to do this for an n-dimensional array you're going to have to do it recursively, which would be fun, but I think that is more than you were asking for. If not I can update it later.

JavaScript/jQuery - Array list does not go across whole board

So, I'm working with A* Pathfinding. I got it working however it doesn't work all the way. It works all the way until the last 4 columns to the right. Weird.
It works all the way until X is 10 or less. Which is weird because Y's max is 10. Maybe it's together? I don't know. But my map is 15 columns by 10 rows. Here is an online example: http://mystikrpg.com/html5/
An interesting error I get is Uncaught TypeError: Cannot read property '8' of undefined.
The 8 is the Y of where you clicked. If you click a the very first gray block on the right-side (since row 0 is walled off). Then that 8 would say 1.
Here's the part where it lays out the nodes.
// Creates a Graph class used in the astar search algorithm.
function Graph(grid) {
var nodes = [];
var row, rowLength, len = grid.length;
for (x = 0; x <= 10; x++) {
row = grid[x];
nodes[x] = new Array(15);
for (y = 0; y <= 15; y++) {
nodes[x][y] = new GraphNode(x, y, row[y]);
}
}
this.input = grid;
this.nodes = nodes;
}
However, you can download it offline and put it on localhost, if you'd like here http://mystikrpg.com/html5/Ethios.rar
Anyway... something else I found:
My loadMap() function returns an array of 11 elements.
And when x_block is 13 (clicking on X axis of map) for example, graph.nodes[x_block][y_block] returns undefined.
Here is my loadMap() function:
function loadMap(map) {
if (map == 1) {
return [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1],
[1, 13, 1, 13, 13, 13, 13, 13, 1, 1, 1, 1, 1, 13, 13, 1],
[1, 13, 1, 1, 13, 1, 1, 13, 1, 13, 13, 1, 13, 13, 13, 1],
[1, 13, 13, 1, 1, 1, 13, 13, 1, 13, 13, 1, 1, 1, 13, 1],
[1, 13, 13, 1, 13, 1, 13, 13, 13, 13, 13, 1, 13, 13, 13, 1],
[1, 13, 13, 13, 13, 1, 13, 13, 13, 13, 13, 1, 13, 13, 13, 1],
[1, 13, 1, 13, 13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 1],
[1, 13, 1, 1, 1, 1, 13, 13, 13, 13, 1, 13, 13, 13, 13, 1],
[1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]];
}
}
As you can see, it's 15 columns across and 10 rows down.
What am I doing wrong?
UPDATE NEW
for (y = 0; y <= 10; y++) {
row = grid[y];
nodes[y] = new Array(15);
for (x = 0; x <= 15; x++) {
console.log("X: " + x + " Y: " + y);
//console.log("Row: " + row[x]);
nodes[x][y] = new GraphNode(x, y, row[x]);
}
}
You have your x and y nomenclature the wrong way around.
The x axis should be the second dimension in your table, e.g. nodes[y][x]:
for (y = 0; y <= 10; x++) {
row = grid[y];
nodes[y] = [];
for (x = 0; x <= 15; x++) {
nodes[y][x] = new GraphNode(x, y, row[y]);
}
}

Categories