¿Es posible combinar map() y concat() en el siguiente código para hacerlo más limpio/más corto?
const firstColumnData = data.map((item: any) => { return item.firstColumn; }); const secondColumnData = data.map((item: any) => { return item.secondColumn; }); const allData = firstColumnData.concat(secondColumnData);Para el contexto, más adelante en el archivo, allData se mapea para completar los datos en columnas. Los datos específicos dependen de qué página llama al componente.
Básicamente, me pregunto si puedo omitir la declaración de datos de firstColumnData y secondColumn y asignar el valor a allData directamente. Este es un ejemplo de cómo traté de refactorizar, pero no funcionó. (página en blanco, no se pudo renderizar)
const allData = data.map((item: any => { return item.firstColumn.concat(item.secondColumn) });Puede usar una sola operación reduce() . Podría decirse que lo que ahorra al tener que iterar solo una vez, lo pierde en legibilidad:
const data =[ {firstColumn: 1, secondColumn: 2}, {firstColumn: 3, secondColumn: 4} ]; const result = data.reduce((a, {firstColumn, secondColumn}, i, {length}) => { a[i] = firstColumn; a[i + length] = secondColumn; return a; }, []); console.log(result);Estoy de acuerdo con Robby en que la legibilidad es probablemente la parte más importante de esto.
Sin embargo, podrías poner una línea en esto, como:
const allData = [...data.map(item => item.firstColumn), ...data.map(item.secondColumn)];
pero en este caso todavía está haciendo un bucle dos veces, por lo que no ha guardado ningún cálculo, solo lo ha hecho más corto para escribir.
Mi respuesta original a continuación es, por supuesto, tan eficaz como la proverbial melaza de enero, aunque me gusta su forma.
Una pequeña prueba muestra que simplemente poner su lógica actual en un bucle ofrece un rendimiento similar o mejor que una versión generalizada de la respuesta de RobbyCornelissen (a menos que desenrolle el bucle en la reducción...) y tiene el beneficio de la simplicidad. Se basa en definir una matriz de propiedades de columna para iterar.
const data = [{ firstColumn: 1, secondColumn: 2 }, { firstColumn: 3, secondColumn: 4 }], columns = ['firstColumn', 'secondColumn'], result = [].concat(...columns.map(col => data.map((item) => item[col]))); console.log(result); const data = [{ firstColumn: 1, secondColumn: 2 }, { firstColumn: 3, secondColumn: 4 }], columns = ['firstColumn', 'secondColumn'], result = data.reduce((a, item, i, { length }) => { for (let j = 0; j < columns.length; j++) { a[i + length * j] = item[columns[j]] } return a }, []); console.log(result); Si se garantiza que las propiedades están en orden, puede 'comprimir' los Object.values . Esto manejará cualquier cantidad de propiedades sin una desestructuración explícita.
const data = [ { firstColumn: 1, secondColumn: 2 }, { firstColumn: 3, secondColumn: 4 } ]; const result = zip(...data.map(Object.values)).flat() console.log(result) <script> /** * @see https://stackoverflow.com/a/10284006/13762301 */ const zip = (...rows) => [...rows[0]].map((_, c) => rows.map((row) => row[c])); </script>Pero para evitar depender del orden de propiedad, aún puede desestructurar.
const result = zip(...data.map(({ firstColumn, secondColumn }) => [firstColumn, secondColumn])).flat()ver:Javascript equivalente de la función zip de Python para más discusión sobre 'zip'.