今日、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. データベースエンジン1.1 ビューデータベースエンジン1.2 デフォルトのデータベースエン...
Web ページを作成する場合、通常、コンピューターの画面サイズと携帯電話の画面サイズの違いなどの問題...
目次プロセスコミュニケーションプロセス間の双方向通信問題要約するサードパーティのデータ サプライヤー...
ウェブフロントエンドのウェブサイトの気質は感情であり、言葉なしでユーザーを魅了できる感情です。では、...
はじめに: Windows 10 を再インストールし、同時にファイルを整理しました。しかし、MySQ...
目次序文1. Props、$emit一方向データフロー2. $親、$子3. $attrs、$list...
1. ファイアウォールの状態を確認するファイアウォールのステータスを確認する systemctl s...
UI カットのプロセスでは、ページはヘッダー、コンテンツ、フッターの 3 つの部分で構成されることが...
MySQL の一般的なシナリオ: 2 つのデータ セットの交差と差を取得するステップ1. 2つのコレ...
プログラマーが日常的に TypeScript/JavaScript 開発を行う場合、複雑な Java...
目次文章LOCKパラメータアルゴリズムパラメータCOPY TABLE プロセスIN-PLACEプロセ...
/******************** * キャラクターデバイスドライバー**********...
目次なぜパーティションが必要なのでしょうか?パーティショニング戦略パーティションの危険性なぜパーティ...
explain はクエリ実行プラン情報を取得するために使用されます。 1. 文法次のように、sele...
今回はHTML+CSSレイアウトを使用して、TG-vision Shuanghui Mediaのホー...