JS：通过数组映射时展平数组？

Question

If I want the colors of the following data, I know I can do: let colors = foo.foo.data.map(x => x.colors) which will give me an array of arrays:

`[['yellow', 'green'],['grey','pink'],['white', 'willow']]

Is there a way to flatten that while mapping through it rather than doing a separate iteration to flatten after it's mapped?

let foo = { foo: {
    data: [
        {
           name: "asdd",
           age: 55, 
           colors: ["red", "black"]
        },
        {
           name: "Richard",
           age: 12, 
           colors: ["yellow", "green"]
        },  
        {
           name: "Marcus",
           age: 99, 
           colors: ["grey", "pink"]
        },
        {
           name: "Ian",
           age: 24, 
           colors: ["white", "willow"]
        }, 
    ]
}}

Answer 1

Is there a way to flatten that while mapping through it rather than doing a separate iteration to flatten after it's mapped?

Yes, you can use .flatMap() which will flatten the returned results into one outer resulting array like so:

 let foo = { foo: { data: [{ name: "asdd", age: 55, colors: ["red", "black"] }, { name: "Richard", age: 12, colors: ["yellow", "green"] }, { name: "Marcus", age: 99, colors: ["grey", "pink"] }, { name: "Ian", age: 24, colors: ["white", "willow"] }, ] } }; let colors = foo.foo.data.flatMap(x => x.colors); console.log(colors);

Answer 2

You can use flatMap . It will create a flat array with the elements.

foo.foo.data.flatMap(x => x.colors)

 let foo = { foo: { data: [{ name: "asdd", age: 55, colors: ["red", "black"] }, { name: "Richard", age: 12, colors: ["yellow", "green"] }, { name: "Marcus", age: 99, colors: ["grey", "pink"] }, { name: "Ian", age: 24, colors: ["white", "willow"] }, ] } } let colors = foo.foo.data.flatMap(x => x.colors) console.log(colors) <:-- begin snippet: js hide: false console: true babel: false -->

Or you can use reduce and concat too.

foo.foo.data.reduce((acc, x) => acc.concat(x.colors), []);

 let foo = { foo: { data: [{ name: "asdd", age: 55, colors: ["red", "black"] }, { name: "Richard", age: 12, colors: ["yellow", "green"] }, { name: "Marcus", age: 99, colors: ["grey", "pink"] }, { name: "Ian", age: 24, colors: ["white", "willow"] }, ] } } let colors = foo.foo.data.reduce((acc, x) => acc.concat(x.colors), []); console.log(colors)

But this is inefficient and should be avoided for large arrays.

Refer flatMap

Answer 3

You can flat with reduce method, try this:

 let foo = { foo: { data: [ { name: "asdd", age: 55, colors: ["red", "black"] }, { name: "Richard", age: 12, colors: ["yellow", "green"] }, { name: "Marcus", age: 99, colors: ["grey", "pink"] }, { name: "Ian", age: 24, colors: ["white", "willow"] }, ] }}; let colors = foo.foo.data.map(x => x.colors).reduce((a, b) => a.concat(b), []); console.log(colors)

Answer 4

Not as concise as flatMap() but this also works:

let colors = [];
foo.foo.data.forEach(elmt => colors = colors.concat(elmt.colors));
console.log(colors); // Array(8) [ "red", "black", "yellow", "green", "grey", "pink", "white", "willow" ]