What is array flattening

  1. Flat, as the name implies, is to reduce the complexity of decoration, make its things itself more concise, simple, highlight the theme.
  2. Array flattening is the process of converting a complex array of nested layers, layer by layer, into an array with fewer or only one level.

Ps: flatten can flatten an array, and the effect will look like this:

const arr = [1[2[3.4]]];
console.log(flatten(arr)); // [1, 2, 3, 4]
Copy the code

As you can see, the array processed by flatten has only one layer, which we will try to implement.

Two, simple implementation

2.1 Ordinary recursion

  • This is the easiest way to think, simple and clear!
/* ES6 */
const flatten = (arr) = > {
  let result = [];
  arr.forEach((item, i, arr) = > {
    if (Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result.push(arr[i])
    }
  })
  return result;
};

const arr = [1[2[3.4]]];
console.log(flatten(arr));
Copy the code
/* ES5 */
function flatten(arr) {
  var result = [];
  for (var i = 0, len = arr.length; i < len; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]))
    }
    else {
      result.push(arr[i])
    }
  }
  return result;
}

const arr = [1[2[3.4]]];
console.log(flatten(arr));
Copy the code

2.2 toString()

  • The method is utilizedtoStringTurn the array into a comma-separated string, then iterate through the array to change each item back to its original type.

So how does toString turn an array into a string

[1[2.3[4]]].toString()
/ / "1, 2, 3, 4"
Copy the code

Full display

/* ES6 */
const flatten = (arr) = > arr.toString().split(', ').map((item) = > +item);

const arr = [1[2[3.4]]];
console.log(flatten(arr));
Copy the code
/* ES5 */
function flatten(arr) {
  return arr.toString().split(', ').map(function(item){
    return +item;
  });
}

const arr = [1[2[3.4]]];
console.log(flatten(arr));
Copy the code

This approach uses a very limited set of scenarios, where all the elements in the array must be numbers. Can also be all String, concrete implementation of your own experience.

2.3 [].concat.apply + some

  • usingarr.someLoop to determine if there is still an array in the arrayflattenFlat function (using[].concat.applyFlat), useconcatConnect, and eventually returnarr;
/* ES6 */
const flatten = (arr) = > {
  while (arr.some(item= > Array.isArray(item))){
    arr = [].concat.apply([], arr);
  }
  return arr;
}

const arr = [1[2[3.4]]];
console.log(flatten(arr));
Copy the code
/* ES5 */
/** * wrap array. some * @param {function} callback - callback * @param {any} currentThis - callback */
Array.prototype.some = function (callback, currentThis){
  let context = this;
  let flag = false;
  currentThis = currentThis || this;
  for (var i = 0, len = context.length; i < len; i++) {
    const res = callback.call(currentThis, context[i], i, context);
    if (res) {
      flag = true;
    } else if(! flag) { flag =false; }}return flag;
}

function flatten(arr){
  while(arr.some(item= > Array.isArray(item))){
    arr = [].concat.apply([], arr);
  }
  return arr;
}

const arr = [1[2[3.4]]];
console.log(flatten(arr));
Copy the code

2.4 reduce

  • reduceIs itself an iterative circulator, usually used for accumulation, so according to this feature has the following:
function flatten(arr){
  return arr.reduce(function(prev, cur){
    return prev.concat(Array.isArray(cur) ? flatten(cur) : cur)
  }, [])
}

const arr = [1[2[3.4]]];
console.log(flatten(arr));
Copy the code

2.5 Deconstruction operators in ES6.

  • .Only the outermost array can be expanded at a time, by[].concatLater,arrJust flatten it once.
function flatten(arr){
  while(arr.some(item= > Array.isArray(item))){ arr = [].concat(... arr); }return arr;
}

const arr = [1[2[3.4]]];
console.log(flatten(arr));
Copy the code

I will explain it to youlodash 中 flattenImplementation of the source code, thank you for reading!