JS配列の次元削減のいくつかの方法の詳細な説明

JS配列の次元削減のいくつかの方法の詳細な説明

2次元配列の次元削減

配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次元削減

arr=[1,2,[3,4],5]とします。
arr1=[].concat(...arr); とします。
//まずスプレッド演算子を使用して最も外側の配列を分割します。concat には、結合された配列を分割する独自の関数があります。console.log(arr1);
// [1, 2, 3, 4, 5]

//apply を使用してデータを分割する前の ES6 との互換性 var arr2=[1,2,[3,4],5];
var arr3=[].concat.apply([],arr2);
コンソールログ(arr3);
// [1, 2, 3, 4, 5]

多次元配列の次元削減

再帰的次元削減

//配列関数の再帰的次元削減を使用するいくつかの方法 //some&concat
//some を使って配列に配列が含まれているかどうかを確認し、次元を減らすために自身を呼び出します function fun(arr){
  arr = [].concat (...arr); 
  // 縮小された配列にまだサブ配列が含まれているかどうかを確認します。let hasArray = arr.some(function(elem){
      Array.isArray(elem) を返します。
  })
  if(hasArray){ // サブ配列が含まれている場合 arr=fun(arr); // サブ配列が含まれていないことが確認されるまで、次元をもう一度減らすことしかできません}
    arr を返します。
};

//各インスタンス
//配列の各要素を判断して、配列が事前に用意された空の配列に格納するのではなく、配列自体を呼び出し続けているかどうかを確認します。function fun2(arr){
  ret = [] とします。
  toArr = function(arr){ とする
    arr.forEach(関数(アイテム){
      配列の項目インスタンス? toArr(item): ret.push(item);
    });
  }
  toArr(arr);
  ret を返します。
}

// 削減と連結
//最後に空の配列を準備し、渡された配列の各項目が配列であるかどうかを確認します。配列である場合は、再度自分自身を呼び出します。配列でない場合は、concat を使用して空の配列にまとめます。function fun3(sarr){
    sarr.reduce((pre,val)=>{ を返す
        Array.isArray(val) を返します。pre.concat(fun3(val)): pre.concat(val)
    },[])
}

配列.プロトタイプ.flat()

ES10 では、ネストされた配列を 1 次元配列に分割するために使用される Array.prototype.flat() が追加されました。このメソッドは新しい配列を返しますが、元のデータには影響しません。

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
 
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
 
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
 
// 任意の深さのネストされた配列を拡張するには、深さとして Infinity を使用します。arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

これで、JS 配列の次元削減のいくつかの方法についての記事は終了です。より関連性の高い JS 配列の次元削減コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js で配列の次元を削減する最も包括的な 5 つの方法 (要約)
  • JS 配列の次元削減の実装 Array.prototype.concat.apply([], arr)
  • JavaScript における配列の次元削減の詳細な説明

<<:  MySQL 5.7.19 Winx64 ZIP アーカイブのインストールと使用に関する問題の概要

>>:  mysqlサーバーは--skip-grant-tablesオプションで実行されています

推薦する

JavaScript における一般的な配列操作

目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....

CSS フォント、テキスト、リストのプロパティの詳細な紹介

1. フォントのプロパティcolorは、div{color:red;}のようにテキストの色を指定しま...

Bツリーの特性の紹介

B ツリーは一般的なデータ構造です。彼と一緒にB+ツリーがあります。ここで、概念を明確にする必要があ...

証明書を使用してリモート Docker サーバーに接続する方法

目次1. スクリプトを使用してDockerのTLSを暗号化する2. Dockerの設定を変更してリモ...

MySQL 5.7.18のインストール方法とMySQLサービスの起動手順の詳細な説明

MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...

Windows での MySQL インストール チュートリアル (画像とテキスト付き)

MySQL インストール手順 MySQL は、スウェーデンの MySQL AB によって開発された...

MySQL および Oracle のバッチ挿入 SQL の一般的な記述例

目次例えば:一般的な執筆:要約する例えば:次に、データベースのUSERテーブルにUserオブジェクト...

CSSのline-heightを継承する方法

Line-height はどのように継承されますか?30px などの特定の値を書き込むと、この値が継...

CSS を使用して複数列の等高レイアウトを設定する方法の例

最初は、複数の列のコンテンツのサイズと高さが異なります。ここで、表示する背景を異なるものに設定し、各...

fastdfs+nginxクラスタ構築の実装

1. fastdfs の紹介1. fastdfsとは何かFastdfs は軽量のオープンソース分散フ...

MySQL5.7.03 上位バージョンから MySQL 5.7.17 への置き換えインストール プロセスと見つかった問題の解決策

1. インストール方法は? 1. [実行] -> [cmd] と入力して、小さな黒いウィンドウ...

CSS ボックスモデル内のパディングと略語の詳細な説明

上図のように、パディング値は時計回り(右上、右下)の複合属性であり、パディングの内側の余白がボックス...

Vueカスタムツリーコントロールの使い方の詳細な説明

この記事では、Vueカスタムツリーコントロールの使い方を参考までに紹介します。具体的な内容は次のとお...

初心者がHTMLタグを学ぶ(3)

関連記事:初心者が学ぶ HTML タグ (2)導入された HTML タグは、必ずしも XHTML 仕...

モバイルアダプティブスタイルで@mediaを使用する方法

一般的な携帯電話のスタイル: @media all および (orientation : 縦向き) ...