JavaScript 配列をフラット化するにはどうすればよいですか?

この記事では、JavaScript 配列を平坦化する方法の詳細な分析を提供します。これに興味のある友人は、一緒に学ぶことができます。

開発プロセスでは、2 次元配列を 1 次元配列にフラット化する、または 3 次元配列を 1 次元配列にフラット化するなど、いくつかの一般的な問題に遭遇することがあります。これらの問題は、発生したときに常に再考されるため、修正して要約することをお勧めします。

以下の著者は、多次元配列を 1 次元配列にフラット化する 2 つの方法を説明します。より良い方法がある場合は、メッセージ エリアに投稿してください。

最初のメソッド、再帰処理です。コードは次のとおりです。

var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]],
 [333, 4444]
];
function product() {
 // 1、创建一个空数组,
 var newarr = [];
 ///2、并且返回一个函数,函数参数为要拍平的数组
 return function flatten(arr) {
  // 3、循环数组，判断每一项,不为输的话将其塞入newarr
  // 若为数组,递归调用 faltten,并将结果与newarr合并
  for (var t of arr) {
   if (!Array.isArray(t)) {
    newarr.push(t);
   } else {
    newarr.concat(flatten(t))
   }
  }
  return newarr
 }
}
var flatten = product();
console.log(flatten(arr))

実行結果は次のとおりです。

コードの詳細な説明については、コメントを参照してください。次のメソッドは、JavaScript 言語のいくつかの側面を使用します。新機能のコードは次のとおりです:

var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]],
 [333, 4444]
];
function flatten(arr){
 return arr.reduce(function(pre,cur){
  if(!Array.isArray(cur)){
   return [...pre,cur];
  }else{
   return [...pre,...flatten(cur)]
  }
 },[])
}
console.log(flatten(arr))

上記のコードは、ES6 の新機能を使用してクラウド アルゴリズム "..."、"[...abc,. ..fff]" の関数は abc.concat(fff ) と同等ですが、この使用法はより直観的かつ明確であり、reduce メソッドが使用されます。 reduceはJavaScript言語の配列メソッドです。

配列で reducuce メソッドを呼び出すときは、2 つのパラメーターを渡すことができます。最初のパラメーターはコールバック関数で、2 番目のパラメーターは初期値です。コールバック関数には 2 つのパラメータを渡す必要があります。最初のパラメータは関数の各実行の戻り値で、2 番目のパラメータは現在のインデックスに対応する配列の値です。 reduce の 2 番目のパラメータは省略できます。省略した場合、コールバック関数の最初の呼び出しのパラメータは、配列の 1 番目と 2 番目の項目の値になります。省略しない場合は、コールバック関数の最初のパラメータになります。はこの初期値です。上記の例では、reduce の 2 番目のパラメーターが空の配列に設定されています。

上記は私があなたのためにまとめたものです。

関連記事:

jsを使用してWeChatでアプリを呼び出す方法?

エリアスクロールの問題に対する Vue での cli+mui の使用

vue でのオンライン有料コース (詳細なチュートリアル)

Express と koa の使用の比較 (詳細なチュートリアル)

vue の最初スタイラスを使ったインストール方法（詳しいチュートリアル）

Vueフレームワークでの関連グッズコンポーネント開発

以上がJavaScript 配列をフラット化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。