Converting a multidimensional array to a one-dimensional array (various ways to reduce dimensionality)

I have encountered a problem many times in business scenarios or when scrolling LeetCode:

• How do I convert a two-dimensional or even multidimensional array into a one-dimensional array?

Talking about turning multidimensional into one-dimensional, suddenly a word comes to mind called “dimensionality reduction strike”. The following method is called “dimensionality reduction” to divide two-dimensional or even multidimensional into one-dimensional arrays.

This article will discuss the methods of downconversion with you

Let’s start with an easy one:

• How can a two-dimensional array be degraded to a one-dimensional array?

Most of the time, our array level is not that deep, just a two-dimensional array, so we can see some quick ways to use it.

Reduce () two dimensions and one dimension

const oldArr = [1.2[3.4]].const newArr = oldArr.reduce((prev, curr) = > (prev.concat(curr)), []);

console.log(newArr);
// [1, 2, 3, 4]
Copy the code

Concat () two dimensions will be one

const oldArr = [1.2[3.4]].constnewArr = [].concat(... oldArr);const newnewArr = Array.prototype.concat.apply([], oldArr);

console.log(newArr);
// [1, 2, 3, 4]
console.log(newnewArr);
// [1, 2, 3, 4]
Copy the code

Flat () two dimensions down one dimension

const oldArr = [1.2[3.4]].const newArr = oldArr.flat();

console.log(newArr);
// [1, 2, 3, 4]
Copy the code

Since the two-dimensional reduced one-dimensional friends have seen, we can further understand the multidimensional reduced one-dimensional array.

So let’s look at recursively reducing dimension.

There are two approaches to recursive dimensionality reduction:

• forEachrecursive
• reducerecursive

The following analysis:

ForEach recursively reduces dimension

const oldArr = [
  1[2[3],
    [4.5.6],
    [7.8.9].10.11,].12.13.14[15.16.17]];const newArr = [];

const ergodic = (arr) = > {
  arr.forEach((item) = > {
    if (Array.isArray(item)) {
      ergodic(item);
    } else {
      newArr.push(item);
    }
  })
}

ergodic(oldArr, newArr);

console.log(newArr);
/ / [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
Copy the code

Array.isarray () is used to determine whether the value passed is an Array, returning true or false.

In this recursive method, we determine whether each item is an array.

If it is, it recurses further until it is not.

If not, it is received with a new array.

Reduce Recursive dimension reduction

const oldArr = [
  1[2[3],
    [4.5.6],
    [7.8.9].10.11].12.13.14[15.16.17]];const ergodic = (arr) = > arr.reduce((prev, curr, index, list) = > {
  if (Array.isArray(curr)) {
    returnprev.concat(... ergodic(curr)); }returnprev.concat(curr); } []);const newArr = ergodic(oldArr);

console.log(newArr);
/ / [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
Copy the code

• Question: PleasereduceWhat do the four parameters represent?

Flat () is a method provided by ES6 for “flattening” nested arrays.

Flat dimension reduction

const oldArr = [
  1[2[3],
    [4.5.6],
    [7.8.9].10.11].12.13.14[15.16.17]];const newArr = oldArr.flat(Infinity);

console.log(newArr);
/ / [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
Copy the code

For flat(), see MDN:

• Developer.mozilla.org/zh-CN/docs/…

Or check out Ruan Yifeng’s ES6 explanation:

• Es6.ruanyifeng.com/?search= one-dimensional &…

Here’s an overview of the method:

• The arguments:

Arr. Flat (the depth).

B: It’s at a depth of a few layers.

// Two dimensional array: default flat layer
[1.2[3.4[5]]].flat();
// [1, 2, 3, 4, [5]]

// Four dimensional array: set to flatten two layers
[1.2[3.4[5[6.7]]]].flat(2);
// [1, 2, 3, 4, 5, [6, 7]]

// Set leveling all layers
[1.2[3.4[5]]].flat(Infinity);
// [1, 2, 3, 4, 5]
Copy the code

• Matters needing attention:

Note that flat() removes empty items from the array:

[1.2.4.5].flat();
// [1, 2, 4, 5]
Copy the code

• Expand understanding:

While you’re at ease with flat(), what about its cousin flatMap()?

• Ruan Yifeng – flatMap: es6.ruanyifeng.com/?search= One-dimensional &…
• Mdn-flatmap: developer.mozilla.org/zh-CN/docs/…

The flatMap() method first maps each element using a mapping function and then compresses the result into a new array.

Here is not an introduction, interested can understand.

Use flatMap ()

const arr = [1.2.3.4];

arr.flatMap(x= > x * 2);
// [2, 4, 6, 8]

arr.flatMap(x= > [[x * 2]])
[[2], [4], [6], [8]]
Copy the code

Hats off to those who are constantly exploring the front end of the road. This article is from:

1. JavaScript Learning Notes – Multidimensional Arrays become one-dimensional arrays – MADAO will not blossom
2. Es6 –javascript array dimension reduction, from ES5 analysis to ES6, (detailed reduce method) welcome to add “- program meow timy
3. “Array Instance – Flat, flatMap” – Ruan Yifeng
4. The Array. The prototype. Flat () – MDN

Jsliang advertising push: maybe partners want to know about the cloud server or partners want to buy a cloud server or partners need to renew the cloud server welcome to click on the cloud server promotion view!

Jsliang document library 由 Liang JunrongusingCreative Commons Attribution – Non-commercial Use – Same way Share 4.0 International LicenseGrant permission.

Based on theGithub.com/LiangJunron…On the creation of works.

Use rights other than those authorized by this License agreement may be obtained fromCreativecommons.org/licenses/by…Obtained.