今日、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 メソッドを使用してそれらをインターセプトすることはできません。結果として生じる問題は、新しく生成された配列オブジェクトの値を変更すると、元の配列内のオブジェクトの値に影響が及ぶことです。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: ab ツールを使用してサーバー上で API ストレス テストを実行します。
>>: ウェブレスポンシブレイアウトにおけるiframe適応の方法
導入前回の記事では、axios のシンプルなカプセル化と、axios インターセプターの適用シナリオ...
多くの人が、ウェブサイト上のテキストはデザインする必要があるのかと疑問に思うかもしれません。多く...
目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...
最近、デジタル デザイン コミュニティで「誰が何を担当するのか」という明らかな混乱についてよく質問さ...
序文HTTP と HTTPS日常生活でよく使われる URL は、おおまかに次の 2 種類に分けられま...
目次OAuth アプリの作成コードを取得するaccess_tokenを取得するユーザー情報を取得する...
まず、MySQL とは何かを簡単に紹介します。簡単に言えば、データベースはデータを格納するための倉庫...
CS: ...コードをコピーコードは次のとおりです。 html,body{ margin:0px; ...
この記事では、二次リンク効果を実現するためのReactの具体的なコードを参考までに共有します。具体的...
モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...
序文explain コマンドは、クエリ オプティマイザーがクエリの実行を決定した方法を確認する主な方...
予防1) 先頭にインタープリターを追加します: #!/bin/bash 2) 構文のインデントに 4...
1.ロックしますか? 1.1 ロックとは何ですか?ロックの本当の意味は、鍵またはコードで開くことがで...
自動プロジェクト展開は大企業やユニコーン企業でよく使用され、手動でプロジェクトを展開するよりも効率的...
目次序文REDOログの生成REDOログ送信REDOログの保存と通知ユーザースレッドに通知要約する序文...