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

推薦する

使用したコマンドを表示するLinuxコマンドメソッドの概要

システムでは多くのコマンドが使用されていますが、使用したコマンドをどのように確認すればよいでしょうか...

jQueryはHTML要素の非表示と表示を実装します

商品を検索するときに、すべてのブランドまたは一部のブランドを表示するTaobaoの機能を真似してみま...

MySQLにおけるトランザクションの永続性実装原理の詳細な説明

序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...

CentOS7 ファイアウォールとポート関連コマンドの紹介

目次1. ファイアウォールの現在の状態を確認する2. ファイアウォールサービスを開始する3. ファイ...

CSS3 で虫眼鏡効果を模倣するいくつかの方法の原理の分析

記事のタイトルが「模造虫眼鏡」なのはなぜですか?今日お話ししたいのは、一般的に言われているような、マ...

MySQLで偽または真を保存する方法

MySQL ブール値、偽または真を格納つまり、データベースに保存されるブール値は 0 と 1 であり...

MySQL無料インストール版のパスワード設定に関する詳細なチュートリアル

方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...

Linux ログ内のキーワードとその前後の情報を検索する方法の例

日常業務では、ログを表示する必要がよくあります。たとえば、 tail コマンドを使用してログをリアル...

CSS で 3D ルービック キューブを実装するサンプル コード

今日は簡単な3Dルービックキューブを作ってみましょうまずはレンダリングを見てみましょう!これを学んだ...

Linux で XFS パーティション形式のルート ディレクトリを縮小する方法

目次序文システム環境現在のシステムパーティションレイアウトデータのバックアップレスキューモードに入る...

GIFアニメーション効果を模倣した自動ビデオ再生を実現するWeChatアプレットの例

需要背景:ミニプログラムページに GIF ダイナミック画像を挿入しますが、GIF 画像は通常サイズが...

HTML いくつかの特別な分割線効果

1. 基本ライン 2. 特殊効果(効果は独立しておらず、互いに組み合わせることができます) 1. 両...

Docker Compose で環境変数を参照する方法の例

プロジェクトでは、さまざまな条件や使用シナリオを制御するために、docker-compose.yml...

Docker で Selenium グリッド分散環境を構築する実用的な方法

最近、Zoom ビデオ会議をテストし、100 人が同時に会議に参加することをシミュレートする必要があ...

LeetCode の SQL 実装 (197. 気温上昇)

[LeetCode] 197.気温上昇Weather テーブルが指定されている場合、前の日付 (昨...