¿Cómo aplanar una array con JavaScript/jQuery?

JavaScript contiene muchas arrays (o arrays bidimensionales) y la tarea es aplanar la array y hacer que se vea como una array JavaScript bidimensional. Hay dos enfoques que se analizan a continuación. También puede usar Underscore.js _.flatten() con Examples .

Enfoque 1: utilice el método Array.prototype.concat.apply() para realizar la operación. El método concat() y apply() se usa para concatenar las arrays en una array 1-d.

Ejemplo:

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to flatten array with
        the JavaScript?
    </title>
      
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
      
    <p id="GFG_UP"></p>
      
    <button onClick="GFG_Fun()">
        click here
    </button>
      
    <p id="GFG_DOWN"></p>
      
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var arr1 = [1, 2, 3];
        var arr2 = [4, 5, 6, 7];
        var arr = [arr1, arr2, 8, 9];
          
        up.innerHTML = "Click on button to get "
                + "the common elements from these"
                + " array <br>Array -[[" + arr[0]
                + "], [" + arr[1] + "], " + arr[2]
                + ", " + arr[3] + "]";
  
        function GFG_Fun() {
            down.innerHTML = 
                Array.prototype.concat.apply([], arr);
        }
    </script>
</body>
  
</html>

Producción:

Enfoque 2: el método $.map() en jQuery se puede usar para realizar la operación. Este método toma la array y un método como entrada. El segundo argumento, que es un método, toma elementos de la array original uno por uno y devuelve sus elementos.

Ejemplo:

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to flatten array with
        the JavaScript?
    </title>
      
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
      
    <p id="GFG_UP"></p>
      
    <button onClick="GFG_Fun()">
        click here
    </button>
      
    <p id="GFG_DOWN"></p>
      
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var arr1 = [1, 2, 3];
        var arr2 = [4, 5, 6, 7];
        var arr = [arr1, arr2, 8, 9];
          
        up.innerHTML = "Click on button to get the"
                + " common elements from these array"
                + "<br>Array - [[" + arr[0] + "], ["
                + arr[1] + "], " + arr[2] + ", " 
                + arr[3] + "]";
  
        function GFG_Fun() {
            down.innerHTML = $.map(arr, function(n) {
                return n;
            });
        }
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta