Format de données léger - JSON

Je ne supporte vraiment pas ces mathématiques aujourd'hui

Changeons d'avis et écrivons sur le front-end
Écrivons un peu de connaissances sur JSON aujourd'hui

---

Il y a très, très longtemps, XML était la norme pour transmettre des données sur Internet
Mais tout le monde pense généralement que XML est trop encombrant
Plus tard, avec le développement du Web
les gens ont trouvé que JSON était plus pratique à utiliser comme sous-ensemble de la syntaxe JavaScript
Donc JSON C'est devenu un standard
Maintenant, tout le monde utilise JSON comme format de données pour la communication

Syntaxe de base JSON

(JSON : Notation d'objet JavaScript, Représentation d'objet JavaScript)
La syntaxe JSON est grossièrement divisée en trois types de valeurs

• Valeurs de type simple : peuvent représenter des chaînes , nombres, valeurs booléennes et null

• Objet : type de données complexe, représentant des paires clé-valeur non ordonnées

• Array : type de données complexe , représentant une liste de valeurs ordonnées

Notez que JSON ne prend pas en charge les valeurs indéfinies et ne prend pas en charge les fonctions

valeurs de type simple

Une seule valeur de type de base peut également être considérée comme JSON
Syntaxe et JavaScript identiques
Il n'y a qu'une seule chose à noter
Dans notre JavaScript, les chaînes peuvent être représentées par des guillemets doubles ou des guillemets simples
Mais le format de chaîne en JSON doit utiliser des guillemets doubles

objet

Puisque JSON est un sous-ensemble de la syntaxe JavaScript
, je parlerai principalement des différences
Premièrement, prenons un aperçu de notre format de déclaration littérale d'objet couramment utilisé

var man = {
    name: 'payen',
    sex: 'male',
    age: 19};

Nos objets JavaScript peuvent ajouter ou non des guillemets
à leurs attributs (afin de distinguer les objets ordinaires des objets JSON, ils ne sont généralement pas cités)
Mais en JSON, les objets nécessitent des guillemets (doubles) pour ajouter des attributs
Nous L'objet ci-dessus peut également être écrit comme ceci en JavaScript, ce qui est tout à fait équivalent à

var man = {    "name": "payen",    "sex": "male",    "age": 19};

Utiliser JSON pour représenter. l'objet ci-dessus est

{
    "name": "payen",
    "sex": "male",
    "age": 19}

(Il n'y a pas de notion de variables en JSON, et il n'y a pas de séparation.)
Bien entendu, la valeur d'un objet en JSON peut aussi être un objet
Quelle que soit la complexité du JSON, les clés (propriétés) de l'objet doivent être entourées de guillemets (doubles)

Array

Bien que dans notre JavaScript, les tableaux appartiennent strictement aux objets
, nous les traitons généralement différemment
Notre méthode commune de déclaration des littéraux de tableau

var value = [123, 'abc', true];

JSON a également la même syntaxe

[123, "abc", true]

Encore une fois, JSON n'a pas de variables et points-virgules

---

De manière générale, les tableaux et les objets sont les formes les plus externes de JSON
Grâce aux tableaux, aux objets et aux types simples, les valeurs peuvent construire divers formats de données JSON

Analyse JSON et sérialisation

La raison la plus importante pour laquelle JSON est populaire
est qu'il est plus facile à analyser en objets utiles

Objet JSON

Les premiers analyseurs JSON utilisaient eval() de JavaScript
Mais c'est risqué et peut exécuter du code malveillant
ES5 standardise l'analyse Le comportement de JSON
définit l'objet global JSON
qui a deux méthodes

• stringify ()
  Objet JavaScript –> Chaîne JSON

• parse()
  Chaîne JSON–> Objet JavaScript

Le plus l'usage de base est bien sûr
On utilise la variable à convertir comme paramètre Aller dans
Prenons un exemple (cet exemple sera toujours utilisé)

var man = {    &#39;name&#39;: "payen", <--
    sex: "male", <--
    "age": 19,    "school": {        "name": &#39;HUST&#39;,        "sex": undefined, <--
        "location": function(){} <--
    }
}
var str = JSON.stringify(man);
console.log(str);
console.log(typeof str);

Jetons un coup d'oeil à la console print

Vous pouvez voir que JSON.stringify est en réalité renvoyé une chaîne JSON
Nos attributs sans guillemets et entre guillemets simples sont devenus des guillemets doubles
dans la chaîne JSON, et le la valeur de l'attribut n'est pas définie ou l'attribut de la fonction est automatiquement ignoré
(les membres du prototype sont même ignorés)

Bien que JSON.stringify() rencontre une fonction non définie (y compris les symboles ES6) dans l'objet, elle sera automatiquement ignoré
Mais le tableau est différent
Le tableau ne le fait pas L'objet les chasse impitoyablement, mais renvoie null

console.log(JSON.stringify([123, undefined, null, function(){}]));

---

Nous pouvons utiliser JSON.parse à restaurer dans un objet JavaScript

console.log(JSON.parse(str));

Jetons un coup d'œil à l'utilisation approfondie de ces deux fonctions

stringifier la sérialisation

En plus de remplir les objets à sérialiser, cette méthode également Il peut également accepter deux paramètres
L'un est un filtre, qui peut être un tableau ou une fonction
L'autre est l'indentation du Chaîne JSON qui peut être spécifiée

Filtre

Filtre de tableau

La forme du tableau est relativement simple Nous pouvons spécifier les propriétés de l'objet que nous voulons
ou notre exemple ci-dessus.

var str = JSON.stringify(man,['name','sex']);
console.log(str);

Filtre de fonction

La fonction que nous transmettons reçoit deux paramètres, clé (nom de l'attribut) et valeur (valeur de l'attribut)
Le la valeur renvoyée est la valeur de la clé correspondante
Si la fonction renvoie undefined , l'attribut sera ignoré

var str = JSON.stringify(man, function(key, value){
    if(key == 'name'){        return 'abc';
    }    if(key == 'sex'){        return;
    }    return value;
});
console.log(str);

注意这里最后一定要写return value; 才能正常显示其他值
如果使用了switch语句就写default: return value;

缩进

空格填充

另一个参数可以填写数字指定缩进的空格数（最大缩进10）

var str = JSON.stringify(man, null, 4);
console.log(str);

字符填充

我们也可以指定缩进字符

var str = JSON.stringify(man, null, "- - ");
console.log(str);

toJSON()方法

可能有些时候stringify不够满足我们的需求
这时我们可以给对象定义toJSON()方法
（但仍然是调用stringify()方法）
返回自身的JSON的数据格式
原生Date对象有默认toJSON()返回日期字符串（同Date中方法toISOString()结果相同）

我们可以给我们的对象添加一个toJSON属性

var man = {    ...,
    toJSON: function(){        return this.school;
    }
}
var str = JSON.stringify(man);
console.log(str);

这里再多说一句
很多同学误认为toJSON()返回的是JSON字符串
其实不是的
toJSON()返回的应该是一个适当的值，然后由JSON.stringify()对其进行序列化
所以toJSON()是返回一个能够被字符串化的安全JSON值
下面我们来看看调用JSON.stringify()发生了什么

序列化对象顺序

• 如果对象有toJSON()并且能获得有效值，优先调用，否则返回对象本身

• 若有第二个参数，对上一步返回的对象应用过滤器

• 对上一步返回的每个值进行相应序列化

• 若有第三个参数，执行序列化

parse解析

JSON.parse也可以接受另一个参数，它是一个函数
类似于上面序列化中过滤器的过滤函数
它被称作还原函数，同样接受键和值作为参数
首先我现在我们例子中的对象添加一个方法

var man = {    ...,
    releaseDate: new Date(2016,11,11)
}
var str = JSON.stringify(man);
console.log(str);

我们看到，由于Date对象存在toJSON()
序列化之后调用了toJSON()
我们看到了这样的字符串

console.log(JSON.parse(str));

这样的数据不是我们想要的
这样的情况我们怎么处理呢？
答案是使用还原函数

---

可以这样做

var msg = JSON.parse(str,function(key, value){
    if(key == 'releaseDate'){        return new Date(value);
    }else{        return value;
    }
})
console.log(msg.releaseDate.getFullYear(),
            msg.releaseDate.getMonth(),
            msg.releaseDate.getDate());

这样我们就可以使用得到的时间数据了

小结

没想到写了这么多
JSON其实很简单
就是一个轻量级的数据格式
可以简化表示复杂数据结构的工作量
主要要掌握ES5的全局对象JSON中的两个方法JSON.stringify()和JSON.parse()
总结几个要记住的重点

• JSON.stringify()
  用于把JavaScript对象转换为JSON字符串
  可填写额外两个参数-筛选数组/替换函数和指定缩进
  

• 对象遇到undefined、function、symbol（ES6）会忽略

• 数组遇到undefined、function、symbol（ES6）会返回null

• JSON.parse()
  用于把JSON字符串转换为JavaScript对象
  可填写额外一个参数-还原函数

 以上就是轻量级数据格式——JSON的内容，更多相关内容请关注PHP中文网（www.php.cn）！