今回はJSのメソッドのflatとflatMapとfillについてまとめていきます。
ちなみにこのメソッドたちは下の問題に挑戦するまでは一切使用したことがなかったものです...

・flatメソッドについて

mdnより

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]

簡単に言うと、
配列を要素に持つ配列(配列の中に配列がある)に対して使用すると、要素の配列(中の配列)が分解されるイメージです。
[3, 4] → 3, 4 になていますね。

もう何重にも配列に入ってしまっていても
flat()の引数を合わせてあげることでこちらもflatな配列にすることができます。

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(3));
// expected output: [0, 1, 2, 3, 4]

・concatについて

こちらは配列と配列を合わせて新しい一つの配列にするのによく使用されるメソッドになります。(配列ではなく値を追加することも可能)
注意点としてはconcatを使用した配列自体は変更されないので、新しい配列を用意してそちらに返り値を代入する必要があります。

const array1 = [1, 2];
const array2 = [3, 4];

// array1にconcatを使用(引数にarray2)
const addArray = array1.concat(array2);

console.log(addArray);
// expected output: [1, 2, 3, 4]

// arrry1に4つの数値を追加
const addNumber = array1.concat(3, 4, 5, 6);

console.log(addNumber);
// expected output: [1, 2, 3, 4, 5. 6]

ですのでmdnにあるようにconcatとreduceを使用してflatと同様のことができます。

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

// 空の配列にarrの要素をconcatで足していく
arr.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]

// または、分割代入の構文を使用して
const flattened = (arr) => [].concat(...arr);

となります。

・flatMapについて

こちらはES2019にて追加されたメソッドになります。
簡単に言うと配列に対して「map() + flat()」を一度にできるメソッドになります。

const array = [1, 2, 3];

// 配列内の要素を2つに複製する
const DuoArray = array.flatMap(n => [n, n]);

console.log(DuoArray);
// // expected output: [1, 1, 2, 2,  3, 3]

「配列内の要素の値を変化させる」なんかは実装のイメージし易いですが、
上のように「配列内の要素の個数を操作する」のはなかなかイメージしにくいですが、このflatMapを仕様すれば操作も簡単にできます。

ちなみにこちらも新しい配列に格納する形で使用します。

・fillについて

こちらは配列をfillで指定した値で埋め尽くす(書き換える)メソッドになります。
mdnより

const array1 = [1, 2, 3, 4];

// ６で書き換えて出力
console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

第2引数、第3引数も指定することもできその場合は

const array1 = [1, 2, 3, 4];

// 書き換える値は0 開始は2から　終了は4(規定値はarray1.lengthになります) 
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

となります。

これらを使用して「ゆめみからの挑戦状」の模範解答を用意すると
[flatMap使用ver ]

const array1 = [1, 2, 3, 4, 5, 6]
// n => n%2 は偶数の時はfalse 奇数の時はtrueになります。
const array2 = array1.flatMap(n => n % 2 ? [n, n, n] : [n, n])

console.log(array2)
// -> [1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 5, 5, 5, 6, 6]

[flatMapとfill使用ver]

const array1 = [1, 2, 3, 4, 5, 6]
const array2 = array1.flatMap(n => Array(n % 2 + 2).fill(n))  

console.log(array2)
// -> [1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 5, 5, 5, 6, 6]

となります。