¿Cómo convertir una array 2D en una string de valores separados por comas (CSV) en JavaScript?

Dada una array 2D, tenemos que convertirla en una string de valores separados por comas (CSV) usando JS.

Input:
[ [ "a" , "b"] , [ "c" ,"d" ] ]
Output:
"a,b 
 c,d"
Input:
[ [ "1", "2"]
["3", "4"]
["5", "6"] ]
Output:
"1,2
3,4
5,6"

Para lograr esto, debemos conocer algunas funciones prototipo de array que serán de gran ayuda en este sentido:

Función de unión : La función Array.prototype.join() se usa para unir todas las strings en una array con un carácter/string.

Ejemplo:

[ "a","b"].join( ",") will result in : "a,b"

Función de mapa: Array.prototype.map() devuelve una nueva array con los resultados de llamar a una función que proporcionamos, en cada elemento.

Ejemplo:

arr= ["a","b"]

// Adding "c" to each element
newArray = arr.map( item => item + "c") 
value of newArray = ["ac", "bc"]

Enfoque: Usaremos la función map y la función join para combinar cada fila 1D en una string con la separación de una coma. y luego une todas las strings individuales con «\n», usando la función de unión.

Ejemplo:

<script>
// Create CSV file data in an array  
var array2D = [ 
                [ "a" , "2"] ,
                [ "c" ,"d" ] 
              ];
  
// Use map function to traverse on each row
var csv = array2D
  .map((item) => {
    
    // Here item refers to a row in that 2D array
    var row = item;
      
    // Now join the elements of row with "," using join function
    return row.join(",");
  }) // At this point we have an array of strings
  .join("\n");
    
  // Join the array of strings with "\n"
console.log(csv);
</script>

Producción:

a,2
c,d

Explicación: Primero usamos la función map en la array 2D para recorrer cada fila, luego usamos la función join para unir la array de elementos en esa fila usando una coma. A continuación, esa función de mapa devuelve una array de strings, que unimos usando «\n». Lo que resulta en una string CSV.

Enfoque alternativo: incluso podemos usar bucles for para atravesar la array, en lugar de un mapa.

Ejemplo:

<script>
var csv="";
create CSV file data in an array  
var array2D = [ 
                [ "a" , "2"] ,
                [ "c" ,"d" ] 
              ];
  
for (var index1 in array2D) {
  var row = array2D[index1];
    
  // Row is the row of array at index "index1"
  var string = "";
    
  // Empty string which will be added later
  for (var index in row) {
    // Traversing each element in the row
    var w = row[index];
      
    // Adding the element at index "index" to the string
    string += w;
    if (index != row.length - 1) {
      string += ",";
      // If the element is not the last element , then add a comma
    }
  }
  string += "\n";
    
  // Adding next line at the end
  csv += string;
  // adding the string to the final string "csv"
}
console.log(csv);
</script>

Output:
a,2
c,d