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オプションで実行されています

推薦する

JS の FileReader を介して .txt ファイルの内容を取得する方法

目次JSはFileReaderを通じて.txtファイルの内容を取得します。 .txtファイルの読み取...

ウェブサイトのコンテンツの100~1%はナビゲーションである

ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...

HTMLページ内の検索機能を完了する

最近、たくさんの人に改変してもらったフレームワークに取り組んでいます。毎日コードを見ていると目が回り...

MySQL における USING と HAVING の使用法の簡単な分析

この記事では、例を使用して MySQL での USING と HAVING の使用方法を説明します。...

Vue3 はメッセージコンポーネントの例を実装します

目次コンポーネント設計最終的なコンポーネントAPIの定義コンポーネント構造の定義テンプレートとスタイ...

MySQLデータベースのタイムアウト設定を構成する方法の例

目次序文1. JDBCタイムアウト設定2. 接続プールのタイムアウト設定3. MyBatisクエリの...

HTML で div を非表示にする テーブルを非表示にする TABLE または DIV コンテンツの CSS スタイル

今夜、数日間悩まされていた問題を解決しました。本当に解決したかどうかはわかりませんが、解決されている...

Linux の一般的なハードディスク管理コマンドの紹介

目次1. dfコマンド2. duコマンド3. fsckファイルシステム修復コマンド4. ディスクステ...

JavaScript でよく使われるいくつかの文字列メソッドの概要 (初心者必読)

JavaScriptでよく使われるいくつかの文字列メソッド文字列は読み取り専用データです。よく使用...

CSSはカラフルでスマートな影の効果を実現します

背景前景要素から特定の色を継承する影の効果を作成する方法を知りたいと思ったことはありませんか?方法に...

高品質なコードを書く Web フロントエンド開発実践書の抜粋

(P4) Web 標準は一連の標準で構成されています。中心となる概念は、Web ページの構造、スタイ...

ローカル写真をアップロードする前にプレビューコード例を実装するための HTML5 と jQuery

HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は...

製品を選択した後、右下隅に√記号を表示するための純粋なCSS

おすすめの記事: CSS 疑似クラスの右下隅をクリックすると、選択を示すチェックマークが表示されます...

コンテンツ領域の周囲を回転する CSS 動的グラデーション ボーダーの効果 (サンプル コード)

レンダリング ネットで関連情報を調べたところ、現在のダイナミックグラデーションボーダーの実装方法のほ...

mysql8.0.19 の基本データ型の詳細な説明

MySQL 基本データ型一般的な MySQL データ型の概要 ![1036857-201708011...