ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript が Json 文字列を走査し、ブラウザーが一貫性のない結果を出力する

JavaScript が Json 文字列を走査し、ブラウザーが一貫性のない結果を出力する

高洛峰
リリース: 2016-12-07 17:19:50
オリジナル
1200 人が閲覧しました

本文を紹介する前に、jsonとは何かについて説明しましょう。

JSON (JavaScript Object Notation) は、JavaScript Object Notation と呼ばれる軽量のデータ交換形式です。データ転送に JSON を使用する利点の 1 つは、JSON が実際には JavaScript であることです。これは、ECMAScript バージョン 3 の JavaScript オブジェクト リテラル構文サブセットに基づくテキスト形式です。これは、responseText を使用してサーバーから JSON データを取得し、JavaScript の eval() メソッドを使用して JSON 文字列を JavaScript オブジェクトに変換できることを意味します。その後、追加の JavaScript を使用すると、処理せずにオブジェクトからデータを簡単に抽出できます。 .ドム。

私たちはプロジェクトに取り組むときに JavaScript json をよく使用します。

まず、JavaScriptのjson文字列とは何かについて話しましょう。json文字列はJavaScriptのオブジェクトに属し、キーと値に対応するオブジェクトを持っています。

一般的な形式は次のとおりです:

a = {
a1 : 1,
a2 : 'abc',
a3 : 'abc',
a4 : [1,2,3],
a5 : function(){console.log(12)}
};
ログイン後にコピー

この JSON を読み取る方法は、for in ループを通過することです

JSON 文字列を使用する利点は、データベース内のデータを読み取れることです。これにより、サーバーへのリクエストの数が大幅に削減され、フロントエンド ページの読み込み効率が向上します。

JSON をトラバースするときに多くの問題に遭遇します。今日私が遭遇した問題は、JSON 文字列のキー値を数値として記述すると、トラバース時に出力される JSON が主流のブラウザーに従わないということです。 , ただし、番号が小さいものから大きいものの順に並んでいます。ただし、IE8 未満のブラウザでは、出力した順序で出力されます。

例:

a = {
'1' : 1,
'5' : function(){console.log(12)},
'2' : 'abc',
'4' : [1,2,3],
'3' : {'5' : 'abc', '6' : 'bcd'},
};
ログイン後にコピー

ループ内でスルー

for(var i in a){
console.log(a[i]);
}
ログイン後にコピー

Chrome、Firefox、その他のブラウザの出力: 1、abc、Object { 5="abc", 6="bcd"}, [ 1, 2, 3], function();

ie8 および次のブラウザ: 1, function(), abc, [1, 2, 3], Object { 5="abc", 6="bcd"} ;

この問題を解決するには 2 つの方法があります:

1 つ目は、数値のキー値を文字またはアンダースコアを含む文字列に変更することです

2 つ目は、最初に json と次に、キー値が配列に格納され、配列がソートされて配列をループし、JSON 内のデータが取得されます。

具体的なコード:

var arr = [],sortNumber = function (a,b){
return a - b;
};
for(var i in a){
arr[arr.length] = a[i];
arr.sort(sortNumber);
for(var x = 0; x < arr.length; x++) {
console.log(a[arr[x]]);
}
ログイン後にコピー

欠点の 1 つは、これが出力される json 形式では出力されないことです。これは、ブラウザーの互換性の問題のみを解決します。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート