Heim > Web-Frontend > js-Tutorial > JSON zum Erlernen und Verstehen von JavaScript (Zusammenfassungsfreigabe)

JSON zum Erlernen und Verstehen von JavaScript (Zusammenfassungsfreigabe)

WBOY
Freigeben: 2022-03-23 14:01:00
nach vorne
1846 Leute haben es durchsucht

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript, in dem hauptsächlich Probleme im Zusammenhang mit JSON vorgestellt werden, einschließlich JSON-Objekten, JSON-Arrays, JSON-Strings usw. Ich hoffe, dass er für alle hilfreich ist.

JSON zum Erlernen und Verstehen von JavaScript (Zusammenfassungsfreigabe)

Verwandte Empfehlungen: Javascript-Tutorial

1. JSON-Objekt

Aufgabenbeschreibung

Diese Aufgabe: Üben Sie das Definieren von JSON-Objekten in JavaScript.

Die spezifischen Anforderungen sind wie folgt:

  • Definieren Sie ein JSON-Objekt, das drei Attribute hat: key1, key2 und key3. Ihre Werte sind die Parameter a, b und c.

  • Löschen Sie das ein benanntes key3-Attribut;

  • Nachdem der Löschvorgang abgeschlossen ist, durchlaufen Sie alle verbleibenden Attribute und geben eine Zeichenfolge zurück, die mit den Werten jedes Attributs verkettet ist, getrennt durch

Da JSON zum Übertragen von Daten verwendet wird, Es muss zuerst gespeichert werden, das Speichern von Daten erfordert ein bestimmtes Datenformat Zu den häufig verwendeten Datenformaten für JSON gehören JSON-Objekte, JSON-Arrays und JSON-Strings.

Was ist ein JSON-Objekt?

JSON-Objekt (allgemein JSON genannt) ist ein Textdaten-Austauschformat, das zum Speichern und Übertragen von Daten verwendet wird. Ein Beispiel ist wie folgt: 文本数据的交换格式,用于存储和传输数据。示例如下:

{"name":"Jerry", "age":15}
Nach dem Login kopieren

这就是一个简单的json对象,它的规则是:

  • 数据以键/值对的形式存在;
  • 数据之间用逗号间隔;
  • 大括号表示保存对象;
  • 方括号表示保存数组。

JSON对象与Javascript对象的区别

JSON是基于JavaScript语法的,所以JSON中也有对象的概念,但是和JavaScript中的对象有一些小的区别。

  1. 定义一个JavaScript对象:
var myObject = {
    id:1,
    name:"Peter Bruce",
    "first name":"Bruce",
    display:function() {
                console.log(this.name);
            }}
Nach dem Login kopieren
  1. 定义一个JSON对象:
{"id":1,"name":"Peter Bruce","first name":"Bruce"}
Nach dem Login kopieren
  1. 三点区别:

(1)JSON对象的属性名(key)必须被包含在双引号之中,而JavaScript对象除了有空格的属性名、中间有连字符-的属性名必须在双引号之中外,其它随意;
(2)不能在JSON对象中定义方法,而在JavaScript对象中可以;
(3)JSON对象可以被很多语言操作,而JavaScript对象只有JS自己可以识别


  1. 定义JSON对象的方法如下

用一个{}包含在内,内部是若干个属性名和属性值构成的键值对,键值对之间用,隔开,属性名和属性值之间用:隔开,属性值可以是以下任意一种数据类型的数据:数字、字符串、JSON数组、JSON对象、null。如:

 {"a":1,"b":2.12,"c":true,"d":"string","e":null};
Nach dem Login kopieren

属性值是JSON数组或者JSON对象的情况稍复杂,后面的关卡将介绍。

在JavaScript中使用JSON对象

支持JSON的语言都能够使用JSON对象,这里仅介绍在JavaScript中如何使用JSON对象。

  • 在JavaScript中定义一个JSON对象:
var jsonObject = {"name":"js","number":2};
Nach dem Login kopieren
  • 操作属性,使用.或者[]
    console.log(jsonObject.name);
    //读属性,输出jsconsole.log(jsonObject["name"]);
    //读属性,输出jsjsonObject.name = "javascript";
    //写属性,给name属性赋值javascript
    Nach dem Login kopieren
  • Dies ist ein einfaches JSON-Objekt, seine Regeln sind:
  • Daten liegen in Form von Schlüssel/Wert-Paaren vor; Daten werden durch Kommas getrennt;
  • Geschweifte Klammern stehen für speichernde Objekte;
    eckige Klammern stehen für speichernde Arrays.
  • Der Unterschied zwischen JSON-Objekten und Javascript-Objekten
JSON basiert auf der JavaScript-Syntax, daher gibt es auch das Konzept von Objekten in JSON, es gibt jedoch einige kleine Unterschiede zu Objekten in JavaScript.

Define ein JavaScript -Objekt:

var jsonObject = {"name":"js","number":2};
delete jsonObject.name;
//删除name属性
Nach dem Login kopieren
defin eines JSON -Objekt

Der Attributname (Schlüssel) des JSON-Objekts muss in doppelte Anführungszeichen gesetzt werden

, während das JavaScript-Objekt mit Ausnahme von Attributnamen mit Leerzeichen und Bindestrichen in der Mitte eingeschlossen werden muss sind optional;
(2)
    Methoden
  • können nicht in JSON-Objekten definiert werden, aber sie können in JavaScript-Objekten definiert werden;
    (3)
  • JSON-Objekte können von bedient werden Viele Sprachen und JavaScript-Objekte können nur von JS selbst erkannt werden
  • .

    Die Methode zum Definieren eines JSON-Objekts ist wie folgt:

  • Es ist in einem {} enthalten, der aus mehreren Attributen besteht Namen und Attributwerte werden durch getrennt, und Attributnamen und Attributwerte werden durch getrennt: Attributwerte können einen der folgenden Datentypen haben: Zahlen, Zeichenfolgen, JSON-Array, JSON-Objekt, null. Zum Beispiel:
var jsonObject = {"name":"js","number":2};for(att in jsonObject) {
  console.log(jsonObject[att]);
  //依次输出js、2}
Nach dem Login kopieren

Die Situation, in der der Attributwert ein JSON-Array oder ein JSON-Objekt ist, ist etwas komplizierter, was in den folgenden Ebenen vorgestellt wird.

JSON-Objekte in JavaScript verwenden

Alle Sprachen, die JSON unterstützen, können JSON-Objekte verwenden. Hier stellen wir nur die Verwendung von JSON-Objekten in JavaScript vor.

Definieren Sie ein JSON-Objekt in JavaScript:

function mainJs(a,b,c) {
	//请在此处编写代码
	/********** Begin **********/
    var JSONObject = {"key1":a,"key2":b,"key3":c};
    delete JSONObject.key3;
    return a+","+b;
	/********** End **********/}
Nach dem Login kopieren
  1. Um Attribute zu bedienen, verwenden Sie . oder []:
    {"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}
    Nach dem Login kopieren
    Attribute löschen, Verwenden Sie delete:
  1. {"class":"高三一班","studentNumber":70,"score":[
        {"name":"LiMing","score":128},
        {"name":"ZhangHua","score":134},
        {"name":"ShenLu","score":112}]}
    Nach dem Login kopieren

, um Eigenschaften zu durchlaufen, verwenden Sie die For-In-Schleife:

var myJson = {"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}console.log(myJson.bigCity[1]);
//打印出ShanghaimyJson.bigCity[0] = "GuangZhou";
//第一个元素被赋值为GuangZhou
Nach dem Login kopieren

Codedatei

var myJson = {"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}for(var i = 0;i < myJson.bigCity.length;i++) {
    console.log(myJson.bigCity[i]);//依次输出Peking,Shanghai,ShenZhen,HongKong}
Nach dem Login kopieren

2, JSON-Array

Aufgabenbeschreibung

Diese Aufgabe: JSON-Schlüsselwerte definieren und bearbeiten Der Wert des Paares.

🎜Die spezifischen Anforderungen lauten wie folgt: 🎜🎜🎜Es ist bekannt, dass der Wert des dritten Attributs von myJson ein Array ist und der Parameter a eine Zahl ist. Es ist erforderlich, die ersten a-Elemente im Array zu verbinden (). Diese Elemente sind alle Zeichenfolgentypen.) Trennen Sie die Elemente mit und geben Sie die verkettete Zeichenfolge zurück. 🎜🎜Wenn a beispielsweise 2 ist, müssen Sie js oder java zurückgeben. 🎜🎜🎜Der Wert (Wert), der dem JSON-Attribut entspricht, ist ein Array. 🎜🎜🎜Der Wert (Wert) im JSON-Schlüssel-Wert-Paar kann ein Array sein. 🎜🎜🎜Zum Beispiel: 🎜
var myJson = {
    "category":"computer",
    "detail":"programming",
    "language":[
    "js","java","php","python","c"
    ]}function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    var b = "";
    for(var i=0;i<a;i++){
        b = b+myJson.language[i]+",";
    }
    return b.slice(0,-1);
	/********** End **********/}
Nach dem Login kopieren
🎜Das Attribut bigCity hat mehrere Werte , fügen Sie sie in einem innerhalb des Arrays ein. 🎜🎜Im obigen Beispiel ist jedes Element des Arrays eine Zeichenfolge. Tatsächlich kann jedes Element des 🎜Arrays auch ein anderes JSON-Objekt🎜 sein. Beispiel: 🎜
var myJson = {
    "category":"computer",
    "detail":"programming",
    "language":[
    "js","java","php","python","c"
    ]}function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    if(a==1){
        return myJson.language[0];
    }
    if(a==2){
        return myJson.language[0]+","+myJson.language[1];
    }
    if(a==3){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2];
    }
    if(a==4){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2]+","+myJson.language[3];
    }
    if(a==5){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2]+","+myJson.language[3]+","+myJson.language[4];
    }
	/********** End **********/}
Nach dem Login kopieren
🎜Der Wert des obigen Score-Attributs ist ein Array, und jedes Element dieses Arrays ist ein JSON-Objekt. 🎜🎜Einige Operationen für Arrays🎜🎜🎜🎜Elemente lesen und schreiben: 🎜🎜🎜
var JSONObject  = {"k1":"v1","k2":"v2"};
//JSON对象var JSONString1 = '{"k1":"v1","k2":"v2"}';
//JSON字符串
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜🎜Traversal: 🎜🎜🎜
var JSONString1 = '{"k1":"v1","k2":"v2"}';console.log(JSON.parse(JSONString1));
//输出Object {k1: "v1", k2: "v2"}
Nach dem Login kopieren
Nach dem Login kopieren
🎜Codedatei🎜🎜[Die erste Methode wurde später geschrieben und die folgende wurde am Anfang verwendet Bei der zweiten Methode habe ich mir überlegt, sie direkt auszugeben, da ich sie damals nicht ausführen konnte: 🎜
//对象的每一个属性的值加1var text = '{ "key1":1, "key2":2, "key3":2.2}';var obj = JSON.parse(text, function (key, value) {
    if(key === '')//当遇到对象本身时,不进行加1操作
        return value;
    return value+1;//对属性值加1});console.log(obj);
    //输出Object {key1: 2, key2: 3, key3: 3.2}
Nach dem Login kopieren
Nach dem Login kopieren
var JSONObject = {"k1":"v1","k2":"v2"};
JSON.stringify(JSONObject);
//JSON对象转换为JSON字符串
Nach dem Login kopieren
Nach dem Login kopieren
🎜3. 🎜🎜🎜Die spezifischen Anforderungen sind wie folgt:🎜
  1. 先将JSON字符串JSONString转换为JavaScript对象JSONObject;
  2. 然后将JSONObject的key1属性的值设置为mainJs()函数的参数a;
  3. 最后将JSONObject转换为JSON字符串,并返回该字符串

在前端和后台之间传递数据可以使用JSON,但是实际上传递的是JSON字符串,而JSON对象是不可以直接进行传递的。

JSON字符串

JSON字符串就是在JSON对象两边套上'形成的字符串,如:

var JSONObject  = {"k1":"v1","k2":"v2"};
//JSON对象var JSONString1 = '{"k1":"v1","k2":"v2"}';
//JSON字符串
Nach dem Login kopieren
Nach dem Login kopieren

上面的JSONSring1就是JSON字符串,可以直接从前端传到后台或者后台传到前端。

当JavaScript收到从后台传来的JSON字符串后,怎么把它变成JSON对象方便处理呢?

JSON字符串到JavaScript对象

JSON.parse(a,b)方法将JSON字符串a转换为JavaScript对象。b是一个可选的函数参数。

var JSONString1 = '{"k1":"v1","k2":"v2"}';console.log(JSON.parse(JSONString1));
//输出Object {k1: "v1", k2: "v2"}
Nach dem Login kopieren
Nach dem Login kopieren

函数参数b按从里到外的顺序作用在对象的所有属性上,最后一个作用的是对象本身:

//对象的每一个属性的值加1var text = '{ "key1":1, "key2":2, "key3":2.2}';var obj = JSON.parse(text, function (key, value) {
    if(key === '')//当遇到对象本身时,不进行加1操作
        return value;
    return value+1;//对属性值加1});console.log(obj);
    //输出Object {key1: 2, key2: 3, key3: 3.2}
Nach dem Login kopieren
Nach dem Login kopieren

如上面所示,函数的参数有两个,其中key表示属性的名字,value表示属性的值,当遇到对象本身时,key的值为'',即空字符串。

JSON对象转换为JSON字符串

JSON.stringify(a,b,c)a是待转换的JSON对象,b和c为可选参数。

var JSONObject = {"k1":"v1","k2":"v2"};
JSON.stringify(JSONObject);
//JSON对象转换为JSON字符串
Nach dem Login kopieren
Nach dem Login kopieren

参数b为函数时,该函数按照从里到外的顺序处理JSON对象的每一个属性,最后一个处理的是JSON对象本身,处理完后再转为JSON字符串:

//对象的所有属性值加1,再转为字符串var JSONObject = {"k1":1,"k2":2.2};var JSONString = JSON.stringify(JSONObject,function(k,v){
    if(k === '')//处理到了JSON对象本身
        return v;
    return v+1;//所有的属性的值加1});console.log(JSONString);
    //输出{"k1":2,"k2":3.2}
Nach dem Login kopieren

参数b还可以是数组,数组存储的是属性的名字,用来指定只转换哪些属性:

//转换对象中特定的属性
var JSONObject = {"k1":1,"k2":2.2,"k3":3};var JSONString = JSON.stringify(JSONObject,["k1","k2"]);console.log(JSONString);
//输出{"k1":1,"k2":2.2}
Nach dem Login kopieren

这里简单介绍一下c:

var str = ["name":"Tom","age":16];var obj1 = JSON.stringify(str);
var obj2 = JSON.stringify(str,null,4);console.log(obj1);  
//输出{"name":"Tom","age":16}console.log(obj2); 
//输出
//{
//    "name": "Tom",
//    "age": 16
//}
Nach dem Login kopieren

参数c:文本添加缩进、空格和换行符,如果 c 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 c 大于 10,则文本缩进 10 个空格。

代码文件

var JSONString = '{"key1":"value1","key2":"value2"}';function mainJs(a) {
	//请在此处编写代码
	/********** Begin **********/
    var JSONObject = JSON.parse(JSONString);
    JSONObject["key1"] = a;
    JSONObject.key1 = a;
    return JSON.stringify(JSONObject);
	/********** End **********/}
Nach dem Login kopieren

相关推荐:javascript学习教程

Das obige ist der detaillierte Inhalt vonJSON zum Erlernen und Verstehen von JavaScript (Zusammenfassungsfreigabe). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage