Maison > interface Web > js tutoriel > le corps du texte

Objet JSON (tutoriel graphique, simple et brut)

亚连
Libérer: 2018-05-19 15:25:48
original
1568 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur l'explication détaillée des objets JSON et joint des exemples de codes simples pour aider tout le monde à apprendre et à référencer. Les amis dans le besoin peuvent se référer aux mots précédents

Le nom complet de json (notation d'objet javascript) est une notation d'objet javascript. Il s'agit d'un format de texte pour l'échange de données, pas d'un langage de programmation, utilisé pour lire des données structurées. Il a été proposé par Douglas Crockford en 2001 dans le but de remplacer le format XML encombrant et encombrant. Cet article présentera en détail le contenu de json

Règles de grammaire

La syntaxe de JSON peut représenter les trois types de valeurs suivants

[1] Valeur simple

Les valeurs simples utilisent la même syntaxe que JavaScript et peuvent représenter des chaînes, des valeurs numériques, des valeurs booléennes et null en JSON

Les chaînes doivent être représentées par des guillemets doubles, Les guillemets simples ne peuvent pas être utilisés. La valeur doit être exprimée en décimal, et NaN et Infinity

ne peuvent pas être utilisés [Remarque] JSON ne prend pas en charge la valeur spéciale non définie

//合格的简单值
5
"hello world"
true
null
Copier après la connexion
//不合格的简单值
+0x1
'hello world'
undefined
NaN
Infinity
Copier après la connexion
[2] Objet

< en JavaScript 🎜> L'objet, en tant que type de données complexe, représente un ensemble de paires clé-valeur ordonnées. La valeur de chaque paire clé-valeur peut être une valeur simple ou une valeur de type de données complexe

Par rapport aux littéraux d'objet JavaScript, json présente trois différences

1. JSON n'a aucun concept de variables

2. En JSON, le nom de clé de l'objet doit être placé entre guillemets doubles

3. Comme JSON n'est pas une instruction javascript, il n'y a pas de point-virgule à la fin

[Note] Deux propriétés portant le même nom ne doivent pas apparaître dans le même objet

//合格的对象
{
  "name":"huochai",
  "age":29,
  "school":{
    "name":"diankeyuan",
    "location":"beijing"
  }
}
Copier après la connexion
【3】Array
//不合格的对象
{ name: "张三", &#39;age&#39;: 32 }//属性名必须使用双引号
{};//不需要末尾的分号
{ "birthday": new Date(&#39;Fri, 26 Aug 2011 07:13:10 GMT&#39;),
 "getName": function() {
   return this.name;
 }
} // 不能使用函数和日期对象
Copier après la connexion

Le tableau est également un type de données complexe, représentant un An liste ordonnée de valeurs accessibles par index numérique. La valeur du tableau peut également être de n'importe quel type - valeur simple, objet ou tableau

Le tableau JSON n'a pas non plus de variables ni de points-virgules. La combinaison de tableaux et d'objets peut former des collections de données plus complexes

[. Remarque] Aucune virgule ne peut être ajoutée après le dernier membre d'un tableau ou d'un objet

Objet JSON

La raison pour laquelle JSON est populaire est que la structure de données JSON peut être analysé comme objets javascript utiles

ECMAScript5 standardise le comportement d'analyse de JSON et définit l'objet global JSON

[Remarque] Le navigateur IE7 ne prend pas en charge

Il existe deux objets JSON Méthodes : stringify() et parse(). Ces deux méthodes sont utilisées pour sérialiser les objets JavaScript en chaînes JSON et analyser les chaînes JSON en valeurs JavaScript natives

stringify()

La méthode JSON.stringify() est utilisée pour convertir une valeur en. une chaîne. La chaîne doit être conforme au format JSON et peut être restaurée par la méthode JSON.parse()

Par défaut, la chaîne JSON générée par JSON.stringify() n'inclut aucun espace ni indentation

var jsonObj = {
  "title":"javascript",
  "group":{
    "name":"jia",
    "tel":12345
  }
};
//{"title":"javascript","group":{"name":"jia","tel":12345}}
JSON.stringify(jsonObj);
Copier après la connexion
Conversion spécifique

La méthode stringify() convertit les expressions régulières et les objets mathématiques sous forme de chaîne d'objets vides
JSON.stringify(&#39;abc&#39;) // ""abc""
JSON.stringify(1) // "1"
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"
JSON.stringify([1, "false", false])// &#39;[1,"false",false]&#39;
JSON.stringify({ name: "张三" })// &#39;{"name":"张三"}&#39;
Copier après la connexion

Le La méthode stringify() convertit les objets date et les objets wrapper en chaînes
JSON.stringify(/foo/) // "{}"
JSON.stringify(Math) // "{}"
Copier après la connexion

Si les membres de l'objet ne sont pas définis ou fonctionnent, ce membre sera omis
JSON.stringify(new Boolean(true)) //"true"
JSON.stringify(new String(&#39;123&#39;)) //""123""
JSON.stringify(new Number(1)) //"1"
JSON.stringify(new Date()) //""2016-09-20T02:26:38.294Z""
Copier après la connexion

Si les membres du tableau sont indéfini ou fonction, ces valeurs​​sont converties en null

La méthode JSON.stringify() ignorera les propriétés non traversables de l'objet
JSON.stringify({
 a: function(){},
 b: undefined,
 c: [ function(){}, undefined ]
});
// "{"c":[null,null]}"
Copier après la connexion

var obj = {};
Object.defineProperties(obj, {
 &#39;foo&#39;: {
  value: 1,
  enumerable: true
 },
 &#39;bar&#39;: {
  value: 2,
  enumerable: false
 }
});
JSON.stringify(obj); // {"foo":1}]
Copier après la connexion
paramètres

En plus de l'objet JavaScript à sérialiser, JSON.stringify() peut également recevoir deux autres paramètres, qui sont utilisés pour spécifier différentes manières de sérialiser l'objet JavaScript. Le premier paramètre est un filtre, qui peut être un tableau ou une fonction ; le deuxième paramètre est une option, indiquant s'il faut conserver l'indentation dans la chaîne JSON

[Array Filter]

Lorsque le le deuxième paramètre de la méthode stringify() est un tableau, cela équivaut à implémenter la fonction d'un filtre

[1] Le filtre n'est efficace que pour les attributs de premier niveau de l'objet

 【2】Le filtre n'est pas valide pour les tableaux
var jsonObj = {
  "title":"javascript",
  "group":{
    "a":1
  }
};
//{"group":{"a":1}}
console.log(JSON.stringify(jsonObj,["group","a"]))
Copier après la connexion

[Paramètres de la fonction]
var jsonObj =[1,2];
JSON.stringify(jsonObj,["0"])//"[1,2]"
Copier après la connexion

 Le deuxième paramètre de la méthode stringify() peut également être une fonction. La fonction transmise reçoit deux paramètres, le nom de l'attribut (clé) et la valeur de l'attribut

Le nom de l'attribut ne peut être qu'une chaîne, et lorsque la valeur n'est pas la valeur de la clé. structure de paire de valeurs, le nom de la clé peut être Chaîne vide
JSON.stringify({a:1,b:2}, function(key, value){
 if (typeof value === "number") {
  value = 2 * value;
 }
 return value;  
})
// "{"a":2,"b":4}"
Copier après la connexion

Ce paramètre de fonction traitera de manière récursive toutes les clés

Dans le code suivant, l'objet o sera traité par la fonction f trois fois au total. La première fois que le nom de la clé est vide, la valeur de la clé est l'objet entier o ; la deuxième fois que le nom de la clé est a, la valeur de la clé est {b:1} ; la troisième fois que le nom de la clé est b, la valeur de la clé est 1

La valeur renvoyée par la fonction est la valeur de la clé correspondante. Si la fonction renvoie undéfini ou n'a pas de valeur de retour, l'attribut correspondant sera ignoré
JSON.stringify({a: {b: 1}}, function (key, value) {
 console.log("["+ key +"]:" + value);
 return value;
})
// []:[object Object]
// [a]:[object Object]
// [b]:1
// &#39;{"a":{"b":1}}&#39;
Copier après la connexion

[Indent]
JSON.stringify({ a: "abc", b: 123 }, function (key, value) {
 if (typeof(value) === "string") {
  return undefined;
 }
 return value;
})
// &#39;{"b": 123}&#39;
Copier après la connexion

La méthode stringify() peut également accepter un troisième paramètre pour augmenter la lisibilité de la chaîne JSON renvoyée

Si c'est un nombre, cela signifie l'espace ajouté devant chaque attribut (pas plus de 10)

Si c'est une chaîne (pas plus de 10 caractères ), la chaîne sera ajoutée devant chaque ligne

Parfois, JSON.stringify() ne peut toujours pas répondre au besoin de sérialisation personnalisée de certains objets. Dans ces cas, vous pouvez appeler la méthode toJSON() sur l'objet pour renvoyer son propre format de données JSON
/*"{
 "p1": 1,
 "p2": 2
}"*/
JSON.stringify({ p1: 1, p2: 2 }, null, 2);
//"{"p1":1,"p2":2}"
JSON.stringify({ p1: 1, p2: 2 }, null, 0);
/*"{
|-"p1": 1,
|-"p2": 2
}"*/
JSON.stringify({ p1:1, p2:2 }, null, &#39;|-&#39;);
toJSON()
Copier après la connexion
JSON.stringify({
 toJSON: function () {
  return "Cool"
 }
})
// ""Cool""
Copier après la connexion
var o = {
 foo: &#39;foo&#39;,
 toJSON: function() {
  return &#39;bar&#39;;
 }
};
JSON.stringify({x: o});// &#39;{"x":"bar"}&#39;
Copier après la connexion

  如果toJSON()方法返回undefined,此时如果包含它的对象嵌入在另一个对象中,会导致该对象的值变成null。而如果包含它的对象是顶级对象,结果就是undefined

JSON.stringify({
 toJSON: function () {
  return undefined
 }
})
//undefined
Copier après la connexion

  Date对象部署了一个自己的toJSON方法,自动将Date对象转换成日期字符串

JSON.stringify(new Date("2016-08-29"))
// "2016-08-29T00:00:00.000Z"
Copier après la connexion

  toJSON方法的一个应用是,可以将正则对象自动转为字符串

RegExp.prototype.toJSON =RegExp.prototype.toString;
JSON.stringify(/foo/)// ""/foo/""
Copier après la connexion

  toJSON()可以作为函数过滤器的补充,因此理解序列化的内部顺序十分重要。假设把一个对象传入JSON.stringify(),序列化该对象的顺序如下

  1、如果存在toJSON()方法而且能通过它取得有效的值,则调用该方法。否则,按默认顺序执行序列化

  2、如果提供了第二个参数,应用这个函数过滤器。传入函数过滤器的值是第一步返回的值

  3、对第二步返回的每个值进行相应的序列化

  4、如果提供了第三个参数,执行相应的格式化

parse()

  JSON.parse方法用于将JSON字符串转化成对象

JSON.parse(&#39;{}&#39;) // {}
JSON.parse(&#39;true&#39;) // true
JSON.parse(&#39;"foo"&#39;) // "foo"
JSON.parse(&#39;[1, 5, "false"]&#39;) // [1, 5, "false"]
JSON.parse(&#39;null&#39;) // null
var o = JSON.parse(&#39;{"name": "张三"}&#39;);
o.name // 张三
Copier après la connexion

  如果传入的字符串不是有效的JSON格式,JSON.parse方法将报错

//Uncaught SyntaxError: Unexpected token u in JSON at position 0(…)
JSON.parse("'String'")

//Uncaught SyntaxError: Unexpected token u in JSON at position 0(…)
JSON.parse("undefined")
  JSON.parse()方法也可以接收一个函数参数,在每个键值对儿上调用,这个函数被称为还原函数(reviver)。该函数接收两个参数,一个键和一个值,返回一个值

  如果还原函数返回undefined,则表示要从结果中删除相应的键;如果返回其他值,则将该值插入到结果中

var o = JSON.parse(&#39;{"a":1,"b":2}&#39;, function(key, value) {
 if (key === &#39;&#39;){
  return value;
 }
 if (key === &#39;a&#39;) {
  return value + 10;
 }
});
o.a // 11
o.b // undefinef
Copier après la connexion

  在将日期字符串转换为Date对象时,经常要用到还原函数

var book = {
  "title": "javascript",
  "date": new Date(2016,9,1)
}
var jsonStr = JSON.stringify(book);
//&#39;{"title":"javascript","date":"2016-09-30T16:00:00.000Z"}&#39;&#39;
console.log(jsonStr)

var bookCopy = JSON.parse(jsonStr,function(key,value){
  if(key == &#39;date&#39;){
    return new Date(value);
  }
  return value;
})
console.log(bookCopy.date.getFullYear());//2016
Copier après la connexion

eval()

  实际上,eval()类似于JSON.parse()方法,可以将json字符串转换为json对象

eval(&#39;(&#39; + &#39;{"a":1}&#39;+&#39;)&#39;).a;//1
JSON.parse(&#39;{"a":1}&#39;).a;//1
Copier après la connexion

  但是,eval()可以执行不符合JSON格式的代码,有可能会包含恶意代码

eval(&#39;(&#39; + &#39;{"a":alert(1)}&#39;+&#39;)&#39;).a;//弹出1
JSON.parse(&#39;{"a":alert(1)}&#39;).a;//报错
Copier après la connexion

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

原生js实现节日时间倒计时功能(附上代码)

关于在不同页面之间实现参数传递的几种方式(详细为你解答)

详细为你解读JavaScript字符集编码与解码(图文教程)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal