JS 1次元配列を3次元配列に変換する例

JS 1次元配列を3次元配列に変換する例

今日、CSDN の Q&A セクションで友人が質問をしているのを見ました。彼は 1 次元配列を 3 次元配列に変換したいと言っていました。私はそれほど忙しくなかったので、すぐに彼のために仕事を手配しました。もちろん、情報を調べたりはしませんでした。自分の考えに従っただけです!下記にソースコードがあります

ここに画像の説明を挿入

上記は彼のデータフォーマットであり、以下は変換されるデータフォーマットである。

ここに画像の説明を挿入

さっそくコードを見てみましょう

 arr = [{
      'peovince': 'a'、'都市': 'b'、'エリア': 'c'
    },
    {
      'peovince': 'a'、'city': 'b'、'area': 'd'
    },
    {
      'peovince': 'a'、'city': 'e'、'area': 'f'
    },
    {
      「peovince」: 「a」、「都市」: 「e」、「エリア」: 「g」
    },
    {
      'peovince': 'o'、'city': 'p'、'area': 'q'
    },
    {
      'peovince': 'o'、'city': 'p'、'area': 'r'
    },
    {
      'peovince': 'o'、'city': 's'、'area': 't'
    },
    {
      'peovince': 'o'、'city': 's'、'area': 'v'
    }];

変換を開始する

リストをArray.from(新しいSet(
      arr.map(アイテム => {
        戻り値['peovince']
      })))
    サブリスト = []
    リスト.forEach(res => {
      arr.forEach(ele => {
        if (ele['peovince'] === res) {
          nameArr = subList.map(item => item.value) とします。
          nameArr.indexOf(res) !== -1 の場合 {
            nameArr2 = subList[nameArr.indexOf(res)].children.map(item => item.value) とします。
            nameArr2.indexOf(ele['city']) !== -1 の場合 {
              サブリスト[nameArr.indexOf(res)].children[nameArr2.indexOf(ele['city'])].children.push({
                値: ele['area'],
                ラベル:ele['area'],
              })
            } それ以外 {
              サブリスト[nameArr.indexOf(res)].children.push({
                値: ele['city'],
                ラベル:ele['city'],
                子供たち: [{
                  値: ele['area'],
                  ラベル:ele['area'],
                }]
              })
            }
          } それ以外 {
            サブリスト.push({
              値: res、
              ラベル: res,
              子供たち: [{
                値: ele['city'],
                ラベル:ele['city'],
                子供たち: [{
                  値: ele['area'],
                  ラベル:ele['area'],
                }]
              }]
            })
          }
        }
      })

    })
    console.log(サブリスト)

最後に印刷されるサブリストは望ましい形式です。印刷を見てみましょう

ps: JavaScript 1次元配列を2次元配列に変換する

最初のケース: 配列に文字列が含まれている場合

  配列を[1, 2, 3, 4, 5, 6, 7, 8]とします。
  len len = 配列の長さ;
  let n = 4; // 1 行に 4 つの項目が表示されると仮定します。let lineNum = len % n === 0 ? len / n : Math.floor( (len / n) + 1 );
  res = [] とします。
  (i = 0 とします; i < lineNum; i++) {
    // slice() メソッドは、配列の先頭から末尾まで (末尾を除く) 選択された部分の浅いコピーを新しい配列オブジェクトに返します。元の配列は変更されません。
    temp = array.slice(i*n, i*n+n); とします。
    res.push(temp);
  }
  コンソールログ(res);

2番目のケース: 配列にオブジェクトが含まれている場合

配列要素がオブジェクトの場合、slice は浅いコピーであるため、slice メソッドを使用してそれらをインターセプトすることはできません。結果として生じる問題は、新しく生成された配列オブジェクトの値を変更すると、元の配列内のオブジェクトの値に影響が及ぶことです。
ここでは、JSON.stringify と JSON.parse を使用する方法を紹介します。

  objArray = [{a: 1}, {b: 2}, {c: 3}, {d: 4}, {e: 5}, {f: 6}, {g: 7}] とします。
  len = objArray.length;とします。
  let n = 4; // 1 行に 4 つの項目が表示されると仮定します。let lineNum = len % 4 === 0 ? len / 4 : Math.floor( (len / 4) + 1 );
  res = [] とします。
  (i = 0 とします; i < lineNum; i++) {
    temp = objArray.slice(i*n, i*n+n); とします。
    res.push(JSON.parse(JSON.stringify(temp)));
  }
  コンソールログ(res);


JS 1次元配列を3次元配列に変換する方法についての記事はこれで終わりです。JS 1次元配列を3次元配列に変換する方法についての関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS 1次元配列を3次元配列に変換する方法

<<:  ab ツールを使用してサーバー上で API ストレス テストを実行します。

>>:  ウェブレスポンシブレイアウトにおけるiframe適応の方法

推薦する

Vue のライフサイクルとフック関数

目次1.ライフサイクルとは何か2. Vueのライフサイクル3. ライフサイクルフック関数1.ライフサ...

MySQL イベント スケジューラに関するよくある話 (必読)

概要MySQL には独自のイベント スケジューラもあり、これは Linux の crontab ジョ...

MySQL データベース内の同じテーブルを同時にクエリして更新する方法

通常のプロジェクトでは、1 回の入札で同時にデータを更新および照会する必要があるという問題によく遭遇...

MySQL Server 8.0.3 のインストールと設定方法のグラフィックチュートリアル

この文書はMySQL Server 8.0.3のインストールと設定方法を参考のために記録したものです...

Linux でのログ サーバーの設定に関するグラフィック チュートリアル

序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...

MySQL 文字列分割操作 (区切り文字を含む文字列のインターセプション)

区切り文字なしの文字列抽出質問の要件データベース内のフィールド値:実装効果: 1行のデータを複数行に...

MySQLのunion allとunionの違いを簡単に理解する

Union は、重複行を除外し、デフォルトのソートを実行する、データに対する結合操作です。Union...

マージントップ崩壊現象とその具体的解決策

マージントップの崩壊とはmargin-top の崩壊は、CSS ボックス モデルで発生する現象です。...

Linux に JDK1.8 をインストールするための詳細なチュートリアル

1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...

MySQL で重複時間を削除して時間差を計算する実装

目次必要:ドライブ:アイデア:成し遂げる:個人的には、実際の開発ではストアド プロシージャの使用はお...

表面的なウェブデザイン

<br />私はいつもYahooのウェブデザインが素晴らしいと信じてきました。しかし、こ...

VUEトークンの無効化プロセスの詳細な説明

目次ターゲット思考分析コード着陸要約するターゲットトークンの有効期限切れシナリオの処理トークンは、ユ...

Dockerデーモンのセキュリティ設定項目の詳細な説明

目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...

Node の SMS API で検証コード ログインを実装するためのサンプル コード

1. ノードサーバーのセットアップ + データベース接続ここでの操作は比較的簡単でわかりやすいです。...

Mysql+JavaSwing に基づくスーパーマーケット商品管理システムの設計と実装

目次1. 機能紹介2. キーコード2.1 ホームページの機能2.2 製品情報を追加する2.3 データ...