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適応の方法

推薦する

MySQLはデフォルトのエンジンと文字セットの詳細を変更します

目次1. データベースエンジン1.1 ビューデータベースエンジン1.2 デフォルトのデータベースエン...

PCとモバイルの適応の問題に対する迅速な解決策

Web ページを作成する場合、通常、コンピューターの画面サイズと携帯電話の画面サイズの違いなどの問題...

NodeとPythonの双方向通信実装コード

目次プロセスコミュニケーションプロセス間の双方向通信問題要約するサードパーティのデータ サプライヤー...

ウェブサイトのフロントエンドをエレガントでユーザーにとって魅力的なものにする方法

ウェブフロントエンドのウェブサイトの気質は感情であり、言葉なしでユーザーを魅了できる感情です。では、...

MySQL 5.7 zip版(zip版)のインストールと設定手順の詳細

はじめに: Windows 10 を再インストールし、同時にファイルを整理しました。しかし、MySQ...

Vueコンポーネント間の通信の非常に詳細な要約

目次序文1. Props、$emit一方向データフロー2. $親、$子3. $attrs、$list...

Linuxの簡単な分析でファイアウォールの状態と外部に開いているポートの状態を確認する

1. ファイアウォールの状態を確認するファイアウォールのステータスを確認する systemctl s...

CSSはコンテンツの高さが足りない場合にフッターを自動的に下部に固定します

UI カットのプロセスでは、ページはヘッダー、コンテンツ、フッターの 3 つの部分で構成されることが...

MySQL で 2 つのセットの交差/差/和を取得する方法

MySQL の一般的なシナリオ: 2 つのデータ セットの交差と差を取得するステップ1. 2つのコレ...

JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明

プログラマーが日常的に TypeScript/JavaScript 開発を行う場合、複雑な Java...

MySQLオンラインDDLの使用に関する詳細な説明

目次文章LOCKパラメータアルゴリズムパラメータCOPY TABLE プロセスIN-PLACEプロセ...

Linux カーネル デバイス ドライバー キャラクタ デバイス ドライバー ノート

/******************** * キャラクターデバイスドライバー**********...

MySQL データテーブルのパーティション戦略と利点と欠点の分析

目次なぜパーティションが必要なのでしょうか?パーティショニング戦略パーティションの危険性なぜパーティ...

MySQL explain クエリ命令情報の取得原理と例

explain はクエリ実行プラン情報を取得するために使用されます。 1. 文法次のように、sele...

HTML+CSSを使用してTG-visionホームページを作成する方法

今回はHTML+CSSレイアウトを使用して、TG-vision Shuanghui Mediaのホー...