I am looking into the performance of object lookup vs array lookup for a particle system.
Each particle just has x, y values. I can either store these in an object, array, or two separate arrays, one for x and one for y.
In order to iterate over all of my particles I have to store all of the objects in a big array anyway, accessing each object and its properties in order to move and draw the particle. I thought it would be faster to instead store the x, y values directly in arrays, but this jsben.ch test seems to show otherwise, but only when my arrays are sorted randomly. https://jsben.ch/ZR0Ff
The values in the arrays are going to change as particles are updated, added, and removed.
What I don't understand is if my arrays for x and y are just full of numbers and the array behind the scenes is a typed array, how does changing the bits at each index change the performance of the array?
Here is my code:
// The thinking behind this test is that it would be faster to iterate over
// arrays containing primitive values than objects
// Instead of storing data in objects, it would all be stored in arrays
// The values at the same index would belong to the same "object"
// In this way you might access the same data more efficiently
var objects = []; // object array full of objects with x and y properties
var x_values = []; // array of numbers representing x values
var y_values = []; // array of numbers representing y values
var combined_values = []; // array of x, y values in the same array
for (let i = 0; i < 10000; i ++) { // populate arrays
objects[i] = { x:i, y:i }; // each object has x and y
x_values[i] = i; // this is the array for x
y_values[i] = i; // this is the array for y
combined_values[i*2] = i; // this array goes x,y, x,y, x,y... and is twice as long
combined_values[i*2+1] = i;
}
// shuffling arrays gives interesting results
//shuffleArray(objects);
//shuffleArray(x_values);
//shuffleArray(y_values);
//shuffleArray(combined_values);
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
function testObjects(objects_) { // loop over all objects
var i = objects.length;
while (i > 0) { i -= 1;
objects_[i].x ++;
objects_[i].y ++;
}
}
function testCombinedValues(combined_values_) { // loop over combined values array
var i = combined_values_.length;
var j = i + 1;
while(i > 0) { i -= 2; j -= 2;
combined_values_[i] ++;
combined_values_[j] ++;
}
}
function testValues(x_values_, y_values_) { // loop over two separate values arrays
var i = x_values_.length;
while(i > 0) { i -= 1;
x_values_[i] ++;
y_values_[i] ++;
}
}
Go to the https://jsben.ch/ZR0Ff and try uncommenting the lines that shuffle the array values. I cannot understand why shuffling an array of numbers would have any bearing on its performance against an array of objects. It seems to me like it should always be significantly faster.
Related
I have a problem where, given an array of integers, I need to find sets of three numbers that add up to equal zero. The below solution works but isn't as optimal as I'd like and I am looking for ways to optimize it to avoid unnecessary processing.
What I am doing below is I am iterating through the all combinations of numbers while eliminating iterating through the same indices in each nested loop and I am checking if the three numbers in the inner most loop add up to zero. If yes, I am converting the array to a string and if the string isn't already in the results array I am adding it. Right before returning I am then converting the strings back to an array.
I appreciate any suggestions on how to further optimize this or if I missed out on some opportunity to implement better. I am not looking for a total refactor, just some adjustments that will improve performance.
var threeSum = function(nums) {
const sorted = nums.sort();
if(sorted.length && (sorted[0] > 0 || sorted[sorted.length-1] < 0)) {
return [];
}
let result = [];
for(let i=0; i < sorted.length; i++) {
for(let z=i+1; z < sorted.length; z++) {
for(let q=z+1; q < sorted.length; q++) {
if(sorted[i]+sorted[z]+sorted[q] === 0) {
const temp = [sorted[i], sorted[z], sorted[q]].join(',');
if(!result.includes(temp)) {
result.push(temp);
}
}
}
}
}
return result.map(str => str.split(','));
};
Sample Input: [-1,0,1,2,-1,-4]
Expected Output: [[-1,-1,2],[-1,0,1]]
One obvious optimisation is to precalculate the sum of the two first numbers just before the third nested loop. Then compare in the third loop if that number equals the opposite of the third iterated number.
Second optimisation is to take advantage of the fact that your items are sorted and use a binary search for the actual negative of the sum of the two first terms in the rest of the array instead of the third loop. This second optimisation brings complexity from O(N3) down to O(N2LogN)
Which leads to the third optimisation, for which you can store in a map the sum as key and as value, an array of the different pairs which sum to the sum so that each time you want to operate the binary search again, first you check if the sum already exists in that map and if it does you can simply output the combination of each pair found at that sum’s index in the map coupled with the negative sum.
The OP's solution runs in O(N³) time with no additional storage.
The classic "use a hash table" solution to find the missing element can bring that down to O(N²) time with O(N) storage.
The solution involves building a number map using an object. (You could use a Map object as well, but then you can't be as expressive with ++ and -- operators). Then just an ordinary loop and inner loop to evaluate all the pairs. For each pair, find if the negative sum of those pairs is in the map.
function threeSum(nums) {
var nummap = {}; // map a value to the number of ocurrances in nums
var solutions = new Set(); // map of solutions as strings
// map each value in nums into the number map
nums.forEach((val) => {
var k = nummap[val] ? nummap[val] : 0; // k is the number of times val appears in nummap
nummap[val] = k+1; // increment by 1 and update
});
// for each pair of numbers, see if we can find a solution the number map
for (let i = 0; i < nums.length; i++) {
var ival = nums[i];
nummap[ival]--;
for (let j = i+1; j < nums.length; j++) {
var jval = nums[j];
nummap[jval]--;
var target = -(ival + jval); // this could compute "-0", but it works itself out since 0==-0 and toString will strip the negative off
// if target is in the number map, we have a solution
if (nummap[target]) {
// sort this three sum solution and insert into map of available solutions
// we do this to filter out duplicate solutions
var tmp = [];
tmp[0] = ival;
tmp[1] = jval;
tmp[2] = target;
tmp.sort();
solutions.add(tmp.toString());
}
nummap[jval]++; // restore original instance count in nummap
}
nummap[ival]--;
}
for (s of solutions.keys()) {
console.log(s);
}
}
threeSum([9,8,7,-15, -9,0]);
var threeSum = function(unsortedNums) {
const nums = unsortedNums.sort();
if(nums.length && (nums[0] > 0 || nums[nums.length-1] < 0)) {
return [];
}
const result = new Map();
for(let i=0; i < nums.length; i++) {
for(let z=i+1; z < nums.length; z++) {
for(let q=z+1; q < nums.length; q++) {
if(nums[i]+nums[z]+nums[q] === 0) {
const toAdd = [nums[i], nums[z], nums[q]];
const toAddStr = toAdd.join(',');
if(!result.has(toAddStr)) {
result.set(toAddStr, toAdd);
}
}
}
}
}
return Array.from(result.values());
};
Are there any more efficient ways to create nested objects than nested for approach?
I am trying to hold 25 random numbers (1 - 71), 5 row x 5 column. I will iterate through each item to check if ballPicker() function (not yet implemented) has picked a number that the object has. So I need to keep the information that if a number was found. I could have done it with a 5 x 5 array but iterating that array will not be as efficient as objects.
I have an array starting from 1 to 71 (inclusive, step is 1).
I shuffle the array in createRandomNumberArray() function. So shuffledNumbers array values are not sequential
let shuffledNumbers = Array.from({length: 71}, (v, i) => i + 1);
function createRandomNumberArray() { //Fisher - Yates shuffle algorithm
let randomPosition;
let temp;
for (let i = shuffledNumbers.length - 1; i > 0; i--) {
randomPosition = Math.floor(Math.random() * (i + 1));
temp = shuffledNumbers[i];
shuffledNumbers[i] = shuffledNumbers[randomPosition];
shuffledNumbers[randomPosition] = temp;
}
}
In createBoards() function I am creating an object (board) that holds 5 objects (row) with their indexes as property name. And row has 5 objects (cell) with their indexes as property name again. Cell has only one object that gets its property name from slicedArray(slicedArray is a 5 item slice from shuffledNumbers that holds non duplicated random numbers (range inclusive 1 to inclusive 71)) and its value is always false.
function createBoards() {
let board = {};
for (let i = 0; i < 5; i++) {
let row = {};
let slicedArray = shuffledNumbers.slice((i * 5), ((i + 1) * 5));
for (let j = 0; j < 5; j++) {
let cell = {};
cell[slicedArray[j]] = false;
row[j] = cell;
}
board[i] = row;
}
return board;
}
I want to keep the structure like this:
Board object will have exactly 5 rows and 1 row has exactly 5 items. And in the future I need to iterate those items to find the random value that I had assigned before. I thought it is faster to use objects than arrays. I hope I am correct.
I want to display an array without showing of indexes. The for loop returns the array indexes which is not showing in usual declaration.
I want to send an array like [1,2,3 ...] but after retrieving from for loop, I haven't the above format. How can I store my values as above.
var a = [];
for (var i = 1; i < 8; i++) {
a[i] = i;
};
console.log(a);
Outputs:
[1: 1, 2: 2 ...]
Desired output:
[1,2,3]// same as console.log([1,2,3])
Array indices start at zero, your loop starts at 1, with index 0 missing you have a sparse array that's why you get that output, you can use push to add values to an array without using the index.
var a = [];
for (var i = 1; i < 8; i++) {
a.push(i);
};
console.log(a);
The problem is that you start your array with 1 index, making initial 0 position being empty (so called "hole" in array). Basically you treat array as normal object (which you can do of course but it defeats the purpose of array structure) - and because of this browser console.log decides to shows you keys, as it thinks that you want to see object keys as well as its values.
You need to push values to array:
var a = [];
for (var i = 1; i < 8; i++) {
a.push(i);
};
I have to disagree with the answers provided here. The best way to do something like this is:
var a = new Array(7);
for (var i = 0; i < a.length; i++) {
a[i] = i + 1;
}
console.log(a);
Your code is making each index equal to i, so use it this way
var a = [];
for (var i = 1; i < 8; i++) {
a.push(i);
};
console.log(a);
I've got a 2 dimensional array (I'll call it myArray). myArray is full of 10 child arrays, each with 10 "-"s.
function mapInit () {
max_size = 10;
board = [];
map_width = Math.floor((Math.random() * max_size + max_size) / 2);
map_height = Math.floor((Math.random() * max_size + max_size) / 2);
boardsize = { x : map_width, y : map_height }
}
function generateBoard () {
var columns = [];
for (var i = 0; i < map_height; i++) {
columns.push("---");
};
for (var i = 0; i < map_width; i++) {
board.push(columns);
};
}
When I select myArray[x][y], it returns the value of the single object in that array: "-". This makes sense because I asked for that individual value.
When I set myArray[x][y] = 1, it sets all [y] in the second-level arrays to 1. It should set the individual value in that specific child array to 1, because the individual value is what was just returned when I selected myArray[x][y]. What am I doing wrong / not understanding?
What am I doing wrong / not understanding?
You adding a reference to a single array multiple times to another array. Take a look at this simplified example:
var a = [];
var b = [a, a];
a[0] = 42;
console.log(b);
// [[42], [42]]
as you can see, I'm setting a as the first and second element in the b array. There is no reason why this operation should create two copies of a in the process. Both elements reference the same array, which you can easily test with
b[0] === b[1] // true
Two distinct arrays would never be equal to each other ([] === [] returns false).
Solution: Create a copy of the array inside the second loop:
for (var i = 0; i < map_width; i++) {
board.push(columns.slice(0));
}
My goal is to make a randomly generated 2D Array in Javascript, that has an X amount of the same one character value while the rest of the values are equal to another character.
In this example, there are 10 rows and 10 columns for the 2D Array. 20 out of the possible 100 values of the Array should be equal to 'Y' (for yes) and the 80 others should be 'N' (for no). I want the 'Y's to be randomly placed all over the Array, and I absolute need exactly 20 of them to be 'Y's and the rest 'N's.
I had a less efficient way before, and I thought to try this approach, where after I define the Array, I make the first X amount of values a 'Y' and then the rest all 'N's. Then I shuffle the array, (using the shuffle from the underscore library) so that the 'Y's are all spread out randomly everywhere.
Is this an efficient way of getting what I need done? Are there any better solutions? I tried making a JSFiddle with my example, but the site appears to be down at the moment.
(I was unable to test my code yet to see if the shuffle worked correctly on my 2D array)
var rows = 10;
var cols = 10;
var elements = 20;
//Define Empty Array
var test = new Array(rows);
for (var k = 0; k < rows; k++)
{
test[k] = Array(cols);
}
var i = 1;
for (var x = 0; x < rows; x++)
{
for (var y = 0; y < cols; y++)
{
if (i <= elements)
{
test[x][y] = "Y";
}
else
{
test[x][y] = "N";
}
}
}
//Shuffle all those values so they're no longer in order
var shuffledTest = _.shuffle(test);
//Print in rows
for (var x = 0; x < rows; x++)
{
console.log(shuffledTest[x]);
}
A very simple solution is to first create an array, fill it with a number of "N"s, insert the "Y"s at random indexes, and then finally splitting it into the 2-dimensional array that you want:
var tmpArr = [], // Temporary 1-dimensional array to hold all values
arr = [], // The final 2-dimensional array
rows = 10,
cols = 10,
elements = 20; // Number of "Y"s
// 1. Fill temporary array with "N"s
for (var i = 0; i < rows * cols - elements; i += 1) {
tmpArr.push("N");
}
// 2. Insert "Y"s at random indexes in the temporary array
for (var i = 0; i < elements; i += 1) {
var index = Math.round(Math.random() * (tmpArr.length + 1));
tmpArr.splice(index, 0, "Y");
}
// 3. Split temporary array into 10 seperate arrays
// and insert them into the final array
for (var i = 0; i < rows; i += 1) {
var row = tmpArr.slice(i * cols, (i + 1) * cols);
arr.push(row);
}
JSBin to illustrate: http://jsbin.com/luyacora/1/edit
You can try this solution, it uses underscores range to create a pair of arrays to use as iterators, though their values don't matter.
Play around with the randomizer function to get an even distribution of 'y's
JSBIN: http://jsbin.com/yaletape/1/
var rows = _.range(0, 10, 0);
var columns = _.range(0, 10, 0);
function randomizer(mult){
return Math.floor((Math.random()*mult)+1);
}
var y_count = 0;
var matrix = _.map(rows, function(){
return _.map(columns, function(v, i){
var value;
var y_allowed = randomizer(3);
var current_y_count = 0;
if(y_count < 20 && current_y_count < y_allowed){
var rand = randomizer(5);
if(rand > 4){
value = 'y';
current_y_count++;
y_count++;
}
}
if(!value){
value = 'n';
}
return value;
});
});
//The above could be simplified to
var matrix = _.range(0,10,0).map(function(){
return _.range(0,10,0).map(function(){
//put the logic code from above here
});
});
Maybe shuflle a 2D array is not the best way. As #Zeb mentioned, here is some code that fill random positions with the 'Y' value. After that, the other positions are filled with 'N'.
http://plnkr.co/edit/avyKfgsgOSdAkRa1WOsk
var arr = [];
var cols = 10;
var rows = 10;
var positions = rows*cols; // 100
var YQty = 10; // only 10 'Y' are needed
// 'Y' values.
for(i = 0; i < YQty; i++)
{
do
{
x = parseInt(Math.random() * cols);
y = parseInt(Math.random() * rows);
filled = false;
if (typeof(arr[x]) == "undefined")
{
arr[x] = [];
}
if (typeof(arr[x][y]) == "undefined")
{
arr[x][y] = 'Y';
filled = true;
}
}
while (!filled);
}
// 'N' values.
for (x = 0; x < cols; x++)
{
if (typeof(arr[x]) == "undefined")
{
arr[x] = [];
}
for (y = 0; y < rows; y++)
{
if (arr[x][y] != 'Y')
{
arr[x][y] = 'N';
}
}
}
Shuffling the multidimensional array is not the best approach. Seeing as any sort is worse than linear time complexity. The easiest solution would be to create your multidimensional array and then set each index value to the char you want the 'rest' of the values to be. Then for 1 -> the number of other char value choose a random index and set that to the char.
Note: If the randomly picked spot has already been changed you need to choose a new one to make sure you have the right amount at the end.