JSON-Objekt (grafisches Tutorial, einfach und grob)

In diesem Artikel werden hauptsächlich relevante Informationen zur detaillierten Erklärung von JSON-Objekten vorgestellt und einfache Beispielcodes angehängt, um allen beim Lernen und Nachschlagen zu helfen. Freunde in Not können sich auf die vorherigen Wörter beziehen

Der vollständige Name von JSON (Javascript Object Notation) ist Javascript Object Notation. Es handelt sich um ein Textformat für den Datenaustausch, nicht um eine Programmiersprache, die zum Lesen strukturierter Daten verwendet wird. Es wurde 2001 von Douglas Crockford mit dem Ziel vorgeschlagen, das umständliche und umständliche XML-Format zu ersetzen. In diesem Artikel wird der Inhalt von JSON ausführlich vorgestellt.

Grammatikregeln

Die Syntax von JSON kann die folgenden drei Arten von Werten darstellen

[1] Einfacher Wert

Einfache Werte verwenden dieselbe Syntax wie JavaScript und können Zeichenfolgen, numerische Werte, boolesche Werte und Nullen in JSON darstellen

Zeichenfolgen müssen durch doppelte Anführungszeichen dargestellt werden. Einfache Anführungszeichen können nicht verwendet werden. Der Wert muss dezimal ausgedrückt werden und NaN und Infinity können nicht verwendet werden

[Hinweis] JSON unterstützt den in JavaScript undefinierten Sonderwert

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

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

[2] Objekt

Ein komplexer Datentyp, der eine geordnete Menge von Schlüssel-Wert-Paaren darstellt. Der Wert in jedem Schlüssel-Wert-Paar kann ein einfacher Wert oder ein komplexer Datentypwert sein

Im Vergleich zu JavaScript-Objektliteralen weist JSON drei Unterschiede auf

1. JSON hat kein Variablenkonzept

2. In JSON muss der Schlüsselname des Objekts in doppelte Anführungszeichen gesetzt werden

3. Da JSON keine Javascript-Anweisung ist, gibt es am Ende kein Semikolon

[Hinweis] Zwei Eigenschaften mit demselben Namen sollten nicht im selben Objekt erscheinen

//合格的对象
{
  "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;
 }
} // 不能使用函数和日期对象

【3】Array

Array ist ebenfalls ein komplexer Datentyp, der eine Menge geordneter Werte A darstellt Liste, auf deren Werte über einen numerischen Index zugegriffen werden kann. Der Wert des Arrays kann auch von beliebigem Typ sein – einfacher Wert, Objekt oder Array

Das JSON-Array hat auch keine Variablen und Semikolons. Durch die Kombination von Arrays und Objekten können komplexere Datensammlungen gebildet werden

[. Hinweis] Nach dem letzten Mitglied eines Arrays oder Objekts kann kein Komma hinzugefügt werden analysiert als nützliche Javascript-Objekte

ECMAScript5 standardisiert das Verhalten beim Parsen von JSON und definiert das globale Objekt JSON

[Hinweis] IE7-Browser unterstützt nicht

Es gibt zwei JSON-Objekte Methoden: stringify() und parse(). Diese beiden Methoden werden verwendet, um JavaScript-Objekte in JSON-Strings zu serialisieren und JSON-Strings in native JavaScript-Werte zu analysieren. Die JSON.stringify()-Methode wird zum Konvertieren eines Werts in verwendet eine Zeichenfolge. Die Zeichenfolge sollte dem JSON-Format entsprechen und kann mit der JSON.parse()-Methode

wiederhergestellt werden. Standardmäßig enthält die von JSON.stringify() ausgegebene JSON-Zeichenfolge keine Leerzeichen oder Einrückungen

var jsonObj = {
  "title":"javascript",
  "group":{
    "name":"jia",
    "tel":12345
  }
};
//{"title":"javascript","group":{"name":"jia","tel":12345}}
JSON.stringify(jsonObj);

Spezifische Konvertierung

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":"张三"}'

Die stringify()-Methode konvertiert reguläre Ausdrücke und mathematische Objekte in die String-Form leerer Objekte

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

Die stringify()-Methode konvertiert Datumsangaben Objekte und Wrapper-Objekte werden in Zeichenfolgen konvertiert

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

Wenn die Mitglieder des Objekts undefiniert oder Funktionen sind, wird dieses Mitglied weggelassen

Wenn die Mitglieder des Arrays undefiniert sind oder Funktionen haben, werden diese Werte werden in null konvertiert

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

　Die JSON.stringify()-Methode ignoriert die nicht durchlaufbaren Eigenschaften des Objekts

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

Parameter

　JSON.stringify() außer für die Serialisierung Zusätzlich zum JavaScript-Objekt kann es auch zwei weitere Parameter empfangen, mit denen verschiedene Arten der Serialisierung des JavaScript-Objekts angegeben werden. Der erste Parameter ist ein Filter, der ein Array oder eine Funktion sein kann; der zweite Parameter ist eine Option, die angibt, ob die Einrückung in der JSON-Zeichenfolge beibehalten werden soll

[Array-Filter]

Wenn die Der zweite Parameter der stringify()-Methode ist ein Array. Dies entspricht der Implementierung der Funktion eines Filters

[1] Der Filter ist nur für die Attribute der ersten Ebene des Objekts wirksam

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

　【2】Filter ist für Arrays ungültig

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

[Funktionsparameter]

　Der zweite Parameter der stringify()-Methode kann auch eine Funktion sein. Die übergebene Funktion empfängt zwei Parameter, den Attributnamen (Schlüssel) und den Attributwert

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

. Der Attributname kann nur eine Zeichenfolge sein, und wenn der Wert nicht der Wert der Schlüssel-Wert-Paarstruktur ist , der Schlüsselname kann ein Leerzeichen sein

Dieser Funktionsparameter verarbeitet alle Schlüssel rekursiv

Im folgenden Code wird das Objekt o insgesamt dreimal von der f-Funktion verarbeitet. Beim ersten Mal ist der Schlüsselname leer, der Schlüsselwert ist das gesamte Objekt o; beim zweiten Mal ist der Schlüsselname a, ist der Schlüsselwert {b:1}; beim dritten Mal ist der Schlüsselname b, der Schlüsselwert 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}}'

Der von der Funktion zurückgegebene Wert ist der Wert des entsprechenden Schlüssels. Wenn die Funktion undefiniert zurückgibt oder keinen Rückgabewert hat, wird das entsprechende Attribut ignoriert

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

[Indent]

　 Die stringify()-Methode kann auch einen dritten Parameter akzeptieren, um die Rückgabe zu erhöhen Die Lesbarkeit der JSON-Zeichenfolge

Wenn es sich um eine Zahl handelt, bedeutet dies das vor jedem Attribut hinzugefügte Leerzeichen (nicht mehr als 10)

Wenn es sich um eine Zeichenfolge handelt (nicht mehr als 10 Zeichen) , die Zeichenfolge wird vor jeder Zeile hinzugefügt

/*"{
 "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()

Manchmal kann JSON.stringify() den Bedarf an benutzerdefinierter Serialisierung bestimmter Objekte immer noch nicht erfüllen. In diesen Fällen können Sie die toJSON()-Methode für das Objekt aufrufen, um sein eigenes JSON-Datenformat zurückzugeben

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字符集编码与解码（图文教程）

Das obige ist der detaillierte Inhalt vonJSON-Objekt (grafisches Tutorial, einfach und grob). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!