Objet JSON (tutoriel graphique, simple et brut)

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

Règles de grammaire

//合格的简单值
5
"hello world"
true
null

//不合格的简单值
+0x1
'hello world'
undefined
NaN
Infinity

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

//不合格的对象
{ name: "张三", 'age': 32 }//属性名必须使用双引号
{};//不需要末尾的分号
{ "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
 "getName": function() {
   return this.name;
 }
} // 不能使用函数和日期对象

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

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

JSON.stringify('abc') // ""abc""
JSON.stringify(1) // "1"
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"
JSON.stringify([1, "false", false])// '[1,"false",false]'
JSON.stringify({ name: "张三" })// '{"name":"张三"}'

JSON.stringify(/foo/) // "{}"
JSON.stringify(Math) // "{}"

JSON.stringify(new Boolean(true)) //"true"
JSON.stringify(new String('123')) //""123""
JSON.stringify(new Number(1)) //"1"
JSON.stringify(new Date()) //""2016-09-20T02:26:38.294Z""

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

JSON.stringify({
 a: function(){},
 b: undefined,
 c: [ function(){}, undefined ]
});
// "{"c":[null,null]}"

var obj = {};
Object.defineProperties(obj, {
 'foo': {
  value: 1,
  enumerable: true
 },
 'bar': {
  value: 2,
  enumerable: false
 }
});
JSON.stringify(obj); // {"foo":1}]

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

var jsonObj = {
  "title":"javascript",
  "group":{
    "a":1
  }
};
//{"group":{"a":1}}
console.log(JSON.stringify(jsonObj,["group","a"]))

var jsonObj =[1,2];
JSON.stringify(jsonObj,["0"])//"[1,2]"

　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

JSON.stringify({a:1,b:2}, function(key, value){
 if (typeof value === "number") {
  value = 2 * value;
 }
 return value;  
})
// "{"a":2,"b":4}"

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

JSON.stringify({a: {b: 1}}, function (key, value) {
 console.log("["+ key +"]:" + value);
 return value;
})
// []:[object Object]
// [a]:[object Object]
// [b]:1
// '{"a":{"b":1}}'

JSON.stringify({ a: "abc", b: 123 }, function (key, value) {
 if (typeof(value) === "string") {
  return undefined;
 }
 return value;
})
// '{"b": 123}'

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

/*"{
 "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, '|-');
toJSON()

JSON.stringify({
 toJSON: function () {
  return "Cool"
 }
})
// ""Cool""

var o = {
 foo: 'foo',
 toJSON: function() {
  return 'bar';
 }
};
JSON.stringify({x: o});// '{"x":"bar"}'

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

JSON.stringify({
 toJSON: function () {
  return undefined
 }
})
//undefined

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

JSON.stringify(new Date("2016-08-29"))
// "2016-08-29T00:00:00.000Z"

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

RegExp.prototype.toJSON =RegExp.prototype.toString;
JSON.stringify(/foo/)// ""/foo/""

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

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

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

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

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

parse()

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

JSON.parse('{}') // {}
JSON.parse('true') // true
JSON.parse('"foo"') // "foo"
JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
JSON.parse('null') // null
var o = JSON.parse('{"name": "张三"}');
o.name // 张三

　　如果传入的字符串不是有效的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('{"a":1,"b":2}', function(key, value) {
 if (key === ''){
  return value;
 }
 if (key === 'a') {
  return value + 10;
 }
});
o.a // 11
o.b // undefinef

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

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

var bookCopy = JSON.parse(jsonStr,function(key,value){
  if(key == 'date'){
    return new Date(value);
  }
  return value;
})
console.log(bookCopy.date.getFullYear());//2016

eval()

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

eval('(' + '{"a":1}'+')').a;//1
JSON.parse('{"a":1}').a;//1

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

eval('(' + '{"a":alert(1)}'+')').a;//弹出1
JSON.parse('{"a":alert(1)}').a;//报错

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

相关文章：

原生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!