ホームページ > ウェブフロントエンド > jsチュートリアル > js は eval を使用して json を解析します (js で json を使用)_javascript スキル

js は eval を使用して json を解析します (js で json を使用)_javascript スキル

WBOY
リリース: 2016-05-16 17:03:27
オリジナル
1022 人が閲覧しました

まず eval の使用法について説明します。内容は比較的簡単です。慣れている方は省略してください。
eval 関数は、s が文字列でない場合、s を直接返します。 。それ以外の場合は、s ステートメントを実行します。 s ステートメントの実行結果が値の場合はその値が返され、それ以外の場合は未定義が返されます。 オブジェクト宣言構文「{}」は値を返すことができないことに注意してください。値を返すには括弧で囲む必要があります。簡単な例は次のとおりです。

コードをコピー コードは次のとおりです:
var s1='"a" 2' ; // 式
var s2='{a:2}' //ステートメント
alert(eval(s1)) //->'a2'
alert(eval(s2)); ; / /->未定義
alert('(' s2 ')') //->[オブジェクト オブジェクト]

ご覧のとおり、オブジェクト宣言ステートメントは実行されるだけで、値を返すことはできません。

「{}」などの一般的に使用されるオブジェクト宣言ステートメントを返すには、その値を返す前に括弧で囲んで式に変換する必要があります。これは、Ajax 開発で JSON を使用する基本原則の 1 つでもあります。この例では、2 番目のアラート ステートメントは未定義を出力し、括弧を追加した後の 3 番目のアラート ステートメントはステートメントで表されるオブジェクトを出力することが明確にわかります。

次に、この記事の焦点である関数内でグローバル コードを実行する方法について説明します。この問題を説明するために、例を見てみましょう:

コードをコピーします コードは次のとおりです。
var s='global'; //グローバル変数
関数を定義しますdemo1(){
eval('var s="local"');
}
demo1();
alert(s); ;グローバル

上記のdemo1関数は、ローカル変数sを定義する関数demo1(){var s='local';}と同等です。

結局のところ、最終的な出力がグローバルであることは驚くべきことではありません。ローカル変数とグローバル変数は誰でも明確に区別できます。
注意深く体験すると、eval 関数の特徴がわかります。これは、変数定義であっても、呼び出されるコンテキスト変数空間 (パッケージ、クロージャーとも呼ばれます) 内で常に実行されます。または関数定義であるため、次のようになります。このコードでは、未定義関数エラーが生成されます:

コードをコピー コードは次のとおりです。
var s='function test(){ return 1; }'; //関数定義ステートメント
function demo2(){
eval(s);
}
demo2();
alert(test()); /-> ;エラー:テストが定義されていません

これは、テスト関数がローカル空間に定義されており、demo2 関数内ではアクセスできますが、外部からはアクセスできないためです。

共有: JS の eval を使用して JSON を解析する際の注意点

JS で JSON 文字列を JSON データ形式に解析するには、通常 2 つの方法があります。

1. 1 つは eval() 関数を使用することです。

2. Function オブジェクトを使用してリターン分析を実行します。

eval 関数を使用して解析し、jquery の各メソッドを使用して走査します

jquery を使用して JSON データを解析します。jquery 非同期リクエストの送信オブジェクトとして、ここで考慮されるのは、プラグを使用したカプセル化の場合、サーバーによって返される文字列の形式です。 -in JSONObject など JSON オブジェクトもこれに似ているため、ここでは説明しません。

ここではまず JSON 文字列セットを示します。文字列セットは次のとおりです。

コードをコピー コードは次のとおりです。
var data="
{
ルート :
[
{名前:'1',値:'0'},
{名前:'6101',値:'北京'},
{名前:'6102 ', value:'天津市'},
{name:'6103',value:'上海市'},
{name:'6104',value:'重慶市'},
{名前: '6105',値:'渭南市'}、
{名前:'6106',値:'延安市'}、
{名前:'6107',値:'漢中市' }、
{名前:'6108'、値:'楡林市'}、
{名前:'6109'、値:'安康市'}、
{名前:'6110'、値: '商洛市' }
]
}";

jqueryで非同期に取得するデータ型、jsonオブジェクトと文字列をベースに、2通りの方法で得られた結果の処理方法を紹介します。

1. サーバーから返される JSON 文字列について、jquery 非同期リクエストに型の説明がない場合、または文字列として受け入れられる場合、メソッドはそれほど面倒ではありません。 eval()に文字列を入れると1回実行されます。このメソッドは、通常の javascipt を使用して json オブジェクトを取得する場合にも適しています。次に例を示します。

var dataObj=eval("(" data ")");//json オブジェクトに変換します

eval に「("(" data ")");//」を追加する必要があるのはなぜですか?

理由は、eval 自体の問題です。 jsonは「{}」で始まり最後が「{}」で終わるため、JSではステートメントブロックとして処理されるため、強制的に式に変換する必要があります。

かっこを追加する目的は、JavaScript コードの処理時に、かっこ内の式をステートメントとして実行するのではなく、eval 関数で強制的にオブジェクトに変換することです。たとえば、オブジェクト リテラル {} が外側の大かっこで追加されていない場合、eval は中かっこを JavaScript コード ブロックの開始マークと終了マークとして認識し、{} は空のステートメントを実行するとみなされます。したがって、次の 2 つの実行結果は異なります:


コードをコピーします コードは次のとおりです:
alert( eval("{}"); // 未定義を返します
alert(eval("({})"); // オブジェクト[Object]

を返します この種の記述は JS のいたるところで見られます。

例: (function()) {}(); クロージャー操作などを行う場合。

コードをコピー コードは次のとおりです。
alert(dataObj.root.length); //出力 ルートの子オブジェクトの数
$.each(dataObj.root,fucntion(idx,item){
if(idx==0){
return true;
}
//出力 各ルート サブオブジェクトの名前と値
alert("name:" item.name ",value:" item.value)


;
注: 一般的な js で json オブジェクトを生成するには、$.each() メソッドを for ステートメントに置き換えるだけで済み、その他は変更されません。

2. サーバーから返される JSON 文字列の場合、jquery 非同期リクエストがタイプ (通常はこの構成属性) を「json」に設定するか、$.getJSON() メソッドを使用してサーバーからの戻り値を取得する場合、 eval() メソッドを使用する必要はありません。この時点で取得される結果はすでに json オブジェクトであるため、オブジェクトを直接呼び出すだけで済みます。ここでは、データ処理メソッドを説明するための例として $.getJSON メソッドが使用されています。


$.getJSON("http:// www.xx.cn/",{param:"gaoyusi"} ,function(data){
//ここで返されるデータはすでに json オブジェクトです
//以下の他の操作は最初の操作と同じですcase
$.each(data.root,function(idx,item) {
if(idx==0){
return true;//countinue と同じ、break と同じ false を返す
}
alert("name:" item.name ",value:" item. value);



ここで特別な注意が必要なのは、メソッド 1 の eval() メソッドが文字列 (おそらく js スクリプト) を動的に実行するため、システムのセキュリティ上の問題が簡単に発生する可能性があることです。したがって、eval() を回避するサードパーティのクライアント スクリプト ライブラリを使用できます。たとえば、JavaScript の JSON は 3K 未満のスクリプト ライブラリを提供します。
2 番目の解析方法は、Function オブジェクトを使用することです。その典型的な用途は、JQUERY の AJAX メソッドでの成功などの返されたデータの解析です。

コードをコピー

コードは次のとおりです:var json='{"name": "CJ" ,"年齢":18}';
data =(new Function("","re​​turn " json))();


このときのデータは json オブジェクトであり、json オブジェクトに解析されます

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