Stack your way to flattening an array

Question

Stack your way to flattening an array

I have been experimenting with flattening an array using an iterative approach, incorporating a stack-like structure. My goal is to flatten the array up to a certain depth for the sake of learning and exploration.

Here is what I have come up with so far:

function flattenArray(arr, depth = 1) {

    let flattened = [];
    let index = 0;

    let currentDepth = depth;

    for (let element of arr) {
        flattened.push(element);
        currentDepth = depth;

        while(index < flattened.length) {
            if (Array.isArray(flattened[index]) && currentDepth !== 0) {
                flattened.splice(index, 1, ...flattened[index]);
                currentDepth--;

            } else {
                index++;
            }
        }


    }

    return flattened;
}

However, I encountered an issue when trying to flatten a nested level such as [[3], 4, [5, [6]] because it gets stuck at the depth of '3' without reversing back.

Is there a simple adjustment that can be made to address this issue?

The original array I used was

flattenArray([[1],2,[[3], 'ddd', [4,[5]]]], 2)

, where my expected output would be [1,2,3,'ddd',4, [5]].

The same issue persists even when implementing this using a traditional stack method.

javascript arrays

Answer 1

Answer №1

If you utilize the concat and reduce methods, achieving a clean solution is possible:

const flatten = (array, depth) => {
  if(!depth) return array;
  while(depth > 0) {
    array = array.reduce((pre, curr) => pre.concat(curr), []);
    depth--;
  }
  return array;
}

const flat = flatten([1, 2, ['a', 3], [4, [6, 4]], 3, [1, 3], [[['a', 2], 2, 'b'], 'c', 3], 4], 2);
console.log(flat)

The function iterates over the array depth times. During each iteration, it uses concat to combine each element from the previous array into a new array. The key concept here is that concat has two modes of operation:

When given a non-array parameter, it simply adds the element to the original array.
When given an array parameter, it appends every element in the provided array onto the original one.

Essentially, the essence of "flattening" is already encapsulated in concat itself; all that's left is to repeat that process depth times.

Answer 2

If you utilize the concat and reduce methods, achieving a clean solution is possible:

const flatten = (array, depth) => {
  if(!depth) return array;
  while(depth > 0) {
    array = array.reduce((pre, curr) => pre.concat(curr), []);
    depth--;
  }
  return array;
}

const flat = flatten([1, 2, ['a', 3], [4, [6, 4]], 3, [1, 3], [[['a', 2], 2, 'b'], 'c', 3], 4], 2);
console.log(flat)

The function iterates over the array depth times. During each iteration, it uses concat to combine each element from the previous array into a new array. The key concept here is that concat has two modes of operation:

When given a non-array parameter, it simply adds the element to the original array.
When given an array parameter, it appends every element in the provided array onto the original one.

Essentially, the essence of "flattening" is already encapsulated in concat itself; all that's left is to repeat that process depth times.

Stack your way to flattening an array

Answer №1

Similar questions

Putting text file characters into an array

What is the process for including jQuery js files in a React application?

An elementary glossary outline made with jQuery

Sharing JSON data between two Backbone views

Error: Unable to assign values to undefined properties (specifically 'styles') when using withLess, withSass, or withCSS in next.config.js within Next.js

I am looking to utilize React and Next.js to map my array from an object. The component is a function employing hooks

EaselJS BitmapAnimation has delay when using gotoAndPlay

Exploring the power of jQuery's deferred method and utilizing the ajax beforeSend

Tips for accessing a web service using JavaScript (AJAX)

When attempting to open a link in a new tab, the ng-click function fails to execute

ReactJs - Organize your data with the sort method

What is the best method to retrieve the current time in minutes using the Timer component?

`Node.js encountering issues with undefined JSON Array values`

Is there a way to create a slider within the card deck group using Bootstrap Vue?

"Revamp the appearance of the div element upon clicking elsewhere on the

What is the best way to arrange a GeoJSON features array based on a specific property value?

Adding a JavaScript variable into a Django template tag

Refresh and maintain the default dates in the datepicker

What are some techniques for creating a volumetric appearance with THREE.Mesh in WebVR?

The Name 'require' could not be found (TS2304)