json文字列とjsonオブジェクトを相互に変換するメソッドをjsで実装する

js を使用して開発するプロセスでは、json 文字列と json オブジェクトを相互に変換する必要があります。では、json 文字列から json オブジェクトへの変換、および json オブジェクトから json 文字列への変換はどのように実装されるのでしょうか。次に具体例をご紹介します。

1. JSON文字列をJSONオブジェクトに変換します

var obj = JSON.parse(str[, reviver]);

例:

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null
JSON.parse('1');               //  1

reviver: 関数の場合、元の値が返される前に実行されます。その方法の後。

JSON 文字列を解析し、対応する値を返す追加の変換関数を渡して、生成された値とその属性を返す前に特定の変更を加えることができます。関数のパラメーター k と v は、それぞれ返される属性名と属性値を表します

JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }
 
JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});
 
// 1
// 2
// 4
// 6
// 5
// 3
// ""

2. JSON オブジェクトを JSON 文字列に変換します。

JSON.stringify(value[, replacer [, space]])

value は JSON 文字列値にシリアル化されます。

replacer オプション このパラメーターが関数の場合、シリアル化プロセス中に、シリアル化された値の各属性が関数によって変換され、処理されます。

space は、オプションで、出力を美しくするために使用されるインデント用の空白文字列を指定します (整形)。パラメーターが数値の場合、上限は 10 です。値が 1 未満の場合は、スペースがないことを意味します。パラメータが文字列 (文字列の最初の 10 文字) の場合、パラメータが指定されていない場合 (または null の場合)、その文字列はスペースとして扱われます。スペースはありません。例:

JSON.stringify({});                        // '{}'
JSON.stringify(true);                      // 'true'
JSON.stringify("foo");                     // '"foo"'
JSON.stringify([1, "false", false]);       // '[1,"false",false]'
JSON.stringify({ x: 5 });                  // '{"x":5}'
 
JSON.stringify({x: 5, y: 6});             
// "{"x":5,"y":6}"
 
JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
// '[1,"false",false]'
 
JSON.stringify({x: undefined, y: Object, z: Symbol("")});
// '{}'
 
JSON.stringify([undefined, Object, Symbol("")]);         
// '[null,null,null]'
 
JSON.stringify({[Symbol("foo")]: "foo"});                
// '{}'
 
JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]);
// '{}'
 
JSON.stringify(
    {[Symbol.for("foo")]: "foo"},
    function (k, v) {
        if (typeof k === "symbol"){
            return "a symbol";
        }
    }
);
 
 
// undefined
 
// 不可枚举的属性默认会被忽略：
JSON.stringify(
    Object.create(
        null,
        {
            x: { value: 'x', enumerable: false },
            y: { value: 'y', enumerable: true }
        }
    )
);
 
// "{"y":"y"}"

replacer が配列の場合、配列の値は JSON 文字列にシリアル化されるプロパティ名を表します。

JSON.stringify(foo, ['week', 'month']); 
// '{"week":45,"month":7}', 只保留“week”和“month”属性值。

3. JSON.stringify を localStorage と組み合わせて使用​​します

ユーザーが作成したオブジェクトを保存し、ブラウザを閉じた後でもそのオブジェクトを復元したい場合があります。次の例は、この状況に適した JSON.stringify のテンプレートです。

// 创建一个示例数据
var session = {
    'screens' : [],
    'state' : true
};
session.screens.push({"name":"screenA", "width":450, "height":250});
session.screens.push({"name":"screenB", "width":650, "height":350});
session.screens.push({"name":"screenC", "width":750, "height":120});
session.screens.push({"name":"screenD", "width":250, "height":60});
session.screens.push({"name":"screenE", "width":390, "height":120});
session.screens.push({"name":"screenF", "width":1240, "height":650});
 
// 使用 JSON.stringify 转换为 JSON 字符串
// 然后使用 localStorage 保存在 session 名称里
localStorage.setItem('session', JSON.stringify(session));
 
// 然后是如何转换通过 JSON.stringify 生成的字符串，该字符串以 JSON 格式保存在 localStorage 里
var restoredSession = JSON.parse(localStorage.getItem('session'));
 
// 现在 restoredSession 包含了保存在 localStorage 里的对象
console.log(restoredSession);

4. IE8 より前の古いバージョンでのポリフィルのサポート

JSON オブジェクトは、ブラウザの古いバージョンではサポートされていない可能性があります。 JS スクリプトの先頭に次のコードを配置すると、JSON オブジェクトをネイティブにサポートしていないブラウザ (IE6 など) で JSON オブジェクトを使用できるようになります。

次のアルゴリズムはネイティブ JSON オブジェクトの模倣です:

JSON3.js の cdn を導入することもできます

<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script>
  JSON.stringify({"Hello": 123});
  // => &#39;{"Hello":123}&#39;
  JSON.parse("[[1, 2, 3], 1, 2, 3, 4]", function (key, value) {
    if (typeof value == "number") {
      value = value % 2 ? "Odd" : "Even";
    }
    return value;
  });
  // => [["Odd", "Even", "Odd"], "Odd", "Even", "Odd", "Even"]
</script>

関連する推奨事項:

js json 文字列を json オブジェクトに変換するためのメソッド分析

以上がjson文字列とjsonオブジェクトを相互に変換するメソッドをjsで実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。