js で配列の平坦化を実現するいくつかの方法

配列の平坦化

配列の平坦化とは、入れ子になった複数レベルの配列を 1 レベルのみの配列に変換することです。平坦化は、面接でもよく行われるテスト質問です。簡単な例として、配列の平坦化効果を実現できる flatDeep という名前の関数があるとします。コード実行の効果は次のとおりです。

var array = [1, [2, [3, [4, 5]]]];
console.log(flatDeep(array)); // [1, 2, 3, 4，5]

上記のようにフラット化を実現できる flatDeep 関数の実装方法はいくつかありますが、これらの方法で flatDeep 関数を実装してみましょう。

方法 1: 再帰

ループ再帰により、配列は 1 つずつ走査されます。各項目がまだ配列である場合は、下への走査を続けます。実装は次のとおりです:

var array = [1, [2, [3, [4, 5]]]];
function flatDeep(arr){
	let result = [];
	for(let i = 0; i < arr.length; i++) {
		if(Array.isArray(arr[i])){
			result = result.concat(flatDeep(arr[i]))
		} else {
			result.push(arr[i])
		}
	}
	return result;
}
console.log(flatDeep(array));

方法2: toStringとsplitを組み合わせる

まず、toString() を通じて配列を String オブジェクトに変換し、次に、split() メソッドを使用して、カンマ区切りを使用して String オブジェクトを文字列配列に分割し、次に、map 関数を使用して配列内の文字列を数値に変換します。

var array = [1, [2, [3, [4, 5]]]];
function flatDeep(arr){
	let result = [];
	return result = arr.toString().split(',').map(Number)
}
console.log(flatDeep(array));

方法 3:reduce 関数を使用する

Reduce メソッドを使用して効果を蓄積する実装アイデアは、従来の再帰的メソッドに似ており、コードは次のとおりです。

var array = [1, [2, [3, [4, 5]]]];
function flatDeep(arr){
	return arr.reduce(function(pre,next){
		if(Array.isArray(next)){
			return pre.concat(flatDeep(next))
		} else {
			return pre.concat(next)
		}
	}, [])
}
// 以上代码还可用三目运算符做如下简化
function flatDeep(arr) {
	return arr.reduce((pre, next) => {
		return pre.concat(Array.isArray(next) ?  flatDeep(next) : next)
	},[])
}
console.log(flatDeep(array));

方法 4: スプレッド演算子と関数を組み合わせる

まず、配列の some メソッドを使用して、配列内のまだグループ番号である項目をフィルターで除外し、次に concat 演算を実行し、ES6 スプレッド演算子を使用してそれらを元の配列に結合し、最後に元の配列を返します。コードは以下のように表示されます。

var array = [1, [2, [3, [4, 5]]]];
function flatDeep(arr) {
	while(arr.some(item => Array.isArray(item))){
		arr = [].concat(...arr)
	}
	return arr;
}
console.log(flatDeep(array)); // [ 1, 2, 3, 4, 5 ]

方法5: ES6フラット法

flat() メソッドは、指定可能な深さに従って配列を再帰的に走査し、すべての要素を走査された部分配列内の要素とマージして新しい配列を返します。構文は次のとおりです。

var newArray = arr.flat([depth])

パラメーターの深さは、ネストされた配列から抽出される構造の深さを指定します。デフォルト値は 1 です。パラメーターの深さを Infinity に渡すこともできます。つまり、レイヤーの数に関係なく、レイヤーを拡張する必要があります。フラットメソッドを使用して達成されるフラットコードの効果は次のとおりです。

var array = [1, [2, [3, [4, 5]]]];
function flatDeep(arr) {
	return arr.flat(Infinity)
}
console.log(flatDeep(array)); // [ 1, 2, 3, 4, 5 ]