今日、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適応の方法
目次1.ライフサイクルとは何か2. Vueのライフサイクル3. ライフサイクルフック関数1.ライフサ...
概要MySQL には独自のイベント スケジューラもあり、これは Linux の crontab ジョ...
通常のプロジェクトでは、1 回の入札で同時にデータを更新および照会する必要があるという問題によく遭遇...
この文書はMySQL Server 8.0.3のインストールと設定方法を参考のために記録したものです...
序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...
区切り文字なしの文字列抽出質問の要件データベース内のフィールド値:実装効果: 1行のデータを複数行に...
Union は、重複行を除外し、デフォルトのソートを実行する、データに対する結合操作です。Union...
マージントップの崩壊とはmargin-top の崩壊は、CSS ボックス モデルで発生する現象です。...
1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...
目次必要:ドライブ:アイデア:成し遂げる:個人的には、実際の開発ではストアド プロシージャの使用はお...
<br />私はいつもYahooのウェブデザインが素晴らしいと信じてきました。しかし、こ...
目次ターゲット思考分析コード着陸要約するターゲットトークンの有効期限切れシナリオの処理トークンは、ユ...
目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...
1. ノードサーバーのセットアップ + データベース接続ここでの操作は比較的簡単でわかりやすいです。...
目次1. 機能紹介2. キーコード2.1 ホームページの機能2.2 製品情報を追加する2.3 データ...