Detailed explanation of several methods of JS array dimensionality reduction

Detailed explanation of several methods of JS array dimensionality reduction

Dimensionality reduction of two-dimensional array

Dimensionality reduction using array instance method concat and ES6 spread operator

let arr=[1,2,[3,4],5];
let arr1=[].concat(...arr);
//First use the spread operator to break up the outermost array. concat has its own function to break up the glued arrays. console.log(arr1);
// [1, 2, 3, 4, 5]

//Compatibility with ES6 before using apply to break up data var arr2=[1,2,[3,4],5];
var arr3=[].concat.apply([],arr2);
console.log(arr3);
// [1, 2, 3, 4, 5]

Dimensionality reduction of multidimensional arrays

Recursive Dimensionality Reduction

//Several ways to use array function recursive dimensionality reduction //some&concat
//Use some to check if the array contains an array and then call itself to reduce the dimension function fun(arr){
  arr = [].concat (...arr); 
  // Check if the reduced array still contains sub-arrays let hasArray = arr.some(function(elem){
      return Array.isArray(elem);
  })
  if(hasArray){ //If it contains a subarray arr=fun(arr); //Then it can only reduce the dimension once more until it is checked that it no longer contains a subarray}
    return arr;
};

//forEach&instanceof
//Judge each element of the array to see if the array is continuing to call itself, rather than putting it into the empty array prepared in advance function fun2(arr){
  let ret = [];
  let toArr = function(arr){
    arr.forEach(function(item){
      item instanceof Array ? toArr(item) : ret.push(item);
    });
  }
  toArr(arr);
  return ret;
}

//reduce&concat
//Finally prepare an empty array and check if each item in the passed array is an array. If it is, call itself again. If not, use concat to summarize it into an empty array. function fun3(sarr){
    return sarr.reduce((pre,val)=>{
        return Array.isArray(val) ? pre.concat(fun3(val)): pre.concat(val)
    },[])
}

Array.prototype.flat()

ES10 adds Array.prototype.flat(), which is used to break up nested arrays into one-dimensional arrays. This method returns a new array and has no effect on the original data.

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
 
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
 
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
 
//Use Infinity as the depth to expand nested arrays of arbitrary depth arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

This concludes this article on several methods of JS array dimensionality reduction. For more relevant JS array dimensionality reduction content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • 5 most comprehensive methods of reducing the dimension of arrays in js (summary)
  • Implementation of JS array dimensionality reduction Array.prototype.concat.apply([], arr)
  • Detailed explanation of array dimensionality reduction in JavaScript

<<:  Summary of Problems in Installation and Usage of MySQL 5.7.19 Winx64 ZIP Archive

>>:  How to use cutecom for serial communication in Ubuntu virtual machine

Recommend

Detailed explanation of the execution process of MySQL query statements

Table of contents 1. Communication method between...

The core process of nodejs processing tcp connection

A few days ago, I exchanged some knowledge about ...

The principle and basic use of Vue.use() in Vue

Table of contents Preface 1. Understanding with e...

How to use echarts to visualize components in Vue

echarts component official website address: https...

How Web Designers Create Images for Retina Display Devices

Special statement: This article is translated bas...

Application examples of WeChat applet virtual list

Table of contents Preface What is a virtual list?...

An article to help you learn more about JavaScript arrays

Table of contents 1. The role of array: 2. Defini...

Summary of Binlog usage of MySQL database (must read)

I won't go into details about how important b...

A mobile adaptive web page effect solves the problem of small display page

For work needs, I need to make a mobile phone adap...

Development details of Vue3 components

Table of contents 1. Introduction 2. Component De...

Installing Win10 system on VMware workstation 14 pro

This article introduces how to install the system...

Steps and pitfalls of upgrading linux mysql5.5 to mysql5.7

Table of contents Linux MySQL 5.5 upgraded to MyS...

Linux ssh server configuration code example

Use the following terminal command to install the...

Vue uses vue-quill-editor rich text editor and uploads pictures to the server

Table of contents 1. Preparation 2. Define the gl...

Pitfalls and solutions for upgrading MySQL 5.7.23 in CentOS 7

Preface Recently, I found a pitfall in upgrading ...