Ho un array JavaScript come:

[["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"]]

Come farei per fondere le matrici interne separate in una come:

["$6", "$12", "$25", ...]

È possibile utilizzare concatper unire le matrici:

var arrays = [
  ["$6"],
  ["$12"],
  ["$25"],
  ["$25"],
  ["$18"],
  ["$22"],
  ["$10"]
];
var merged = [].concat.apply([], arrays);

console.log(merged);

Utilizzando il applymetodo di concatprenderai semplicemente il secondo parametro come un array, quindi l'ultima riga è identica a questa:

var merged2 = [].concat(["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"]);

Esiste anche il Array.prototype.flat()metodo (introdotto in ES2019) che è possibile utilizzare per appiattire le matrici, sebbene sia disponibile solo in Node.js a partire dalla versione 11 e non in Internet Explorer .

const arrays = [
      ["$6"],
      ["$12"],
      ["$25"],
      ["$25"],
      ["$18"],
      ["$22"],
      ["$10"]
    ];
const merge3 = arrays.flat(1); //The depth level specifying how deep a nested array structure should be flattened. Defaults to 1.
console.log(merge3);
    

Ecco una breve funzione che utilizza alcuni dei più recenti metodi di array JavaScript per appiattire un array n-dimensionale.

function flatten(arr) {
  return arr.reduce(function (flat, toFlatten) {
    return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
  }, []);
}

Uso:

flatten([[1, 2, 3], [4, 5]]); // [1, 2, 3, 4, 5]
flatten([[[1, [1.1]], 2, 3], [4, 5]]); // [1, 1.1, 2, 3, 4, 5]

Esiste un metodo confusamente nascosto, che costruisce un nuovo array senza mutare quello originale:

var oldArray = [[1],[2,3],[4]];
var newArray = Array.prototype.concat.apply([], oldArray);
console.log(newArray); // [ 1, 2, 3, 4 ]

Può essere fatto meglio con la funzione di riduzione javascript.

var arrays = [["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"], ["$0"], ["$15"],["$3"], ["$75"], ["$5"], ["$100"], ["$7"], ["$3"], ["$75"], ["$5"]];

arrays = arrays.reduce(function(a, b){
     return a.concat(b);
}, []);

Oppure, con ES2015:

arrays = arrays.reduce((a, b) => a.concat(b), []);

js-violino

Documenti Mozilla

C'è un nuovo metodo nativo chiamato flat per fare esattamente questo.

(A partire dalla fine del 2019, flatè ora pubblicato nello standard ECMA 2019 e core-js@3(la biblioteca di babel) lo include nella loro libreria polyfill )

const arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

// Flatten 2 levels deep
const arr3 = [2, 2, 5, [5, [5, [6]], 7]];
arr3.flat(2);
// [2, 2, 5, 5, 5, [6], 7];

// Flatten all levels
const arr4 = [2, 2, 5, [5, [5, [6]], 7]];
arr4.flat(Infinity);
// [2, 2, 5, 5, 5, 6, 7];

La maggior parte delle risposte qui non funziona su matrici enormi (ad esempio 200000 elementi) e, anche se lo fanno, sono lente. La risposta di polkovnikov.ph ha le migliori prestazioni, ma non funziona per l'appiattimento profondo.

Ecco la soluzione più veloce, che funziona anche su array con più livelli di annidamento :

const flatten = function(arr, result = []) {
  for (let i = 0, length = arr.length; i < length; i++) {
    const value = arr[i];
    if (Array.isArray(value)) {
      flatten(value, result);
    } else {
      result.push(value);
    }
  }
  return result;
};

Esempi

Matrici enormi

flatten(Array(200000).fill([1]));

Gestisce enormi array proprio bene. Sulla mia macchina questo codice impiega circa 14 ms per essere eseguito.

Matrici nidificate

flatten(Array(2).fill(Array(2).fill(Array(2).fill([1]))));

Funziona con array nidificati. Questo codice produce [1, 1, 1, 1, 1, 1, 1, 1].

Matrici con diversi livelli di nidificazione

flatten([1, [1], [[1]]]);

Non ha problemi con appiattimenti di array come questo.

Aggiornamento: si è scoperto che questa soluzione non funziona con array di grandi dimensioni. Se stai cercando una soluzione migliore e più veloce, dai un'occhiata a questa risposta .

function flatten(arr) {
  return [].concat(...arr)
}

Si espande arre lo passa semplicemente come argomenti a concat(), che unisce tutti gli array in uno solo. È equivalente a [].concat.apply([], arr).

Puoi anche provare questo per l'appiattimento profondo:

function deepFlatten(arr) {
  return flatten(           // return shalowly flattened array
    arr.map(x=>             // with each x in array
      Array.isArray(x)      // is x an array?
        ? deepFlatten(x)    // if yes, return deeply flattened x
        : x                 // if no, return just x
    )
  )
}

Guarda la demo su JSBin .

Riferimenti per ECMAScript 6 elementi utilizzati in questa risposta:

• Operatore di diffusione
• Funzioni freccia

Nota a margine: i metodi come find()e le funzioni freccia non sono supportati da tutti i browser, ma ciò non significa che al momento non è possibile utilizzare queste funzionalità. Usa Babel : trasforma il codice ES6 in ES5.

Puoi usare Underscore :

var x = [[1], [2], [3, 4]];

_.flatten(x); // => [1, 2, 3, 4]

Le procedure generiche indicano che non è necessario riscrivere la complessità ogni volta che è necessario utilizzare un comportamento specifico.

concatMap (o flatMap ) è esattamente ciò di cui abbiamo bisogno in questa situazione.

// concat :: ([a],[a]) -> [a]
const concat = (xs,ys) =>
  xs.concat (ys)

// concatMap :: (a -> [b]) -> [a] -> [b]
const concatMap = f => xs =>
  xs.map(f).reduce(concat, [])

// id :: a -> a
const id = x =>
  x

// flatten :: [[a]] -> [a]
const flatten =
  concatMap (id)

// your sample data
const data =
  [["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"]]

console.log (flatten (data))

lungimiranza

E sì, l'hai indovinato correttamente, si appiattisce solo un livello, ed è esattamente come dovrebbe funzionare

Immagina alcuni set di dati come questo

// Player :: (String, Number) -> Player
const Player = (name,number) =>
  [ name, number ]

// team :: ( . Player) -> Team
const Team = (...players) =>
  players

// Game :: (Team, Team) -> Game
const Game = (teamA, teamB) =>
  [ teamA, teamB ]

// sample data
const teamA =
  Team (Player ('bob', 5), Player ('alice', 6))

const teamB =
  Team (Player ('ricky', 4), Player ('julian', 2))

const game =
  Game (teamA, teamB)

console.log (game)
// [ [ [ 'bob', 5 ], [ 'alice', 6 ] ],
//   [ [ 'ricky', 4 ], [ 'julian', 2 ] ] ]

Ok, ora diciamo che vogliamo stampare un elenco che mostra tutti i giocatori a cui parteciperanno game ...

const gamePlayers = game =>
  flatten (game)

gamePlayers (game)
// => [ [ 'bob', 5 ], [ 'alice', 6 ], [ 'ricky', 4 ], [ 'julian', 2 ] ]

Se nostro flatten procedura appiattisse le matrici nidificate, finiremmo con questo risultato spazzatura ...

const gamePlayers = game =>
  badGenericFlatten(game)

gamePlayers (game)
// => [ 'bob', 5, 'alice', 6, 'ricky', 4, 'julian', 2 ]

rotolando in profondità, piccola

Questo non vuol dire che a volte non si desidera appiattire anche le matrici nidificate - solo che non dovrebbe essere il comportamento predefinito.

Possiamo fare una deepFlattenprocedura con facilità ...

// concat :: ([a],[a]) -> [a]
const concat = (xs,ys) =>
  xs.concat (ys)

// concatMap :: (a -> [b]) -> [a] -> [b]
const concatMap = f => xs =>
  xs.map(f).reduce(concat, [])

// id :: a -> a
const id = x =>
  x

// flatten :: [[a]] -> [a]
const flatten =
  concatMap (id)

// deepFlatten :: [[a]] -> [a]
const deepFlatten =
  concatMap (x =>
    Array.isArray (x) ? deepFlatten (x) : x)

// your sample data
const data =
  [0, [1, [2, [3, [4, 5], 6]]], [7, [8]], 9]

console.log (flatten (data))
// [ 0, 1, [ 2, [ 3, [ 4, 5 ], 6 ] ], 7, [ 8 ], 9 ]

console.log (deepFlatten (data))
// [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Là. Ora hai uno strumento per ogni lavoro: uno per schiacciare un livello di annidamento,flatten e uno per cancellare tutto l'annidamento deepFlatten.

Forse puoi chiamarlo obliterateo nukese non ti piace il nome deepFlatten.

Non ripetere due volte!

Naturalmente le implementazioni di cui sopra sono intelligenti e concise, ma usando a .map seguito da una chiamata .reducesignifica che stiamo effettivamente facendo più iterazioni del necessario

Usando un fidato combinatore che sto chiamando mapReduceaiuta a mantenere le iterazioni su un minimo; prende una funzione di mappatura m :: a -> b, una funzione di riduzione r :: (b,a) ->be restituisce una nuova funzione di riduzione: questo combinatore è al centro dei trasduttori ; se sei interessato, ho scritto altre risposte su di loro

// mapReduce = (a -> b, (b,a) -> b, (b,a) -> b)
const mapReduce = (m,r) =>
  (acc,x) => r (acc, m (x))

// concatMap :: (a -> [b]) -> [a] -> [b]
const concatMap = f => xs =>
  xs.reduce (mapReduce (f, concat), [])

// concat :: ([a],[a]) -> [a]
const concat = (xs,ys) =>
  xs.concat (ys)

// id :: a -> a
const id = x =>
  x

// flatten :: [[a]] -> [a]
const flatten =
  concatMap (id)
  
// deepFlatten :: [[a]] -> [a]
const deepFlatten =
  concatMap (x =>
    Array.isArray (x) ? deepFlatten (x) : x)

// your sample data
const data =
  [ [ [ 1, 2 ],
      [ 3, 4 ] ],
    [ [ 5, 6 ],
      [ 7, 8 ] ] ]

console.log (flatten (data))
// [ [ 1. 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ] ]

console.log (deepFlatten (data))
// [ 1, 2, 3, 4, 5, 6, 7, 8 ]

Una soluzione per il caso più generale, quando potresti avere alcuni elementi non array nel tuo array.

function flattenArrayOfArrays(a, r){
    if(!r){ r = []}
    for(var i=0; i<a.length; i++){
        if(a[i].constructor == Array){
            r.concat(flattenArrayOfArrays(a[i], r));
        }else{
            r.push(a[i]);
        }
    }
    return r;
}

Per appiattire una matrice di matrici a singolo elemento, non è necessario importare una libreria, un semplice ciclo è il più semplice ed efficiente soluzione :

for (var i = 0; i < a.length; i++) {
  a[i] = a[i][0];
}

Ai votanti: leggi la domanda, non votare perché non si adatta al tuo problema molto diverso. Questa soluzione è sia la più veloce sia la più semplice per la domanda posta.

Che ne dici di usare il reduce(callback[, initialValue])metodo diJavaScript 1.8

list.reduce((p,n) => p.concat(n),[]);

Farebbe il lavoro.

Un'altra soluzione ECMAScript 6 in stile funzionale:

Dichiara una funzione:

const flatten = arr => arr.reduce(
  (a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
);

e usalo:

flatten( [1, [2,3], [4,[5,[6]]]] ) // -> [1,2,3,4,5,6]

 const flatten = arr => arr.reduce(
         (a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
       );


console.log( flatten([1, [2,3], [4,[5],[6,[7,8,9],10],11],[12],13]) )

Considera anche una funzione nativa Array.prototype.flat () (proposta per ES6) disponibile nelle ultime versioni dei browser moderni.Grazie a @ (Константин Ван) e @ (Mark Amery) lo hanno menzionato nei commenti.

La flatfunzione ha un parametro, che specifica la profondità prevista dell'annidamento dell'array, che è uguale 1per impostazione predefinita.

[1, 2, [3, 4]].flat();                  // -> [1, 2, 3, 4]

[1, 2, [3, 4, [5, 6]]].flat();          // -> [1, 2, 3, 4, [5, 6]]

[1, 2, [3, 4, [5, 6]]].flat(2);         // -> [1, 2, 3, 4, 5, 6]

[1, 2, [3, 4, [5, 6]]].flat(Infinity);  // -> [1, 2, 3, 4, 5, 6]

let arr = [1, 2, [3, 4]];

console.log( arr.flat() );

arr =  [1, 2, [3, 4, [5, 6]]];

console.log( arr.flat() );
console.log( arr.flat(1) );
console.log( arr.flat(2) );
console.log( arr.flat(Infinity) );

const common = arr.reduce((a, b) => [...a, ...b], [])

Nota: quando Function.prototype.apply( [].concat.apply([], arrays)) o l'operatore di diffusione ([].concat(...arrays) ) viene utilizzato per appiattire un array, entrambi possono causare overflow dello stack per array di grandi dimensioni, poiché ogni argomento di una funzione viene archiviato nello stack.

Ecco un'implementazione sicura dello stack in stile funzionale che soppesa i requisiti più importanti l'uno rispetto all'altro:

• riutilizzabilità
• leggibilità
• concisione
• prestazione

// small, reusable auxiliary functions:

const foldl = f => acc => xs => xs.reduce(uncurry(f), acc); // aka reduce

const uncurry = f => (a, b) => f(a) (b);

const concat = xs => y => xs.concat(y);


// the actual function to flatten an array - a self-explanatory one-line:

const flatten = xs => foldl(concat) ([]) (xs);

// arbitrary array sizes (until the heap blows up :D)

const xs = [[1,2,3],[4,5,6],[7,8,9]];

console.log(flatten(xs));


// Deriving a recursive solution for deeply nested arrays is trivially now


// yet more small, reusable auxiliary functions:

const map = f => xs => xs.map(apply(f));

const apply = f => a => f(a);

const isArray = Array.isArray;


// the derived recursive function:

const flattenr = xs => flatten(map(x => isArray(x) ? flattenr(x) : x) (xs));

const ys = [1,[2,[3,[4,[5],6,],7],8],9];

console.log(flattenr(ys));

Non appena ti abitui alle piccole funzioni a forma di freccia in forma curry, composizione delle funzioni e funzioni di ordine superiore, questo codice si legge come in prosa. La programmazione quindi consiste semplicemente nel mettere insieme piccoli blocchi che funzionano sempre come previsto, perché non contengono effetti collaterali.

ES6 One Line Appiattire

Vedi lodash appiattire , sottolineare appiattire (superficiale true)

function flatten(arr) {
  return arr.reduce((acc, e) => acc.concat(e), []);
}

o

function flatten(arr) {
  return [].concat.apply([], arr);
}

Testato con

test('already flatted', () => {
  expect(flatten([1, 2, 3, 4, 5])).toEqual([1, 2, 3, 4, 5]);
});

test('flats first level', () => {
  expect(flatten([1, [2, [3, [4]], 5]])).toEqual([1, 2, [3, [4]], 5]);
});

ES6 One Line Deep Flatten

Vedi lodash flatten Deep , underscore appiattire

function flattenDeep(arr) {
  return arr.reduce((acc, e) => Array.isArray(e) ? acc.concat(flattenDeep(e)) : acc.concat(e), []);
}

Testato con

test('already flatted', () => {
  expect(flattenDeep([1, 2, 3, 4, 5])).toEqual([1, 2, 3, 4, 5]);
});

test('flats', () => {
  expect(flattenDeep([1, [2, [3, [4]], 5]])).toEqual([1, 2, 3, 4, 5]);
});

È possibile utilizzare Array.flat()con Infinityper qualsiasi profondità dell'array nidificato.

var arr = [ [1,2,3,4], [1,2,[1,2,3]], [1,2,3,4,5,[1,2,3,4,[1,2,3,4]]], [[1,2,3,4], [1,2,[1,2,3]], [1,2,3,4,5,[1,2,3,4,[1,2,3,4]]]] ];

let flatten = arr.flat(Infinity)

console.log(flatten)

controlla qui per la compatibilità del browser

Un approccio Haskellesque

function flatArray([x,...xs]){
  return x ? [...Array.isArray(x) ? flatArray(x) : [x], ...flatArray(xs)] : [];
}

var na = [[1,2],[3,[4,5]],[6,7,[[[8],9]]],10];
    fa = flatArray(na);
console.log(fa);

Modo ES6:

const flatten = arr => arr.reduce((acc, next) => acc.concat(Array.isArray(next) ? flatten(next) : next), [])

const a = [1, [2, [3, [4, [5]]]]]
console.log(flatten(a))

Modo ES5 per la flattenfunzione con fallback ES3 per array nidificati N-volte:

var flatten = (function() {
  if (!!Array.prototype.reduce && !!Array.isArray) {
    return function(array) {
      return array.reduce(function(prev, next) {
        return prev.concat(Array.isArray(next) ? flatten(next) : next);
      }, []);
    };
  } else {
    return function(array) {
      var arr = [];
      var i = 0;
      var len = array.length;
      var target;

      for (; i < len; i++) {
        target = array[i];
        arr = arr.concat(
          (Object.prototype.toString.call(target) === '[object Array]') ? flatten(target) : target
        );
      }

      return arr;
    };
  }
}());

var a = [1, [2, [3, [4, [5]]]]];
console.log(flatten(a));

Se si dispone solo di matrici con 1 elemento stringa:

[["$6"], ["$12"], ["$25"], ["$25"]].join(',').split(',');

farà il lavoro. Bt che corrisponde specificamente al tuo esempio di codice.

var arrays = [["a"], ["b", "c"]];
Array.prototype.concat.apply([], arrays);

// gives ["a", "b", "c"]

(Sto solo scrivendo questo come una risposta separata, basata sul commento di @danhbear.)

Raccomando una funzione di generatore di spazio ridotto :

function* flatten(arr) {
  if (!Array.isArray(arr)) yield arr;
  else for (let el of arr) yield* flatten(el);
}

// Example:
console.log(...flatten([1,[2,[3,[4]]]])); // 1 2 3 4

Se lo si desidera, creare una matrice di valori appiattiti come segue:

let flattened = [...flatten([1,[2,[3,[4]]]])]; // [1, 2, 3, 4]

Preferirei trasformare l'intero array, così com'è, in una stringa, ma a differenza di altre risposte, lo farei usando JSON.stringifye non usando iltoString() metodo, che produce un risultato indesiderato.

Con JSON.stringifyquell'output, tutto ciò che rimane è rimuovere tutte le parentesi, avvolgere nuovamente il risultato con parentesi iniziali e finali e servire il risultato con JSON.parsecui riporta la stringa in "vita".

• Può gestire array nidificati infiniti senza costi di velocità.
• Può gestire correttamente gli elementi dell'array che sono stringhe contenenti virgole.

var arr = ["abc",[[[6]]],["3,4"],"2"];

var s = "[" + JSON.stringify(arr).replace(/\[|]/g,'') +"]";
var flattened = JSON.parse(s);

console.log(flattened)

Esegui snippet di codiceNascondi risultati

Espandi frammento

• Solo per array multidimensionali di stringhe / numeri (non oggetti)

Puoi anche provare il nuovo Array.Flat()metodo. Funziona nel modo seguente:

let arr = [["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"]].flat()

console.log(arr);

Il flat() metodo crea un nuovo array con tutti gli elementi del sub-array concatenati in esso ricorsivamente fino al livello 1 di profondità (ovvero array all'interno di array)

Se si desidera appiattire anche array tridimensionali o anche di dimensioni superiori, è sufficiente chiamare il metodo flat più volte. Ad esempio (3 dimensioni):

let arr = [1,2,[3,4,[5,6]]].flat().flat().flat();

console.log(arr);

Stai attento!

Array.Flat()il metodo è relativamente nuovo. I browser meno recenti come ie potrebbero non aver implementato il metodo. Se vuoi che il tuo codice funzioni su tutti i browser, potresti dover compilare il tuo JS in una versione precedente. Controlla i documenti Web MD per la compatibilità del browser corrente.

Utilizzando l'operatore spread:

const input = [["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"]];
const output = [].concat(...input);
console.log(output); // --> ["$6", "$12", "$25", "$25", "$18", "$22", "$10"]

Non è difficile, basta scorrere le matrici e unirle:

var result = [], input = [["$6"], ["$12"], ["$25"], ["$25"], ["$18"]];

for (var i = 0; i < input.length; ++i) {
    result = result.concat(input[i]);
}

Sembra che questo sembra un lavoro per RECURSION!

• Gestisce più livelli di annidamento
• Gestisce array vuoti e parametri non array
• Non ha mutazione
• Non si basa sulle moderne funzionalità del browser

Codice:

var flatten = function(toFlatten) {
  var isArray = Object.prototype.toString.call(toFlatten) === '[object Array]';

  if (isArray && toFlatten.length > 0) {
    var head = toFlatten[0];
    var tail = toFlatten.slice(1);

    return flatten(head).concat(flatten(tail));
  } else {
    return [].concat(toFlatten);
  }
};

Uso:

flatten([1,[2,3],4,[[5,6],7]]);
// Result: [1, 2, 3, 4, 5, 6, 7] 

L'ho fatto usando ricorsione e chiusure

function flatten(arr) {

  var temp = [];

  function recursiveFlatten(arr) { 
    for(var i = 0; i < arr.length; i++) {
      if(Array.isArray(arr[i])) {
        recursiveFlatten(arr[i]);
      } else {
        temp.push(arr[i]);
      }
    }
  }
  recursiveFlatten(arr);
  return temp;
}

L' altro giorno stavo scherzando con i generatori ES6 e ho scritto questo riassunto . Che contiene...

function flatten(arrayOfArrays=[]){
  function* flatgen() {
    for( let item of arrayOfArrays ) {
      if ( Array.isArray( item )) {
        yield* flatten(item)
      } else {
        yield item
      }
    }
  }

  return [...flatgen()];
}

var flatArray = flatten([[1, [4]],[2],[3]]);
console.log(flatArray);

Fondamentalmente sto creando un generatore che si sovrappone all'array di input originale, se trova un array utilizza l' operatore yield * in combinazione con la ricorsione per appiattire continuamente gli array interni. Se l'articolo non è un array, produce solo il singolo articolo. Quindi utilizzando l' operatore ES6 Spread (noto anche come operatore splat) appiattisco il generatore in una nuova istanza di array.

Non ho testato le prestazioni di questo, ma immagino che sia un semplice esempio di utilizzo dei generatori e dell'operatore yield *.

Ma di nuovo, stavo solo scherzando, quindi sono sicuro che ci sono modi più performanti per farlo.

solo la migliore soluzione senza lodash

let flatten = arr => [].concat.apply([], arr.map(item => Array.isArray(item) ? flatten(item) : item))