[解決済み] ネストされたJSONオブジェクトをフラット化/アンフラット化する最速の方法
質問
複雑でネストしたJSONオブジェクトをフラット化したりアンフラット化したりするためのコードをいくつか作成しました。それは動作しますが、少し遅いです(「長いスクリプト」の警告が表示されます)。
フラット化された名前には、デリミタとして "." が必要で、配列には [INDEX] が必要です。
例
un-flattened | flattened
---------------------------
{foo:{bar:false}} => {"foo.bar":false}
{a:[{b:["c","d"]}]} => {"a[0].b[0]":"c","a[0].b[1]":"d"}
[1,[2,[3,4],5],6] => {"[0]":1,"[1].[0]":2,"[1].[1].[0]":3,"[1].[1].[1]":4,"[1].[2]":5,"[2]":6}
私のユースケースをシミュレートしたベンチマークを作成しました。 http://jsfiddle.net/WSzec/
- ネストしたJSONオブジェクトを取得する
- 平らにする
- 平坦化された状態で目を通し、場合によっては修正する。
- 元のネストされたフォーマットに戻して出荷するためにアンフラットする
より高速なコードを希望します。明確には、JSFiddleベンチマークを完了するコード( http://jsfiddle.net/WSzec/ ) IE 9+、FF 24+、Chrome 29+で大幅に高速化(~20%以上なら良い)されます。
以下、該当するJavaScriptのコードです。現在の最速 http://jsfiddle.net/WSzec/6/
JSON.unflatten = function(data) {
"use strict";
if (Object(data) !== data || Array.isArray(data))
return data;
var result = {}, cur, prop, idx, last, temp;
for(var p in data) {
cur = result, prop = "", last = 0;
do {
idx = p.indexOf(".", last);
temp = p.substring(last, idx !== -1 ? idx : undefined);
cur = cur[prop] || (cur[prop] = (!isNaN(parseInt(temp)) ? [] : {}));
prop = temp;
last = idx + 1;
} while(idx >= 0);
cur[prop] = data[p];
}
return result[""];
}
JSON.flatten = function(data) {
var result = {};
function recurse (cur, prop) {
if (Object(cur) !== cur) {
result[prop] = cur;
} else if (Array.isArray(cur)) {
for(var i=0, l=cur.length; i<l; i++)
recurse(cur[i], prop ? prop+"."+i : ""+i);
if (l == 0)
result[prop] = [];
} else {
var isEmpty = true;
for (var p in cur) {
isEmpty = false;
recurse(cur[p], prop ? prop+"."+p : p);
}
if (isEmpty)
result[prop] = {};
}
}
recurse(data, "");
return result;
}
EDIT 1 上記を現在最速の@Bergi 'sの実装に修正しました。余談ですが、 "regex.exec" の代わりに ".indexOf" を使うと、FFでは20%ほど速くなりますが、Chromeでは20%遅くなります; なので、よりシンプルなregexを使うことにします(以下はregexを置き換えるために indexOfを使って私が試したことです http://jsfiddle.net/WSzec/2/ ).
EDIT 2 Bergi さんのアイデアを元に、より高速な非REGEXバージョンを作成することができました(FFで3倍、Chromeで10%程度高速化されました)。 http://jsfiddle.net/WSzec/6/ この(現在の)実装では、キー名のルールは単純で、キーは整数で始まるか、ピリオドを含んではいけないというものです。
例
- {"foo":{"bar":[0]}} => {"foo.bar.0":0} のようになります。
EDIT 3 (String.split ではなく) @AaditMShah のインラインパス解析アプローチを追加することで、unflatten のパフォーマンスを改善することができました。全体的なパフォーマンスの向上が達成されたことにとても満足しています。
最新のjsfiddleとjsperfです。
http://jsperf.com/flatten-un-flatten/4
解決方法は?
以下は、私のもっと短い実装です。
Object.unflatten = function(data) {
"use strict";
if (Object(data) !== data || Array.isArray(data))
return data;
var regex = /\.?([^.\[\]]+)|\[(\d+)\]/g,
resultholder = {};
for (var p in data) {
var cur = resultholder,
prop = "",
m;
while (m = regex.exec(p)) {
cur = cur[prop] || (cur[prop] = (m[2] ? [] : {}));
prop = m[2] || m[1];
}
cur[prop] = data[p];
}
return resultholder[""] || resultholder;
};
flatten
はあまり変わっていません(そして、これらの
isEmpty
の場合)。
Object.flatten = function(data) {
var result = {};
function recurse (cur, prop) {
if (Object(cur) !== cur) {
result[prop] = cur;
} else if (Array.isArray(cur)) {
for(var i=0, l=cur.length; i<l; i++)
recurse(cur[i], prop + "[" + i + "]");
if (l == 0)
result[prop] = [];
} else {
var isEmpty = true;
for (var p in cur) {
isEmpty = false;
recurse(cur[p], prop ? prop+"."+p : p);
}
if (isEmpty && prop)
result[prop] = {};
}
}
recurse(data, "");
return result;
}
一緒に ベンチマークを実行する は約半分の時間で完了します(Opera 12.16:〜1900msのところ〜900ms、Chrome 29: ~Opera 12.16:〜1900msではなく〜900ms、Chrome 29:〜1600msではなく〜800ms)。
注意 このソリューションや、ここで回答している他のほとんどのソリューションは、スピードに重点を置いており、以下のような影響を受けやすい。 プロトタイプ汚染 信頼されていないオブジェクトには使用しないでください。
関連
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] なぜGoogleはJSONレスポンスにwhile(1);を前置するのでしょうか?
-
[解決済み] JavaScriptでJSONをきれいに印刷する
-
[解決済み] 2つのJavaScriptオブジェクトのプロパティを動的にマージするにはどうすればよいですか?
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] 配列の結合/平坦化
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules