【JavaScript】flat()でネストされた配列を平らにするテクニック
JavaScriptには、ネストされた配列を平らにするための便利なメソッド「flat()」があります。この記事を読めば、flat()の使い方やその活用方法を理解し、実際のコーディングで役立てることができるでしょう。
3行で要約すると:
flat()はネストされた配列を平らにするメソッド。- 複数の使用例を紹介し、どのように活用できるかを解説。
- 類似のメソッドとの違いや注意点も合わせて説明。
「flat()」の基本的な使い方
「flat()」とは？
flat()メソッドは、配列内のネストされた配列を平らにします。以下のコードを見てください。
const nestedArray = [1, [2, 3], [4, [5, 6]]];
const flattenedArray = nestedArray.flat();
console.log(flattenedArray); // [1, 2, 3, 4, [5, 6]]
このように、flat()はデフォルトで1レベルのネストを平らにします。
「flat()」の使用例4パターン
さらなる深さのネストを平らにする
const deepNestedArray = [1, [2, 3, [4, 5, [6, 7]]]];
console.log(deepNestedArray.flat(2)); // [1, 2, 3, 4, 5, [6, 7]]
文字列の配列を平らにする
const arrayOfStrings = ["Hello", ["World", "JavaScript", ["!"]]];
console.log(arrayOfStrings.flat()); // ["Hello", "World", "JavaScript", ["!"]]
配列の空のスロットを削除する
const arrayWithEmptySlots = [1, , , 2, [3], , 4];
console.log(arrayWithEmptySlots.flat()); // [1, 2, 3, 4]
数値と文字列の混在した配列を平らにする
const mixedArray = [1, ["two", "three", ["four", "five"]]];
console.log(mixedArray.flat()); // [1, "two", "three", ["four", "five"]]
「flat()」と「flatMap()」
「flatMap()」とは？
flatMap()は、配列の各要素に関数を適用した後に、flat()メソッドを使用して結果を新しい配列に平坦化します。以下の例を見てみましょう。
const nums = [1, 2, 3];
const result = nums.flatMap(x => [x, x * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]
「flat()」と「flatMap()」の違い
flat()は配列を平らにするのに対して、flatMap()は各要素に関数を適用してから平らにします。
const numbers = [1, 2, 3];
console.log(numbers.flat()); // [1, 2, 3]
console.log(numbers.flatMap(x => [x, x * 2])); // [1, 2, 2, 4, 3, 6]
「flat()」を使用する際の注意点
ネストの深さ
デフォルトでは、flat()は1レベルのネストのみ平らにします。ネストの深さを指定するには、数値を引数として渡します。
const deepArray = [1, [2, [3, [4]]]];
console.log(deepArray.flat(2)); // [1, 2, 3, [4]]
配列の空のスロット
flat()は配列内の空のスロットも削除します。
const arrayWithHoles = [1, , , 2, 3];
console.log(arrayWithHoles.flat()); // [1, 2, 3]
「flat()」の使い方まとめ
JavaScriptのflat()メソッドは、ネストされた配列を効果的に平らにするための強力なツールです。初心者から上級者まで、このメソッドの使用法を理解し、日常のコーディング作業で活用することができます。
