We Keep Coding

Search a positive gradient in a dynamic-sized 2d array

I need to search a positive & negative gradient in a 2d array for values, for example.
Positive gradient: bottom left > middle > top right
Negative gradient: top left > middle > bottom right
[
['x', 'x', 'o'],
[null, null, 'o'],
['x', 'x', null]
]
I have 2 functions. First the value is found in a for loop, when found both of these functions run to search the positive & negative gradient of the maze and return true if a winning combination is found.
scanForNegativeGradientCombinationsworks, scanForPositiveGradientCombinations does not and ends in a typeError. I think the problem may be when reducing the rowIndex, I am pushing the game out of bounds, but im not sure.
const isDiagonalWinner = (rowCellValues, winCountCondition, player) => {
for(let rowIndex = 0; rowIndex < rowCellValues.length; rowIndex++){
for(let columnIndex = 0; columnIndex < rowCellValues[rowIndex].length; columnIndex++){
const cellValue = rowCellValues[rowIndex][columnIndex];
if(cellValue === player.symbol) {
console.log('initiating player scan for ', player.symbol, 'at', [rowIndex, columnIndex]);
if(scanForNegativeGradientCombinations(columnIndex, rowIndex, rowCellValues, player.symbol, winCountCondition)) {
return true
}
if(scanForPositiveGradientCombinations(columnIndex, rowIndex, rowCellValues, player.symbol, winCountCondition)) {
return true
}
}
}
}
return null;
};
Above is the function that will call the following 2 functions.
const scanForNegativeGradientCombinations= (columnIndex, rowIndex, rowCellValues, playerSymbol, winCountCondition) => {
let counter = 0;
while(rowIndex < rowCellValues.length && columnIndex < rowCellValues[rowIndex].length){
if(rowCellValues[rowIndex][columnIndex] === playerSymbol){
counter++;
}
if(counter >= winCountCondition){
return true;
}
rowIndex++;
columnIndex++;
}
return false;
}
const scanForPositiveGradientCombinations= (columnIndex, rowIndex, rowCellValues, playerSymbol, winCountCondition) => {
let counter = 0;
while(rowIndex < rowCellValues.length && columnIndex < rowCellValues[rowIndex].length){
if(rowCellValues[rowIndex][columnIndex] === playerSymbol){
counter++;
}
if(counter >= winCountCondition){
return true;
}
rowIndex--;
columnIndex++;
}
return false;
}

function sequence(n) { return Array(n).fill().map((_,i)=>i) }
function diagonalWin(board) {
let d = board.length
let seq = sequence(d)
return board[0][0]!==null && seq.every(i=>board[i][i]===board[0][0]) ||
board[0][d-1]!==null && seq.every(i=>board[i][d-i-1]===board[0][d-1])
}
console.log(diagonalWin([
['x', 'x', 'o'],
[null, null, 'o'],
['x', 'x', null]
]))
console.log(diagonalWin([
['x', 'x', 'o'],
[null, 'x', 'o'],
['x', 'x', 'x']
]))
console.log(diagonalWin([
['x', 'x', 'o'],
[null, 'o', 'o'],
['o', 'x', 'x']
]))

Finding every second element in a repeating pattern

Data with repeated 'i's followed by 'i's and/or 't's.
data = ['i','t','t','i','i','t','t','t']
Trying to retrieve the index of the last 't' in the pattern ['i','t','t']:
[2,6] // ['i','t','t','i','i','t','t','t'] # position of the returned 't's
// _______ ^ _______ ^
I'm looking for a non-recursive solution using (pure) functions only, using ramdajs for example.
Tried to use reduce and transduce, but unsuccessful sofar.

One approach would be to use R.aperture to iterate over a 3-element sliding window of the data list, then tracking the position of any sub-list that equals the pattern ['i', 't', 't'].
const data = ['i','t','t','i','i','t','t','t']
const isPattern = R.equals(['i', 't', 't'])
const reduceWithIdx = R.addIndex(R.reduce)
const positions = reduceWithIdx((idxs, next, idx) =>
isPattern(next) ? R.append(idx + 2, idxs) : idxs
, [], R.aperture(3, data))
console.log(positions)
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.24.1/ramda.min.js"></script>
A point-free version of this approach could look something like the following, though whether this is preferable comes down to a preference of style/readability.
const data = ['i','t','t','i','i','t','t','t']
const isPattern = R.equals(['i', 't', 't'])
const run = R.pipe(
// create sliding window of 3 elements
R.aperture(3),
// zip sliding window with index
R.chain(R.zip, R.compose(R.range(0), R.length)),
// filter matching pattern
R.filter(R.compose(isPattern, R.nth(1))),
// extract index
R.map(R.compose(R.add(2), R.head))
)
console.log(run(data))
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.24.1/ramda.min.js"></script>

You could use a nested approach with a temporary array for checking the same pattern for different starting points. This proposal works with an arbitrary length of pattern and returns the index of the predefined pattern.
This solution features obviously plain Javascript.
index i t i t t i i t t t temp result comment
----- ------------------------------ ------ -------- ------------
0 <i> [0] [] match
1 i <t> [0] [] match
<-> [0] [] no match
2 i t <-> [] [] no match
<i> [2] [] match
3 i <t> [2] [] match
<-> [2] [] no match
4 i t <t> [] [4] pattern found
<-> [] [4] no match
5 <i> [5] [4] match
6 i <-> [] [4] no match
<i> [6] [4] match
7 i <t> [6] [4] match
<-> [6] [4] no match
8 i t <t> [] [4, 8] pattern found
<-> [] [4, 8] no match
9 <-> [] [4, 8] no match
<t> matches 't' at position
<-> does not match at position
function getPatternPos(array, pattern) {
var result = [];
array.reduce(function (r, a, i) {
return r.concat(i).filter(function (j) {
if (i - j === pattern.length - 1 && a === pattern[i - j]) {
result.push(i);
return false;
}
return a === pattern[i - j];
});
}, []);
return result;
}
console.log(getPatternPos(['i', 't', 't', 'i', 'i', 't', 't', 't'], ['i', 't', 't']));
// [2, 6]
console.log(getPatternPos(['i','t','i', 't', 't', 'i', 'i', 't', 't', 't'], ['i', 't', 't']));
// [4, 8]
console.log(getPatternPos(['a', 'b', 'a', 'b', 'b', 'a', 'b', 'c', 'd'], ['a', 'b', 'c']));
// [7]
.as-console-wrapper { max-height: 100% !important; top: 0; }

You can do it using Array.prototype.reduce() with a simple condition.
data = ['i','t','t','i','i','t','t','t']
var newData = data.reduce(function (acc, item, index) {
// Check if current element is `t` and the item before it is `i`, `t`
if (item === 't' && data[index - 1] === 'i' && data[index - 2] === 't') {
acc.push(item)
}
return acc;
}, []);
console.log(newData); // ['t', 't']

You can do simply by for loop and check last values of array:
var data = ['i','t','t','i','i','t','t','t'];
var positions = new Array();
for(var i=2; i< data.length; i++){
if(data[i-2] === 'i' && data[i-1] === 't' && data[i] === 't') {
positions.push(i)
}
}
console.log(positions)

data.filter((c, i, d) => c === 't' && d[i - 1] === 't' && d[i - 2] === 'I')
**No negative indexes: **
const matchMaker = () => {
let memo = [‘a’, ‘b’];
return (c, i, d) => {
memo.unshift(c);
return memo[1] + memo[2] + c === 'itt';
}
};
data.filter(matchMaker());

function getPattern(arr, p) {
var r = [],
dir = [];
for (let [i, v] of arr.entries()) {
dir = dir.concat(i).filter(function(x) {
if (v === p[i - x] && i - x === p.length - 1) {
r.push(i);
return false;
}
return v === p[i - x];
})
};
return r;
}
console.log(getPattern(['i', 't', 't', 'i', 'i', 't', 't', 't'], ['i', 't', 't']));
console.log(getPattern(['i', 't', 'i', 't', 't', 'i', 'i', 't', 't', 't'], ['i', 't', 't']));
console.log(getPattern(['a', 'b', 'a', 'b', 'b', 'a', 'b', 'c', 'd'], ['a', 'b', 'c']));
.as-console-wrapper { max-height: 100% !important; top: 0; }

In case anyone wants to see an example without using a library that does not use look ahead or behinds ("i + 1" or "i - 2'", etc.).
I think it works similarly to what the Ramda approach does, but I chose to combine the partitioning and equality check in the same loop:
For every step in reduce
Take a section of the array matching the pattern length
Check if it is equal to the pattern
If it is, add the index of the last element in the section to the result of reduce
The code, in which pattern and data are both arrays of strings:
const findPattern = (pattern, data) => data.reduce(
(results, _, i, all) =>
// Check if a slice from this index equals the pattern
arrEqual(all.slice(i, i + pattern.length), pattern)
// Add the last index of the pattern to our results
? (results.push(i + pattern.length - 1), results)
// or, return what we had
: results,
[]);
// Utility method to check array equality
const arrEqual = (arr1, arr2) =>
arr1.length === arr2.length &&
arr1.every((x, i) => x === arr2[i]);
I tested on several data sets and think it meets all requirements:
const findPattern = (pattern, data) => data.reduce(
(results, _, i, all) =>
arrEqual(all.slice(i, i + pattern.length), pattern)
? push(results, i + pattern.length - 1)
: results,
[]);
const arrEqual = (arr1, arr2) =>
arr1.length === arr2.length &&
arr1.every((x, i) => x === arr2[i]);
const push = (xs, x) => (xs.push(x), xs);
// For just string patterns we could also do:
// const arrEqual = (arr1, arr2) => arr1.join("") === arr2.join("");
// Test cases
const dataSets = [
// (i) marks a matching index
// [i] marks a last matching index that should be returned
// | marks a new start
{ pattern: ["i","t","t"], input: ['i','t','t','i','i','t','t','t'], output: [2, 6] },
// |(0) (1) [2]| 3 -(4) (5) [6]| 7
{ pattern: ["i","t"], input: ['i','t','i','t','t','i','i','t','t','t'], output: [1, 3, 7] },
// |(0) [1]|(2) [3]| 4 | 5 |(6) [7]| 8 | 9
{ pattern: ["i","t","t"], input: ['i','t','i','t','t','i','i','t','t','t'], output: [4, 8] },
// |(0) (1)|(2) (3) [4]| 5 |(6) (7) [8]| 9
{ pattern: ["i","t","i"], input: ['i','t','i','t','i','t','i','t','i','t'], output: [2, 4, 6, 8] }
// |(0) (1) [2]| |(6) (7) [8]| 9
// |(2) (3) [4]
// |(4) (5) [6]
];
dataSets.forEach(({pattern, input, output}) =>
console.log(
"| input:", input.join(" "),
"| control:", output.join(", "),
"| answer:", findPattern(pattern, input).join(", ")
)
)

Two years later, lost traveler stumbles upon this question and notices that for variable sized (and especially large pattern with even larger input array or multiple input arrays), classical KMP algorithm would be great.
I think it is worth studing this algorithm.
We will start with simple imperative implementation. Then switch to (at least for me) more intuitive (but probably slightly less optimal, and definitely less optimal when it comes to memory) version with finite automaton. At the end, we'll see something that looks like functional but it is not 100% pure. I wasn't in a mood to torture my self with pure functional implementation of KMP in JS :).
Prefix function KMP, imperative implementation:
function getPatternPos(array, pattern) {
const result = [];
// trying to explain this is a waste of time :)
function createPrefix(pattern) {
// initialize array with zeros
const prefix = Array.apply(null, Array(pattern.length)).map(Number.prototype.valueOf, 0);
let s = 0;
prefix[0] = 0;
for (let i = 1; i < pattern.length; ++i) {
while (s > 0 && pattern[s] !== pattern[i]) {
s = prefix[s - 1];
}
if (pattern[i] === pattern[s]) {
++s;
}
prefix[i] = s;
}
return prefix;
}
const prefix = createPrefix(pattern);
let s = 0;
for (let i = 0; i < array.length; ++i) {
while (s > 0 && pattern[s] !== array[i]) {
s = prefix[s - 1];
}
if (array[i] === pattern[s]) {
++s;
}
if (s === pattern.length) {
result.push(i);
s = 0;
}
}
return result;
}
console.log(getPatternPos(['i', 't', 't', 'i', 'i', 't', 't', 't'], ['i', 't', 't']));
// [2, 6]
console.log(getPatternPos(['i','t','i', 't', 't', 'i', 'i', 't', 't', 't'], ['i', 't', 't']));
// [4, 8]
console.log(getPatternPos(['a', 'b', 'a', 'b', 'b', 'a', 'b', 'c', 'd'], ['a', 'b', 'c']));
// [7]
console.log(getPatternPos("ababxabababcxxababc".split(""), "ababc".split("")));
// [11, 18]
console.log(getPatternPos("abababcx".split(""), "ababc".split("")));
.as-console-wrapper { max-height: 100% !important; top: 0; }
Finate automaton KMP implementation:
function getPatternPos(array, pattern) {
const result = [];
function patternCode(i) {
return pattern[i].charCodeAt(0);
}
function createStateMachine(pattern) {
// return single dimensional array as matrix instead of array of arrays,
// for better perfomanse (locality - cache optimizations) and memory usage.
// zero initialize matrix
const sm = Array.apply(null, Array(256 * pattern.length)).map(Number.prototype.valueOf, 0);
let s = 0;
sm[patternCode(0) * pattern.length + 0] = 1;
for (let i = 1; i < pattern.length; ++i) {
// go to same states as if we would go after backing up, so copy all
for (let code = 0; code < 256; ++code)
sm[code * pattern.length + i] = sm[code * pattern.length + s];
// only in case of current symbol go to different/next state
sm[patternCode(i) * pattern.length + i] = i + 1;
// update the state that fallows backup path
s = sm[patternCode(i) * pattern.length + s];
}
return sm;
}
const sm = createStateMachine(pattern);
numStates = pattern.length;
let s = 0;
// now simply fallow state machine
for (let i = 0; i < array.length; ++i) {
s = sm[array[i].charCodeAt(0) * numStates + s];
if (s === pattern.length) {
result.push(i);
s = 0;
}
}
return result;
}
console.log(getPatternPos(['i', 't', 't', 'i', 'i', 't', 't', 't'], ['i', 't', 't']));
// [2, 6]
console.log(getPatternPos(['i','t','i', 't', 't', 'i', 'i', 't', 't', 't'], ['i', 't', 't']));
// [4, 8]
console.log(getPatternPos(['a', 'b', 'a', 'b', 'b', 'a', 'b', 'c', 'd'], ['a', 'b', 'c']));
// [7]
console.log(getPatternPos("ababxabababcxxababc".split(""), "ababc".split("")));
// [11, 18]
console.log(getPatternPos("abababcx".split(""), "ababc".split("")));
.as-console-wrapper { max-height: 100% !important; top: 0; }
Funcational-ish KMP implementation:
function getPatternPos(array, pattern) {
// pure function that creates state machine,
// but it's implementation is not complitely pure internally.
function createStateMachine(pattern) {
const initState = Object.create(null);
initState[pattern[0]] = Object.create(initState);
const {currState: finalState} = pattern.slice(1).reduce(function(acc, cval, cidx) {
const newFallbackState = acc.fallbackState[cval] || initState;
// WARNING: non-functional/immutable part,
// to make it complitely pure we would probably need to
// complicate our lives with better data structures or
// lazy evalutaion.
acc.currState[cval] = Object.create(newFallbackState);
return {currState: acc.currState[cval], fallbackState: newFallbackState};
}, {currState: initState[pattern[0]], fallbackState: initState});
return {initState: initState, finalState: finalState};
}
const {initState, finalState} = createStateMachine(pattern);
return array.reduce(function (acc, cval, cidx, array) {
const newState = acc.currState[cval];
if (typeof newState === 'undefined') {
return {currState: initState, result: acc.result};
}
if (newState === finalState) {
// WARNING: not purly functional/immutable,
// still implemenations of JS pure functional/immutable libraries
// probaly use mutation under the hood, and just make it look pure,
// this is what happens here also :)
acc.result.push(cidx);
return {currState: initState, result: acc.result};
}
return {currState: newState, result: acc.result};
}, {currState: initState, result: []}).result;
}
console.log(getPatternPos(['i', 't', 't', 'i', 'i', 't', 't', 't'], ['i', 't', 't']));
// [2, 6]
console.log(getPatternPos(['i','t','i', 't', 't', 'i', 'i', 't', 't', 't'], ['i', 't', 't']));
// [4, 8]
console.log(getPatternPos(['a', 'b', 'a', 'b', 'b', 'a', 'b', 'c', 'd'], ['a', 'b', 'c']));
// [7]
console.log(getPatternPos("ababxabababcxxababc".split(""), "ababc".split("")));
// [11, 18]
console.log(getPatternPos("abababcx".split(""), "ababc".split("")));
.as-console-wrapper { max-height: 100% !important; top: 0; }

How do I easily combine elements from two arrays in Javascript, alternating elements?

I have two arrays in JavaScript, of potentially different lengths:
var x = ['a', 'b', 'c'];
var y = ['g', 'h', 'i', 'j'];
I'd like to combine them into one array:
var z = ['a', 'g', 'b', 'h', 'c', 'i', 'j'];
How can I do that in JavaScript?

I see you answered your question at the same time as asking it. That's fine, but it's now clear that you were looking for a solution that leverages a library (eg, lodash) and not necessarily one that teaches you how to build such a procedure. In retrospect, I would've answered this differently, but nevertheless I think you can learn something from this answer.
I would recommend calling this something other than zip just because zip is used as name for a procedure that does something quite different from what you're looking for.
Here's a simple recursive definition of interleave -
const interleave = ([ x, ...xs ], ys = []) =>
x === undefined
? ys // base: no x
: [ x, ...interleave (ys, xs) ] // inductive: some x
const xs = [ 'a', 'b', 'c' ]
const ys = [ 'g', 'h', 'i', 'j' ]
console .log (interleave (xs, ys))
// [ a, g, b, h, c, i, j ]
And another variation that supports any number of input arrays -
const interleave = ([ x, ...xs ], ...rest) =>
x === undefined
? rest.length === 0
? [] // base: no x, no rest
: interleave (...rest) // inductive: no x, some rest
: [ x, ...interleave (...rest, xs) ] // inductive: some x, some rest
const ws = [ '0', '1', '2', '3' ]
const xs = [ 'a', 'b', 'c' ]
const ys = [ 'd', 'e', 'f' ]
const zs = [ 'g', 'h', 'i', 'j' ]
console .log (interleave (ws, xs, ys, zs))
// [ 0, a, d, g, 1, b, e, h, 2, c, f, i, 3, j ]

tl;dr: z = _.flatten(_.zip(x, y)).filter(element => element), as long as you don't care about null elements in the original arrays.
Some of the libraries providing functional tools, such as Lodash, provide enough mechanics to easily do this. For example, you can do this:
var z1 = _.zip(x, y);
// z1 is now [["a","g"],["b","h"],["c","i"],[null,"j"]]
var z2 = _.flatten(z1);
// z2 is now ["a","g","b","h","c","i",null,"j"]
var z3 = z2.filter(element => element)
// z3 is now ["a","g","b","h","c","i","j"]
Note that this will only work if the original arrays do not contain any null elements, as they are filtered out by the last step.

A simple implementation that will stitch the arrays:
function stitch(x, y) {
var arr = [];
var length = Math.max(x.length, y.length);
for(var i = 0; i < length; i++) {
i < x.length && arr.push(x[i]);
i < y.length && arr.push(y[i]);
}
return arr;
}
var x = ['a', 'b', 'c'];
var y = ['g', 'h', 'i', 'j'];
console.log(stitch(x, y));

This is the functional way to address the problem:
var x = ['a', 'b', 'c'];
var y = ['g', 'h', 'i', 'j'];
function stitch(x,y) {
var a = x.length > y.length ? x : y;
var b = x.length > y.length ? y : x;
var c = a.map(function (e, i) {
return b.length<i ? [e, b[i]] : [];
});
return [].concat.apply([],c)
}

Here's a very simple recursive solution:
const interlace = (xxs, ys) => {
if (xxs.length === 0) return ys;
const [x, ...xs] = xxs;
return [x, ...interlace(ys, xs)];
};
const xs = ['a', 'b', 'c'];
const ys = ['g', 'h', 'i', 'j'];
console.log(JSON.stringify(interlace(xs, ys)));
In addition, you can easily generalize this algorithm to an arbitrary number of arrays:
const interlace = (...xss) => xss.length > 0 ? interleave(...xss) : [];
const interleave = (xxs, ...yss) => {
if (xxs.length === 0) return interlace(...yss);
const [x, ...xs] = xxs;
return [x, ...interleave(...yss, xs)];
};
const xs = ['a', 'b', 'c'];
const ys = ['g', 'h', 'i', 'j'];
const zs = ['d', 'e', 'f'];
console.log(JSON.stringify(interlace()));
console.log(JSON.stringify(interlace(xs)));
console.log(JSON.stringify(interlace(xs, ys)));
console.log(JSON.stringify(interlace(xs, ys, zs)));
Hope that helps.

This can be done in regular Javascript. No need for fancy tricks:
function splicer(array, element, index) {
array.splice(index * 2, 0, element);
return array;
}
function weave(array1, array2) {
return array1.reduce(splicer, array2.slice());
}
var x = ['a', 'b', 'c'];
var y = ['g', 'h', 'i', 'j'];
var z = weave(x, y);
console.log(z);

var x = ['a', 'b', 'c'];
var y = ['g', 'h', 'i', 'j'];
var z=[];
if(y.length>=x.length){
for(var i=0;i<x.length;i++){
z.push(x[i]);
z.push(y[i]);
}
while(i<y.length)
z.push(y[i++]);
}else{
for(var i=0;i<y.length;i++){
z.push(x[i]);
z.push(y[i]);
}
while(i<x.length)
z.push(x[i++]);
}
window.alert(JSON.stringify(z)); // print ["a","g","b","h","c","i","j"]

Javascript count duplicates and uniques and add to array

I'm trying to count duplicates in an array of dates and add them to a new array.
But i'm only getting the duplicates and the amount of times they exist in the array.
What I want is:
[a, a, b, c, c] => [a: 2, b: 1, c: 2]
Code:
$scope.result = { };
for(var i = 0; i < $scope.loginArray.length; ++i) {
if(! $scope.result[$scope.loginArray[i]]){
$scope.result[$scope.loginArray[i]] = 0;
++ $scope.result[$scope.loginArray[i]];}
}
Any suggestions?

You might need an object for this, not an array. So what you are doing is already great, but the if condition is messing up:
$scope.result = {};
for (var i = 0; i < $scope.loginArray.length; ++i) {
if (!$scope.result[$scope.loginArray[i]])
$scope.result[$scope.loginArray[i]] = 0;
++$scope.result[$scope.loginArray[i]];
}
Snippet
var a = ['a', 'a', 'b', 'c', 'c'];
var r = {};
for (var i = 0; i < a.length; ++i) {
if (!r[a[i]])
r[a[i]] = 0;
++r[a[i]];
}
console.log(r);
Or in better way, you can use .reduce like how others have given. A simple reduce function will be:
var a = ['a', 'a', 'b', 'c', 'c'];
var r = a.reduce(function(c, e) {
c[e] = (c[e] || 0) + 1;
return c;
}, {});
console.log(r);

For that, you can use .reduce:
var arr = ['a','a', 'b', 'c', 'c'];
var result = arr.reduce(function(p,c){
if(p[c] === undefined)
p[c] = 0;
p[c]++;
return p;
},{});
console.log(result);

You can use reduce and return object
var ar = ['a', 'a', 'b', 'c', 'c'];
var result = ar.reduce(function(r, e) {
r[e] = (r[e] || 0) + 1;
return r;
}, {});
console.log(result)
You can also first create Object and then use forEach add properties and increment values
var ar = ['a', 'a', 'b', 'c', 'c'], result = {}
ar.forEach(e => result[e] = (result[e] || 0)+1);
console.log(result)

lodash's countBy function will do the trick:
_.countBy(['a', 'a', 'b', 'c', 'c']) will evaluate to: {a: 2, b: 1, c: 2}
It does involve adding lodash as a dependency though.

I would do like this
var arr = ["a", "a", "b", "c", "c", "a"],
red = arr.reduce((p,c) => (p[c]++ || (p[c]=1),p),{});
console.log(red);

How to get all unique elements in for an array of array but keep max count of duplicates

The question doesn't make much sense but not sure how to word it without an example. If someone can word it better, feel free to edit it.
Let's say I have an array of arrays such as this:
[ ['a', 'a', 'b', 'c'], [], ['d', 'a'], ['b', 'b', 'b', 'e'] ]
I would like the output to be:
['a', 'a', 'b', 'b', 'b', 'c', 'd', 'e']
Not sure if there is an easy way to do this in javascript/jquery/underscore. One way I could think of is to look through each of these arrays and count up the number of times each element shows up and keep track of the maximum amount of times it shows up. Then I can recreate it. But that seems pretty slow considering that my arrays can be very large.

You need to:
Loop over each inner array and count the values
Store each value and its count (if higher than current count) in a counter variable
In the end, convert the value and counts into an array
Following code shows a rough outline of the process. Remember to replace .forEach and for..in with appropriate code:
var input = [['a', 'a', 'b', 'c'], [], ['d', 'a'], ['b', 'b', 'b', 'e']],
inputCount = {};
input.forEach(function(inner) {
var innerCount = {};
inner.forEach(function(value) {
innerCount[value] = innerCount[value] ? innerCount[value] + 1 : 1;
});
var value;
for (value in innerCount) {
inputCount[value] = inputCount[value] ? Math.max(inputCount[value], innerCount[value]) : innerCount[value];
}
});
console.log(inputCount);
// Object {a: 2, b: 3, c: 1, d: 1, e: 1}

After messing around, I found a solution but not sure if I like it enough to use. I would probably use it if I can't think of another one.
I would use underscorejs countBy to get the count of all the elements.
var array = [ ['a', 'a', 'b', 'c'], [], ['d', 'a'], ['b', 'b', 'b', 'e'] ];
var count = _.map(array, function(inner) {
return _.countBy(inner, function(element) {
return element;
});
});
var total = {};
_.each(_.uniq(_.flatten(array)), function(element) {
var max = _.max(count, function(countedElement) {
return countedElement[element];
});
total[element] = max[element];
});
console.log(total); // {a: 2, b: 3, c: 1, d: 1, e: 1}
Then I would recreate the array with that total.

Here is example of simple nested loop approach:
var input = [ ['a', 'a', 'b', 'c'], [], ['d', 'a'], ['b', 'b', 'b', 'e'] ];
var countMap = {};
// iterate outer array
for (i=0; i < input.length; i++) {
// iterate inner array
for (j=0; j < input[i].length; j++) {
// increment map counter
var value = input[i][j];
if (countMap[input[i][j]] === undefined) {
countMap[value] = 1;
} else {
countMap[value]++;
}
}
}
console.log(countMap); // output such as {'a':2, 'b':4, 'c':1, 'd':1, 'e':1}

Not the most efficient solution but it should describe you the process:
var big = [ ['a', 'a', 'b', 'c'], [], ['d', 'a'], ['b', 'b', 'b', 'e'] ];
function map(arr){
var map = {}
for (var i=arr.length-1; i>-1; i--){
if(arr[i] in map) map[arr[i]]++;
else map[arr[i]] = 1;
}
return map;
}
function reduce(matrix){
var arrMap = {};
for (var i=matrix.length-1; i>-1; i--){
var arrRes = map(matrix[i]);
for (var key in arrRes){
if( !arrMap[key] || arrMap[key] < arrRes[key])
arrMap[key] = arrRes[key];
}
}
return arrMap;
}
function calc(matrix){
var res = [],
arrMap = reduce(matrix);
for (var key in arrMap){
while(arrMap[key] > 0 ){
res.push(key);
arrMap[key]--;
}
}
return res;
}
console.log(calc(big));
// Array [ "e", "b", "b", "b", "a", "a", "d", "c" ]