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

Layui implements the login interface verification code

This article example shares the specific code of ...

Vue complete code to implement single sign-on control

Here is a Vue single sign-on demo for your refere...

Vue implements 3 ways to switch tabs and switch to maintain data status

3 ways to implement tab switching in Vue 1. v-sho...

MYSQL string forced conversion method example

Preface Since the types of the same fields in the...

CocosCreator classic entry project flappybird

Table of contents Development Environment Game en...

MySQL 8.0.16 installation and configuration tutorial under CentOS7

Uninstall the old version of MySQL (skip this ste...

Example code for using text-align and margin: 0 auto to center in CSS

Use text-align, margin: 0 auto to center in CSS W...

MySQL Basic Tutorial: Detailed Explanation of DML Statements

Table of contents DML statements 1. Insert record...

Native JS to achieve draggable login box

This article shares a draggable login box impleme...

Detailed steps for using AES.js in Vue

Use of AES encryption Data transmission encryptio...

Summary of the differences between Vue's watch, computed, and methods

Table of contents 1 Introduction 2 Basic usage 2....

How to achieve centered layout in CSS layout

1. Set the parent container to a table and the ch...

Core skills that web front-end development engineers need to master

The content involved in Web front-end development...

HTML exceeds the text line interception implementation principle and code

The HTML code for intercepting text beyond multipl...

CentOS6 upgrade glibc operation steps

Table of contents background Compile glibc 2.14 M...