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 axios インターセプターは、繰り返しリクエストのキャンセルによく使用されます。

導入前回の記事では、axios のシンプルなカプセル化と、axios インターセプターの適用シナリオ...

ウェブサイトのテキストはまだデザインする必要がありますか?

多くの人が、ウェブサイト上のテキストはデザインする必要があるのか​​と疑問に思うかもしれません。多く...

Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体

目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...

ユーザー中心設計

最近、デジタル デザイン コミュニティで「誰が何を担当するのか」という明らかな混乱についてよく質問さ...

Nginx ドメイン名 SSL 証明書の構成 (Web サイトの http を https にアップグレード)

序文HTTP と HTTPS日常生活でよく使われる URL は、おおまかに次の 2 種類に分けられま...

GitHub のサードパーティ認証方式を Vue で実装する例

目次OAuth アプリの作成コードを取得するaccess_tokenを取得するユーザー情報を取得する...

Centos7 に MySQL 8.0.23 をインストールする手順 (初心者レベル)

まず、MySQL とは何かを簡単に紹介します。簡単に言えば、データベースはデータを格納するための倉庫...

HTML の左右レイアウトのサンプルコード

CS: ...コードをコピーコードは次のとおりです。 html,body{ margin:0px; ...

Reactは二次的連鎖効果(階段効果)を実現する

この記事では、二次リンク効果を実現するためのReactの具体的なコードを参考までに共有します。具体的...

モバイル ブラウザのビューポート パラメータ (Web フロントエンド デザイン)

モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...

MySQL での実行計画の explain コマンド例の詳細な説明

序文explain コマンドは、クエリ オプティマイザーがクエリの実行を決定した方法を確認する主な方...

練習と面接のための Linux シェル スクリプトのヒント 9 つを共有する

予防1) 先頭にインタープリターを追加します: #!/bin/bash 2) 構文のインデントに 4...

開発者がデータベースロックを詳細に理解する必要がある理由

1.ロックしますか? 1.1 ロックとは何ですか?ロックの本当の意味は、鍵またはコードで開くことがで...

Docker+daocloudはフロントエンドプロジェクトの自動構築とデプロイを実現します

自動プロジェクト展開は大企業やユニコーン企業でよく使用され、手動でプロジェクトを展開するよりも効率的...

MySQL 8.0 redo ログの詳細な分析

目次序文REDOログの生成REDOログ送信REDOログの保存と通知ユーザースレッドに通知要約する序文...