JavaScript Arrayの階層構造を自在に操る: array.flat メソッド

JavaScript Array の array.flat メソッド解説

array.flat メソッドは、以下の機能を提供します。

• 配列の要素を再帰的に展開し、1つの配列に結合する
• オプションで、展開する深さを指定できる
• ES2019で導入された

従来の方法と比較すると、以下の利点があります。

• コードが簡潔になる
• 処理速度が速い場合がある
• 読みやすく、理解しやすいコードになる

array.flat メソッドの使用方法は以下の通りです。

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

// 配列を1階層フラット化
const flattenedArr1 = arr.flat();
console.log(flattenedArr1); // [1, 2, 3, 4, 5, 6]

// 配列を2階層フラット化
const flattenedArr2 = arr.flat(2);
console.log(flattenedArr2); // [1, 2, 3, 4, 5, 6]

flat メソッドに引数を渡すことで、展開する深さを指定できます。

• 引数を渡さない場合: 配列を1階層のみフラット化
• 引数に1を渡す場合: 配列を2階層フラット化

• array.flat メソッドは、ES2019以降のブラウザでのみ使用可能です。
• 古いブラウザで使用する場合は、polyfill を利用する必要があります。
• 配列内に空の要素 ([]) が存在する場合、flat メソッドを使用すると空の要素も展開されます。
• 配列内にオブジェクトが存在する場合、flat メソッドを使用するとオブジェクトはそのまま展開されます。

array.flat メソッドは、様々な場面で役立ちます。

• 配列の要素を全て処理したい場合
• 配列の階層構造を単純化したい場合
• 配列を特定の深さまでフラット化したい場合

以下は、array.flat メソッドの使用例です。

• 配列の合計値を求める

const arr = [1, 2, [3, 4], 5];
const sum = arr.flat().reduce((a, b) => a + b, 0);
console.log(sum); // 15

• 配列の要素を全て文字列に変換する

const arr = [1, 2, true, null, { name: 'John' }];
const stringArr = arr.flat().map(String);
console.log(stringArr); // ['1', '2', 'true', 'null', '[object Object]']

• 2階層までの配列を1階層にフラット化する

const arr = [[1, 2], [3, 4], [5, 6]];
const flattenedArr = arr.flat(2);
console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

まとめ

array.flat メソッドは、JavaScript の Array オブジェクトに追加された便利なメソッドです。従来の方法と比べて、簡潔で読みやすいコードで配列の階層構造をフラット化できます。

上記の解説を参考に、array.flat メソッドを活用して、コードをより効率的に、読みやすく改善してみてください。

array.flat メソッドのサンプルコード

配列の要素を全て処理したい場合

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

// 従来の方法
const sum1 = 0;
for (const element of arr) {
  if (Array.isArray(element)) {
    for (const nestedElement of element) {
      sum1 += nestedElement;
    }
  } else {
    sum1 += element;
  }
}

// array.flat を使用
const sum2 = arr.flat().reduce((a, b) => a + b, 0);

console.log(sum1, sum2); // 15 15

配列の階層構造を単純化したい場合

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

// 従来の方法
const flattenedArr1 = [];
for (const element of arr) {
  flattenedArr1.push(...element);
}

// array.flat を使用
const flattenedArr2 = arr.flat();

console.log(flattenedArr1, flattenedArr2); // [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5, 6]

配列を特定の深さまでフラット化したい場合

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

// 2階層までフラット化
const flattenedArr = arr.flat(2);

console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

const arr = [1, 2, true, null, { name: 'John' }];
const stringArr = arr.flat().map(String);

console.log(stringArr); // ['1', '2', 'true', 'null', '[object Object]']

• 空の要素 ([]) を含む配列をフラット化する

const arr = [1, [], 2, [3], 4];
const flattenedArr = arr.flat();

console.log(flattenedArr); // [1, 2, 3, 4]

• オブジェクトを含む配列をフラット化する

const arr = [1, { name: 'John' }, 2, { age: 30 }];
const flattenedArr = arr.flat();

console.log(flattenedArr); // [1, [object Object], 2, [object Object]]

まとめ

上記は、array.flat メソッドのサンプルコードです。これらのコードを参考に、array.flat メソッドを活用して、コードをより効率的に、読みやすく改善してみてください。

array.flat メソッドの代替方法

以下の方法で、array.flat メソッドの機能を代替できます。

reduce メソッドを使用して、配列を再帰的に展開することができます。

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

const flattenedArr = arr.reduce((a, b) => {
  return a.concat(Array.isArray(b) ? b.flat() : b);
}, []);

console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

forEach メソッドを使用して、配列をループ処理し、要素を新しい配列に追加することができます。

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

const flattenedArr = [];

arr.forEach(element => {
  if (Array.isArray(element)) {
    element.forEach(nestedElement => {
      flattenedArr.push(nestedElement);
    });
  } else {
    flattenedArr.push(element);
  }
});

console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

for ループを使用して、配列をループ処理し、要素を新しい配列に追加することができます。

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

const flattenedArr = [];

for (const element of arr) {
  if (Array.isArray(element)) {
    for (const nestedElement of element) {
      flattenedArr.push(nestedElement);
    }
  } else {
    flattenedArr.push(element);
  }
}

console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

ライブラリの使用

underscore.js や lodash などのライブラリには、配列をフラット化する機能が提供されています。

const _ = require('underscore');

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

const flattenedArr = _.flatten(arr);

console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

まとめ

array.flat メソッドは便利な機能ですが、ES2019以前のブラウザでは使用できません。

上記の方法で、array.flat メソッドの機能を代替できます。

使用環境や目的に合わせて、最適な方法を選択してください。