Implémentation de méthodes de conversion de chaînes json et d'objets json les unes dans les autres dans js

Dans le processus d'utilisation de js pour le développement, les chaînes json et les objets json doivent être convertis les uns dans les autres. Alors, comment les chaînes json sont-elles converties en objets json et les objets json en chaînes json ? Ensuite, je vais vous montrer un exemple spécifique.

1. Convertir une chaîne JSON en objet JSON

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

Exemple :

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 : S'il s'agit d'une fonction, elle revient après avoir exécuté sa méthode sur la valeur d'origine avant d'être renvoyée.

Analysez la chaîne JSON et renvoyez la valeur correspondante. Vous pouvez transmettre une fonction de conversion supplémentaire pour apporter quelques modifications à la valeur générée et à ses attributs avant de la renvoyer. Les paramètres k et v de la fonction représentent respectivement le nom et la valeur de l'attribut renvoyés

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. Convertissez l'objet JSON en une chaîne JSON.

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

value sera sérialisée en une valeur de chaîne JSON.

replacer Facultatif Si ce paramètre est une fonction, lors du processus de sérialisation, chaque attribut de la valeur sérialisée sera converti et traité par la fonction.

space spécifie éventuellement une chaîne vide pour l'indentation, qui est utilisée pour embellir la sortie (pretty-print) si le paramètre est un nombre, il représente le nombre d'espaces ; la limite supérieure est de 10 ; Si la valeur est inférieure à 1, cela signifie qu'il n'y a pas d'espaces ; si le paramètre est une chaîne (les dix premières lettres de la chaîne), la chaîne sera traitée comme des espaces si le paramètre n'est pas fourni (ou est nul) ; il n'y aura pas d'espace. Exemple :

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"}"

Si replacer est un tableau, la valeur du tableau représente le nom de la propriété qui sera sérialisée dans une chaîne JSON.

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

3. Utilisez JSON.stringify combiné avec le stockage local localStorage

Parfois, vous souhaitez stocker un objet créé par l'utilisateur et le restaurer même après la fermeture de l'objet du navigateur. L'exemple suivant est un modèle pour JSON.stringify adapté à cette situation :

// 创建一个示例数据
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. Prise en charge de Polyfill pour les anciennes versions inférieures à IE8

Les objets JSON ne peuvent pas être parcourus par la prise en charge du serveur des anciennes versions . Vous pouvez placer le code suivant au début du script JS afin de pouvoir utiliser les objets JSON dans les navigateurs qui ne prennent pas en charge nativement les objets JSON (tels que IE6).

L'algorithme suivant est une imitation d'objets JSON natifs :

Vous pouvez également introduire le cdn de JSON3.js

<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>

Recommandations associées :

Analyse de la méthode js de conversion d'une chaîne json en objet json

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!