CODEWITHSUNDEEP
javascript
PRANAV
PRANAV

Reputation: 1111

How to sum of each array combination using javascript?

I need to Find the Sum of each array combination & required each combination in each line.
How to get the sum of each combination and display it in each line with innerHTML ?

EDIT

For each number in the range of 0 to 9999, get the sum of their digits: ex. 123 => 1 + 2 + 3 = 6

Display each line with a zero padded 4 digit index number, an equal sign, and the sum: ex. 0123 = 6

var arraysToCombine = [
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
];
var getAllCombinations = function(arraysToCombine) {
  var divisors = [];
  for (var i = arraysToCombine.length - 1; i >= 0; i--) {
    divisors[i] = divisors[i + 1] ? divisors[i + 1] * arraysToCombine[i + 1].length : 1;

  }

  function getPermutation(n, arraysToCombine) {
    var result = [],
      curArray;
    for (var i = 0; i < arraysToCombine.length; i++) {
      curArray = arraysToCombine[i];
      result.push(curArray[Math.floor(n / divisors[i]) % curArray.length]);
    }
    return result;
  }
  var numPerms = arraysToCombine[0].length;
  for (var i = 1; i < arraysToCombine.length; i++) {
    numPerms *= arraysToCombine[i].length;
  }
  var combinations = [];
  for (var i = 0; i < numPerms; i++) {
    combinations.push(getPermutation(i, arraysToCombine));
  }
  return combinations;
}
document.write(getAllCombinations(arraysToCombine));

Upvotes: 2

Views: 276

Answers (1)

zer00ne
zer00ne

Reputation: 43880

OP Objective

For each number in the range of 0 to 9999, get the sum of their digits:

123 => 1 + 2 + 3 = 6

Display each line with a zero padded 4 digit index number, an equal sign, and the sum:

0123 = 6

Dealing with the DOM

The request to use .innerHTML is respectfully ignored. Rendering each line onto the DOM separately is too slow. Instead we will create a document fragment which isn't in the DOM, then add a <div> with a line of text for each sum. Once all 10,000 lines have been added to the fragment, we just add the fragment to <body>. That procedure will cost exactly one single DOM operation and one reflow instead of 10,000 DOM operations and reflows. For details on performance, here's an article written by the creator of jQuery.

Solution

For reasons previously mentioned, create a document fragment.

let frag = new DocumentFragment

Next, create an array of numbers in the range of 0 to 9999 (10,000 numbers!)

const XxM = [...new Array(10000)].map((_, i) => i);
// [1, 2, 3, ...9999]

After that, iterate through each number with .flatMap()

const sums = XxM.flatMap(four => [...])

For each number in XxM convert it into a string, then split it into an array of chars.

four.toString().split('')
// 456 => "456" => ["4", "5", "6"]

Next, each sub-array of strings will be coerced back into a sub-array of numbers (ie (+num)) and the sum of all numbers will be returned by .reduce()

.reduce((sum, num) => sum + (+num), 0)
/* ["4", "5", "6"] =>  0  + (+"4" => 4)
                   =>  4  + (+"5" => 5)
                   =>  9  + (+"6" => 6)
                   <=  15
 */

Afterwards, the array of sums must be displayed. For each number of sums will be iterated by .forEach() since we don't need any values returned. On each iteration, make a <div>.

sums.forEach((sum, idx) => {
  let item = document.createElement('DIV');

Then make a text line consisting of an index number patterned like so: 0001, 0002, 0003, ...9999 an equals sign: =, and the sum. Next insert the text line into the new <div>.

   item.textContent = `${idx.toString().padStart(4, '0')} = ${sum}`;

Then add the <div> to the document fragment and repeat for 9,999 more times, and then add the fragment to the <body> only once.

   frag.appendChild(item); // 10,000 times!
});
document.body.appendChild(frag); // ONCE!

Reminder: Do not try to render each line into DOM. My first attempt to do so was so slow the browser prompted me to wait or cancel 4 times! For big operations such as this, using a document fragment as I have just demonstrated makes speed issues with the DOM trivial. Also, do not use document.write

let frag = new DocumentFragment();
const XxM = [...new Array(10000)].map((_, i) => i);
const sums = XxM.flatMap(four => [four.toString().split('').reduce((sum, num) => sum + (+num), 0)]);
sums.forEach((sum, idx) => {
  let item = document.createElement('DIV');
  item.textContent = `${idx.toString().padStart(4, '0')} = ${sum}`;
  frag.appendChild(item);
});
document.body.appendChild(frag);

Upvotes: 1

Related Questions