I want to create such array in loop
dataset: [
{
x: 0,
y: 0,
},
{
x: 1,
y: 0.993,
}
]
But this way is not correct.
var array = new Array(10);
for (var i = 0; i < 5; ++i) {
array[i].x = 1;
array[i].y = 2;
}
How I can initialize in correct way?
The comments made by SLaks and squint are correct, so this answer is more of an explanation of why your code isn't working like you think it should, and an example of what you could do instead.
You created an array with room to hold 10 things but you didn't specify what those things were and so nothing is contained in the array.
var array = new Array(10);
you can visualize your array like this:
array = [undefined, undefined, undefined, undefined,...
The array you created was just a container for 10 things not yet defined. When you tried to assign the 'x' and 'y' properties of the array elements, you were were trying to operate on something that did not exist. To get what you want, I suggest creating an object that has the properties you want, with initial values, and then use your loop to add the number of elements you want.
var array = [];
var arrayObject = {x:0,y:0};
for(i=0; i < 10; i++){
array.push(arrayObject);
}
You can do this job in one assignment line as follows;
var dataSet = (new Array(10)).fill("initial y value").reduce((p,c,i) => p.concat({x:i,y:c}),[]);
console.log(dataSet);
I just couldn't figure what y values you would like to have so inserted the initial values of the array. Change them the way you like later. I hope it helps.
Replace the new Array(10) with
var array = Array.apply( {}, { length: 10 } ).map( function() { return {} });
new Array(10) is creating an array like
[ undefined, undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined]
So you are trying to assign x on undefined
If you tried
new Array(10).map(function(){ return {}; }) it will not work either.
An es6 way to do it would be
Array.from(new Array(10), () => { return { x: 1, y: 2 }; })
In JavaScript the Array acts different than in static-typed languages, so there's no need to initialize it with fixed length.
For ECMAScript 6 specification and later:
var points = [].fill.call({ length: 5 }, {x: 1, y: 1});
It produces
[{x: 1, y: 1},
{x: 1, y: 1},
{x: 1, y: 1},
{x: 1, y: 1},
{x: 1, y: 1}]
To ensure old browsers' support use for loop:
var points = [{x: 1, y: 1}];
for (var i = 0; i < 5; i++) points.push(points[0]);
Related
I have the variable G.playerStatsDifference defined as an array of objects:
playerStatsDifference: [{
carpenter: 0,
wood: 0,
gunman: 0,
gunpowder: 0,
merchant: 0,
gold: 0,
fleet: 0,
flagship: 0,
}, {
carpenter: 0,
wood: 0,
gunman: 0,
gunpowder: 0,
merchant: 0,
gold: 0,
fleet: 0,
flagship: 0,
}]
The point of this variable is to calculate the difference between G.playerStats which frequently changes.
My function to calculate the difference is:
const oldPlayerStats = JSON.parse(JSON.stringify(G.playerStats));
statsDifference(G, oldPlayerStats);
for (let p = 0; p < 2; p++) {
for (let s = 0; s < 8; s++) {
Object.values(G.playerStatsDifference[p])[s] = Object.values(G.playerStats[p])[s] - Object.values(oldPlayerStats[p])[s];
}
}
The expected output would be to have playerStatsDifference
When running some tests I did some console logging and it gave me the correct calculations, but the G.playerStatsDiffence would not update.
Here is some of that testing, with the calulations being correct:
console.log("Current wood is " + Object.values(G.playerStats[0])[1]); //Current wood is 5
console.log("Old wood is " + Object.values(oldPlayerStats[0])[1]); //Old wood is 10
console.log(Object.values(G.playerStats[0])[1] - Object.values(oldPlayerStats[0])[1]); //-5
I thought maybe I was doing something wrong with the loops so I tried the following afterwards:
Object.values(G.playerStatsDifference[0])[1] = Object.values(G.playerStats[0])[1] - Object.values(oldPlayerStats[0])[1];
However this did not work either. Having said that, the following does work:
G.playerStatsDifference[0].wood = Object.values(G.playerStats[0])[1] - Object.values(oldPlayerStats[0])[1];
So it seems like I have some issue with the Object.values on G.playerStatsDifference. Any idea on why that is and how I can run that through the loop?
=====
EDIT: As those in the comments have pointed out my question is a bit confusing so I will try to clear it up here..
The G.playerStatsDifference value is supposed to track the difference between the previous value of G.playerStats and the current value of G.playerStats.
To do this I am setting the value of oldPlayerStats to equal G.playerStats and then updating G.playerStats to its new value.
I then need to run through the array of objects and subtract the value of G.playerStats from oldPlayerStats. This will produce the value of G.playerStatsDifference
That is what the loop is for, to go through each object key and do the calculation.
Hope this provides some clarity. Sorry for the poorly worded question.
const diffBetweenObjectValues = (a, b) => {
return Object.entries(a).reduce((result, [aKey, aVal]) => {
result[aKey] = aVal - (b[aKey] ?? 0);
return result;
}, {});
}
const stats = { a: 1, b: 2 };
const updatedStats = { a: 1, b: 1 };
// Initial player stats are { a: 1, b: 2 }
const player = { stats: stats, diff: {} };
// Set the diff, value is { a: 0, b: 1 }
player.diff = diffBetweenObjectValues(player.stats, updatedStats);
// Actually update the stats, value is { a: 1, b: 1 }
player.stats = updatedStats;
Note that if a key is present in b but not a it's ignored. Also note that this only works properly if all the property values are numeric.
You can put the state transition in a function and just run it when you need to update the stats (like every tick of the game loop).
Response to comment
Ok, lets add another helper function
const zip = (a, b) => a.map((x, i) => [x, b[i]]);
const players = [...]; // array of players
const statUpdates = [...]; // array of stat updates
zip(players, statUpdates).forEach(([player, stats]) => {
player.diff = diffBetweenObjectValues(player.stats, stats);
player.stats = stats;
});
Zip combines the array of players and the array of stat updates in to pairs, then iterate over them with forEach, destructure the bits back out, and run the update. You can also just use a for loop, which is faster but harder to read and easier to get wrong (e.g. off-by-one errors). I would stick with the version until/unless your profiler tells you it's too slow.
Update 2
const currentStats = [{ a: 1, b: 2 }, {a: 3, b: 2 }];
const updatedStats = [{ a: 0, b: 1 }, {a: 4, b: 1 }];
const diffedStats = zip(currentStats, updatedStats).map(([current, updated]) => {
return diffBetweenObjectValues(current, updated);
});
// for testing purposes, create an object with some random stats
const randomPlayerStats = () => Object.fromEntries(
['carpenter','wood','gunman','gunpowder','merchant','gold','fleet','flagship']
.map(k=>[k,Math.random()*10|0]));
// array of the last player stats recorded for each player
let lastPlayerStats = [];
// create a new object from the existing object, subtracting each entry
// from the old object from the entry from the new object
// note: uses the ?? operator so that if there is no last object yet,
// the last object value will be treated as being zero
const difference = (playerStats, lastPlayerStats) => {
let r = Object.fromEntries(Object.entries(playerStats).map(([k,v])=>
[k, v-(lastPlayerStats?.[k]??0)]));
lastPlayerStats = playerStats;
return r;
};
// simulate 5 rounds of the game, with 2 players in the game
const playerCount = 2;
const simulatedRounds = 5;
for(let c=0;c<simulatedRounds;c++) {
let playerStats = [...Array(playerCount).keys()].map(i=>randomPlayerStats());
let playerStatsDifference = playerStats.map((s,i)=>
difference(s, lastPlayerStats[i]??{}));
console.log('playerStats:');
console.log(playerStats);
console.log('playerStatsDifference:');
console.log(playerStatsDifference);
}
I have an object in js: {x: 0, y: 0}, and I want to increment both x and y by one. Now, this isn't a big object, so I can just use placeholder.x and placeholder.y, not very hard. But if I wanted to add more things to the object, the code would get very long and repetitive, so is there a shorter way to apply functions or math to everything in an object?
You can use Object.keys to get an iterable Array of the Object's keys, then use that to loop each and perform the functions you desire:
const myObject = {x: 1, y: 1};
for (key of Object.keys(myObject)) {
myObject[key]++;
}
console.dir(myObject);
In production-grade code, you should check to ensure that the data you're attempting to modify is numerically-typed so you don't end up inadvertently attempting to increment a non-numeric value:
const myObject = {x: 1, y: 1};
for (key of Object.keys(myObject)) {
if (typeof myObject[key] === 'number') myObject[key]++;
}
console.dir(myObject);
You can loop on an object by using Object.keys():
const p1 = {
x: 0,
y: 0
}
function translateXYbyN(p, n) {
Object.keys(p).forEach((c) => p[c] = p[c] + n);
}
console.log(p1);
translateXYbyN(p1, 1);
console.log(p1);
Also, you can also provide a key map in order to manipulate only the wanted keys:
const p2 = {
x: 0,
y: 0,
name: "point"
}
function translateXYbyN(p, n, mask) {
Object.keys(p).forEach((c) => {
if(mask.includes(c))
p[c] = p[c] + n
});
}
console.log(p2);
translateXYbyN(p2, 1, ['x','y']);
console.log(p2);
you can make a function:
const incObj = o => { ++o.x; ++o.y }
const placeholder = {x: 1, y: 1}
incObj( placeholder )
console.log( placeholder )
So I hacked this code from somewhere else, but have an object variable to store x,y values in an array every time a hex is clicked, defined with two functions, one to add an element and one to remove the last element
var objMoves = {
length: 0,
addElem: function addElem(elem) {
// obj.length is automatically incremented
// every time an element is added.
[].push.call(this, elem);
},
removeElem: function removeElem(last) {
// this removes the last item in the array
[].splice.call(this,last, 1);
}
};
I call it like this:
objMoves.addElem({ x: hexX, y: hexY });
Result if I dump the objMoves into the console log is "{"0":{"x":2,"y":1},"length":1}"
However, what I really want is something like
objMoves.addElem({ x: hexX, y: hexY },stackID:"abcdef");
So the result would be something like
{stackId:"abcdef",moves:[{"x":2,"y":1},{"x":3,"y":4}]}
{stackId:"xyz",moves:[{"x":5,"y":2},{"x":6,"y":2},{"x":7,"y":2}]}
etc, where the inner array gets added to for a given stackID. I think I need to nest the objects?
push() is for arrays, not objects, so use the right data structure.
var objMoves = [];
// ...
data[0] = { "": "", "": "" };
data[1] = { ....};
// ...
var tempData = [];
for ( var index=0; index<data.length; index++ ) {
if ( data[index].objMoves ) {
tempData.push( data );
}
}
data = tempData;
or deal with it like it is an object. while Objects does not support push property, you can save it as well using the index as key.
It sounds like what you're looking for is something like this:
var objMoves = {
addElem: function(id, elem) {
var obj = this[id] || {
stackId: id,
moves: []
};
obj.moves.push(elem);
this[id] = obj;
},
removeElem: function(id, last) {
this[id].moves.splice(last, 1);
}
}
objMoves.addElem("abcdef", {x: 123, y: 456});
objMoves.addElem("xyz", {x: 1, y: 2});
objMoves.addElem("abcdef", {x: 100, y: 50});
console.log(objMoves);
The functions take a stack ID as a parameter, so they can use that as a key into the object to find the sub-object with that ID. The moves are stored in an array in that sub-object.
I was a little bit fascinated from the code, that you have taken from the MDN JavaScript reference site. It shows us how we could use an object as an array. And so I wrote some functions to do it.
Solution with all, what you need:
var objMoves =
{
// objMoves.length is automatically incremented every time an element is added
length: 0,
//add an object to new(with stackId) or given(by stackId) array element
addElem: function(object, stackId)
{
var index = this.getElemIndex(stackId);
if(index > -1)
this[index].moves.push(object);
else
[].push.call(this, {stackId: stackId, moves: [object]})
},
//remove the array element on lastElemIndex
removeElem: function(lastElemIndex)
{
[].splice.call(this, lastElemIndex, 1)
},
//remove the object on lastElemIndex from the array element with stackId
removeMovesElem: function(stackId, lastElemIndex)
{
var index = this.getElemIndex(stackId);
if(index > -1)
this[index].moves.splice(lastElemIndex, 1)
},
//get the array element index by stackId
getElemIndex: function(stackId)
{
for(var i = this.length; i--;)
if(this[i].stackId == stackId)
return i
return -1
}
};
//we check functions:
objMoves.addElem({x: 2, y: 1}, 'abcdef');
objMoves.addElem({x: 3, y: 4}, 'abcdef');
objMoves.addElem({x: 5, y: 2}, 'xyz');
objMoves.addElem({x: 6, y: 2}, 'xyz');
objMoves.addElem({x: 7, y: 2}, 'xyz');
console.log(JSON.stringify(objMoves, null, '\t'));
console.log('===========================');
var index = objMoves.getElemIndex('abcdef');
objMoves.removeElem(index);
console.log(JSON.stringify(objMoves, null, '\t'));
console.log('===========================');
objMoves.removeMovesElem('xyz', 1);
console.log(JSON.stringify(objMoves, null, '\t'));
Is there some kind of shorthand for this?
object.position.x = position.x
object.position.y = position.y
object.position.z = position.z
object.rotation.x = rotation.x
object.rotation.y = rotation.y
object.rotation.z = rotation.z
Thanks for your time.
Yes you can use Object.assign().
var obj = {}
var position = {x: 1, y: 2, z: 3}
var rotation = {x: 1, y: 2, z: 3}
obj.position = Object.assign({}, position);
obj.rotation = Object.assign({}, rotation);
console.log(obj)
If you only want to take specific properties from object you can create your pick function using map() to get array of objects and later use spread syntax to assign each object.
var obj = {}
var position = {x: 1, y: 2, z: 3}
var rotation = {x: 1, y: 2, z: 3}
function pick(obj, props) {
return props.map(e => ({[e]: obj[e]}))
}
obj.position = Object.assign({}, ...pick(position, ['x', 'y']));
obj.rotation = Object.assign({}, ...pick(rotation, ['x', 'y', 'z']));
console.log(obj)
You could use a direct approach by assigning the objects directly,
object.position = position;
object.rotation = rotation;
or with an array and the keys with iterating the properties.
['x', 'y', 'z'].forEach(function (k) {
object.position[k] = position[k];
object.rotation[k] = rotation[k];
});
With ES6 Spread Operator you can do it easier in one line, for the question sample:
object = {...object, position, rotation}
Just notice it will replace new properties with old one
My advice: DON'T USE ANY "CLEVER" LOOPS AND DYNAMIC SH*T
Reasons:
It's just a few lines, not a ton of lines, don't do overengineering
It's so much readable, that even IDE can help you with autosuggestions
You can also use a for...in loop, it's simple and quite readable. Example:
for ( const property in position ) {
object.position[property] = position[property];
}
MDN reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
I want to create/instantiate an array objectArray with several objects, whereby the objects shall contain x and y (empty at the beginning).
The length (amount of objects) of objectArray needs to be the same as the length of i.e. arrayLong. How I have to implement that?
Finally, it should look like that (etc. corresponding to the length of arrayLong):
var objectArray = [ { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 } etc. ];
Simple:
var objectArray = []; // Declare the array variable
for(var i = 0; i < arrayLong; i++){ // Do something `arrayLong` times
objectArray.push({x: 0, y:0}); // Add a object to the array.
}
This assumes arrayLong is a numeric value, of course.
Another way you could do it, is this:
var objectArray = Array.apply(null, Array(arrayLong))
.map(function(){return {x: 0, y:0}});