What is the best way to combine elements at matching indexes from an array of arrays into a unified array?

Question

What is the best way to combine elements at matching indexes from an array of arrays into a unified array?

Suppose I have an array of arrays structured as follows:

[
  [0, 1, 3],
  [2, 4, 6],
  [5, 5, 7],
  [10, 0, 3]
]

Is there a way to create a new array that calculates the sum of all values at each index position within the inner arrays using JavaScript? For the given example, the result would be: [17, 10, 19]. I need a solution that will work regardless of the length of the inner arrays. I believe it may involve a combination of map and for-of loops, or maybe reduce method, but I am struggling to understand the implementation. Despite my search efforts, I have not found any examples that precisely match this scenario.

javascript arrays grouping

Answer 1

Answer №1

To achieve this, you can utilize the Array.prototype.reduce() method in conjunction with Array.prototype.forEach().

var array = [
        [0, 1, 3],
        [2, 4, 6],
        [5, 5, 7],
        [10, 0, 3]
    ],
    result = array.reduce(function (r, a) {
        a.forEach(function (b, i) {
            r[i] = (r[i] || 0) + b;
        });
        return r;
    }, []);
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

A more concise approach involves using a map within the reduce function for array reduction.

var array = [[0, 1, 3], [2, 4, 6], [5, 5, 7], [10, 0, 3]],
    result = array.reduce((r, a) => a.map((b, i) => (r[i] || 0) + b), []);
    
console.log(result);

Answer 2

To achieve this, you can utilize the Array.prototype.reduce() method in conjunction with Array.prototype.forEach().

var array = [
        [0, 1, 3],
        [2, 4, 6],
        [5, 5, 7],
        [10, 0, 3]
    ],
    result = array.reduce(function (r, a) {
        a.forEach(function (b, i) {
            r[i] = (r[i] || 0) + b;
        });
        return r;
    }, []);
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

A more concise approach involves using a map within the reduce function for array reduction.

var array = [[0, 1, 3], [2, 4, 6], [5, 5, 7], [10, 0, 3]],
    result = array.reduce((r, a) => a.map((b, i) => (r[i] || 0) + b), []);
    
console.log(result);

Answer 3

Answer №2

Utilizing Lodash 4:

function calculate_column_sum(data) {
  return _.map(_.unzip(data), _.sum);
}

var result = calculate_column_sum([
  [1, 2],
  [4, 8, 16],
  [32]
]);

console.log(JSON.stringify(result));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

For earlier versions of Lodash and some notes

Lodash 4 has altered the functionality of _.unzipWith, where now the iteratee receives all values as spread arguments simultaneously, making it incompatible with using the reducer style _.add. In Lodash 3, the following example functions correctly:

function calculate_column_sum(data) {
  return _.unzipWith(data, _.add);
}

var result = calculate_column_sum([
  [1, 2],
  [4, 8, 16],
  [32],
]);

console.log(JSON.stringify(result));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js></script>

_.unzipWith will place undefineds in rows shorter than others, while _.sum considers undefined values as 0 (in Lodash 3).

If your data includes undefined and null items and you wish to treat them as 0, you can use the following:

function calculate_column_sum_safe(data) {
  return _.map(_.unzip(data), _.sum);
}

function calculate_column_sum(data) {
  return _.unzipWith(data, _.add);
}

console.log(calculate_column_sum_safe([[undefined]])); // [0]
console.log(calculate_column_sum([[undefined]]));      // [undefined]

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js</script>

This code snippet is compatible with Lodash 3; unfortunately, finding a clean way to handle undefined as 0 in Lodash 4 proves challenging as _.sum([undefined]) === undefined

Answer 4

Utilizing Lodash 4:

function calculate_column_sum(data) {
  return _.map(_.unzip(data), _.sum);
}

var result = calculate_column_sum([
  [1, 2],
  [4, 8, 16],
  [32]
]);

console.log(JSON.stringify(result));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

For earlier versions of Lodash and some notes

Lodash 4 has altered the functionality of _.unzipWith, where now the iteratee receives all values as spread arguments simultaneously, making it incompatible with using the reducer style _.add. In Lodash 3, the following example functions correctly:

function calculate_column_sum(data) {
  return _.unzipWith(data, _.add);
}

var result = calculate_column_sum([
  [1, 2],
  [4, 8, 16],
  [32],
]);

console.log(JSON.stringify(result));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js></script>

_.unzipWith will place undefineds in rows shorter than others, while _.sum considers undefined values as 0 (in Lodash 3).

If your data includes undefined and null items and you wish to treat them as 0, you can use the following:

function calculate_column_sum_safe(data) {
  return _.map(_.unzip(data), _.sum);
}

function calculate_column_sum(data) {
  return _.unzipWith(data, _.add);
}

console.log(calculate_column_sum_safe([[undefined]])); // [0]
console.log(calculate_column_sum([[undefined]]));      // [undefined]

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js</script>

This code snippet is compatible with Lodash 3; unfortunately, finding a clean way to handle undefined as 0 in Lodash 4 proves challenging as _.sum([undefined]) === undefined

Answer 5

Answer №3

Short code snippet using ES6, utilizing map and reduce

const matrix = [ [2, 4, 6], [1, 3, 5], [7, 8, 9] ];

const result = matrix[0].map((_, i) => matrix.reduce((prev, _, j) => prev + matrix[j][i], 0));

console.log(result);

Answer 6

Short code snippet using ES6, utilizing map and reduce

const matrix = [ [2, 4, 6], [1, 3, 5], [7, 8, 9] ];

const result = matrix[0].map((_, i) => matrix.reduce((prev, _, j) => prev + matrix[j][i], 0));

console.log(result);

Answer 7

Answer №4

To efficiently handle nested arrays with equal lengths, concatenation and reduction techniques can be utilized.

    function calculateTotal (arr) {
        var length = arr[0].length;
       return [].concat.apply([],arr)  //flatten the array
                .reduce( function(arr, val, ind){ //loop over and create a new array
                    var i = ind%length;  //get the column
                    arr[i] = (arr[i] || 0) + val; //update total for column
                    return arr;  //return the updated array
                }, []);  //the new array used by reduce
    }
    
    var arr = [
      [2, 3, 6],
      [1, 4, 8],
      [7, 9, 2],
      [12, 10, 14]
    ];
    console.log(calculateTotal(arr));  //[22, 26, 30]

Answer 8

To efficiently handle nested arrays with equal lengths, concatenation and reduction techniques can be utilized.

    function calculateTotal (arr) {
        var length = arr[0].length;
       return [].concat.apply([],arr)  //flatten the array
                .reduce( function(arr, val, ind){ //loop over and create a new array
                    var i = ind%length;  //get the column
                    arr[i] = (arr[i] || 0) + val; //update total for column
                    return arr;  //return the updated array
                }, []);  //the new array used by reduce
    }
    
    var arr = [
      [2, 3, 6],
      [1, 4, 8],
      [7, 9, 2],
      [12, 10, 14]
    ];
    console.log(calculateTotal(arr));  //[22, 26, 30]

Answer 9

Answer №5

Given that the array is static as displayed.

a = [
      [0, 1, 3],
      [2, 4, 6],
      [5, 5, 7],
      [10, 0, 3]
    ]

b = []
     
for(i = 0; i < a[0].length; i++){
  count = 0
  for(j = 0; j < a.length; j++){
     count += a[j][i]
   }
   b.push(count)
}
console.log(b)

Answer 10

Given that the array is static as displayed.

a = [
      [0, 1, 3],
      [2, 4, 6],
      [5, 5, 7],
      [10, 0, 3]
    ]

b = []
     
for(i = 0; i < a[0].length; i++){
  count = 0
  for(j = 0; j < a.length; j++){
     count += a[j][i]
   }
   b.push(count)
}
console.log(b)

Answer 11

Answer №6

No responses so far using the for ... of syntax mentioned in the initial question.
I chose to implement a solution with conditional statements for arrays of varying lengths.

var arr = [
  [0, 1, 3],
  [2, 4, 6],
  [5, 5, 7],
  [10, 0, 3]
];
index = 0;
resultArr = []
for (const innerArr of arr) {
  idx = 0;
  for (const numVal of innerArr) {
    if (idx == resultArr.length) resultArr.push(numVal)
    else resultArr[idx] += numVal
    idx++;
  }
  index++;
}
console.log(resultArr);

Indeed, in this scenario, utilizing the traditional for loop is more suitable than for ... of.
The code snippet below demonstrates the use of a conditional (ternary) operator.

var arr = [
  [0, 1, 3],
  [2, 4, 6],
  [5, 5, 7],
  [10, 0, 3]
];

resultArr = [];
for (count = 0; count < arr.length; count++) {
  for (jCount = 0; jCount < arr[count].length; jCount++) {
    jCount==resultArr.length ? resultArr.push(arr[count][jCount]) : resultArr[jCount]+=arr[count][jCount]
  }
}

console.log(resultArr);

An innovative approach employing maps and reductions to sum elements from arrays of different sizes.

var arraySamples = [
  [0],
  [2, 4],
  [5, 5, 7, 10, 20, 30],
  [10, 0]
];
bArr = Array(arraySamples.reduce((a, b) => Math.max(a, b.length), 0)).fill(0);
finalResult = arraySamples.reduce((res, ar) => bArr.map((_, ind) => (ar[ind] || 0) + (res[ind] || 0)), []);

console.log(finalResult);

Answer 12

No responses so far using the for ... of syntax mentioned in the initial question.
I chose to implement a solution with conditional statements for arrays of varying lengths.

var arr = [
  [0, 1, 3],
  [2, 4, 6],
  [5, 5, 7],
  [10, 0, 3]
];
index = 0;
resultArr = []
for (const innerArr of arr) {
  idx = 0;
  for (const numVal of innerArr) {
    if (idx == resultArr.length) resultArr.push(numVal)
    else resultArr[idx] += numVal
    idx++;
  }
  index++;
}
console.log(resultArr);

Indeed, in this scenario, utilizing the traditional for loop is more suitable than for ... of.
The code snippet below demonstrates the use of a conditional (ternary) operator.

var arr = [
  [0, 1, 3],
  [2, 4, 6],
  [5, 5, 7],
  [10, 0, 3]
];

resultArr = [];
for (count = 0; count < arr.length; count++) {
  for (jCount = 0; jCount < arr[count].length; jCount++) {
    jCount==resultArr.length ? resultArr.push(arr[count][jCount]) : resultArr[jCount]+=arr[count][jCount]
  }
}

console.log(resultArr);

An innovative approach employing maps and reductions to sum elements from arrays of different sizes.

var arraySamples = [
  [0],
  [2, 4],
  [5, 5, 7, 10, 20, 30],
  [10, 0]
];
bArr = Array(arraySamples.reduce((a, b) => Math.max(a, b.length), 0)).fill(0);
finalResult = arraySamples.reduce((res, ar) => bArr.map((_, ind) => (ar[ind] || 0) + (res[ind] || 0)), []);

console.log(finalResult);

Answer 13

Answer №7

let arr = [
  [1, 2, 4],
  [3, 5, 8],
  [6, 6, 9],
  [11, 1, 4]
]   

arr.map( element => element.reduce( (accumulator, value)=> accumulator += value, 0 ) )
//output-> [7, 16, 21, 16]

Answer 14

let arr = [
  [1, 2, 4],
  [3, 5, 8],
  [6, 6, 9],
  [11, 1, 4]
]   

arr.map( element => element.reduce( (accumulator, value)=> accumulator += value, 0 ) )
//output-> [7, 16, 21, 16]

What is the best way to combine elements at matching indexes from an array of arrays into a unified array?

Answer №1

Answer №2

For earlier versions of Lodash and some notes

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Having trouble choosing an option from the dropdown menu in bootstrap

Unable to retrieve information from JSON file utilizing AngularJS version 1.6

Transitioning the height of a Vue component when switching routes

Setting the state of a nested array within an array of objects in React

Registering dynamic modules within a nested module structure - Vuex

Looking to retrieve an element from an array of objects based on consecutive object properties, I have a specific value to search for

What is the best way to extract information from a JavaScript page when the content is identified by a reference?

Javascript Code for toggling the visibility of a panel

The error "Call to a member function exports() on array" occurs when attempting to use the

Every time I try to request something on my localhost, NextJS console throws a TypeError, saying it cannot read the properties of undefined, specifically '_owner'

Comparing PHP's STRCHR with the equivalent function in JavaScript

Resolving Typescript jQuery AJAX Navigation Problem

Tips for Creating a Smooth Slide-Down Effect in Your Navbar Menu

Can child components forward specific events to their parent component?

Unable to retrieve basic profile data from LinkedIn Members using their email ID unless they are signed in

Is there a way to automatically increase a value by clicking on it?

Optimize and compress your Angular 4 code

Ensure that the loop is fully executed before proceeding with any additional code

Unlocking the secret path to reach an untraceable object nested within another object using

When a specific item is selected from a drop-down menu, text boxes and drop-downs will dynamically appear and change