Maison  >  Article  >  interface Web  >  JSON pour l'apprentissage et la compréhension de JavaScript (partage de résumé)

JSON pour l'apprentissage et la compréhension de JavaScript (partage de résumé)

WBOY
WBOYavant
2022-03-23 13:16:571814parcourir

Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement des problèmes liés à JSON, notamment les objets JSON, les tableaux JSON, les chaînes JSON, etc. J'espère qu'il sera utile à tout le monde.

JSON pour l'apprentissage et la compréhension de JavaScript (partage de résumé)

Recommandations associées : Tutoriel Javascript

1. Objet JSON

Description de la tâche

Cette tâche : Entraînez-vous à définir des objets JSON en JavaScript.

Les exigences spécifiques sont les suivantes :

  • Définir un objet JSON JSONObject, qui possède trois attributs : key1, key2 et key3. Leurs valeurs sont respectivement les paramètres a, b et c ; un nommé key3 Attribute ;

  • Une fois la suppression terminée, parcourez tous les attributs restants et renvoyez une chaîne concaténée avec les valeurs de chaque attribut, séparées par

  • Puisque JSON est utilisé pour transmettre des données, il doit d'abord être stocké, le stockage des données nécessite un certain format de données

    Les formats de données couramment utilisés pour JSON incluent les objets JSON, les tableaux JSON et les chaînes JSON.

Qu'est-ce qu'un objet JSONL'objet JSON (communément appelé JSON) est un format d'échange de données texte utilisé pour stocker et transmettre des données. Un exemple est le suivant :

{"name":"Jerry", "age":15}

Il s'agit d'un simple objet json, ses règles sont :

文本数据的交换格式,用于存储和传输数据。示例如下:

var myObject = {
    id:1,
    name:"Peter Bruce",
    "first name":"Bruce",
    display:function() {
                console.log(this.name);
            }}

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

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

JSON对象与Javascript对象的区别

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

  1. 定义一个JavaScript对象:
{"id":1,"name":"Peter Bruce","first name":"Bruce"}
  1. 定义一个JSON对象:
 {"a":1,"b":2.12,"c":true,"d":"string","e":null};
  1. 三点区别:

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


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

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

var jsonObject = {"name":"js","number":2};

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

在JavaScript中使用JSON对象

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

  • 在JavaScript中定义一个JSON对象:
console.log(jsonObject.name);
//读属性,输出jsconsole.log(jsonObject["name"]);
//读属性,输出jsjsonObject.name = "javascript";
//写属性,给name属性赋值javascript
  • 操作属性,使用.或者[]Les données existent sous la forme de paires clé/valeur
Les données sont séparées par des virgules ;
    Les accolades représentent les objets sauvegardés ;
  • les crochets représentent les tableaux sauvegardés.
La différence entre les objets JSON et les objets Javascript
  • JSON est basé sur la syntaxe JavaScript, il y a donc aussi le concept d'objets en JSON, mais il existe quelques petites différences par rapport aux objets en JavaScript.
Définir un objet JavaScript :

var jsonObject = {"name":"js","number":2};
delete jsonObject.name;
//删除name属性

Définir un objet JSON :

var jsonObject = {"name":"js","number":2};for(att in jsonObject) {
  console.log(jsonObject[att]);
  //依次输出js、2}

    Trois différences :


  • (1) Le
  • le nom d'attribut (clé) de l'objet JSON doit être mis entre guillemets doubles
  • , tandis que l'objet JavaScript doit être placé entre guillemets doubles, sauf pour les noms d'attribut avec des espaces et des tirets - au milieu, les autres. sont facultatifs ;
    (2)
Les méthodes

ne peuvent pas être définies dans les objets JSON, mais elles peuvent être définies dans les Objets JavaScript ;
(3)

Les objets JSON peuvent être exploités par de nombreux langages et les objets JavaScript ne peuvent être reconnus que par JS lui-même
    .

    La méthode de définition d'un objet JSON est la suivante

    Il est inclus avec un {}, qui est composé de plusieurs attributs les noms et les valeurs d'attribut sont séparés par , et les noms d'attribut et les valeurs d'attribut sont séparés par  :. Les valeurs d'attribut peuvent être l'un des types de données suivants : nombres, chaînes, Tableau JSON, objet JSON, null. Par exemple :

    function mainJs(a,b,c) {
    	//请在此处编写代码
    	/********** Begin **********/
        var JSONObject = {"key1":a,"key2":b,"key3":c};
        delete JSONObject.key3;
        return a+","+b;
    	/********** End **********/}
    La situation où la valeur de l'attribut est un tableau JSON ou un objet JSON est légèrement plus compliquée, qui sera introduite dans les niveaux suivants. Utilisation d'objets JSON en JavaScript

    Tous les langages prenant en charge JSON peuvent utiliser des objets JSON. Ici, nous présentons uniquement comment utiliser les objets JSON en JavaScript.

    1. Définir un objet JSON en JavaScript :
    2. {"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}
      Pour faire fonctionner les attributs, utilisez . ou [] :
    1. {"class":"高三一班","studentNumber":70,"score":[
          {"name":"LiMing","score":128},
          {"name":"ZhangHua","score":134},
          {"name":"ShenLu","score":112}]}
    Supprimer les attributs, Utilisez delete :

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

    pour parcourir les propriétés, utilisez la boucle for-in :

    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}
    Fichier de code
    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 **********/}
    2, tableau JSON

    Description de la tâche🎜🎜🎜Cette tâche : définir et manipuler les valeurs des clés JSON La valeur de la paire. 🎜🎜🎜Les exigences spécifiques sont les suivantes : 🎜🎜🎜On sait que la valeur du troisième attribut de myJson est un tableau et que le paramètre a est un nombre. Il est nécessaire de séparer le premier élément a du tableau (. ces éléments sont tous de type chaîne). Séparez les éléments avec et renvoyez la chaîne concaténée 🎜🎜Par exemple, lorsque a vaut 2, vous devez renvoyer js ou java ; 🎜🎜🎜La valeur (valeur) correspondant à l'attribut JSON est un tableau 🎜🎜🎜La valeur (valeur) dans la paire clé-valeur JSON peut être un tableau 🎜🎜🎜Par exemple : 🎜
    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 **********/}
    🎜L'attribut bigCity a plusieurs valeurs , placez-les en un seul à l'intérieur du tableau. 🎜🎜Dans l'exemple ci-dessus, chaque élément du tableau est une chaîne. En fait, chaque élément du 🎜array peut aussi être un autre objet json🎜. Par exemple : 🎜
    var JSONObject  = {"k1":"v1","k2":"v2"};
    //JSON对象var JSONString1 = '{"k1":"v1","k2":"v2"}';
    //JSON字符串
    🎜La valeur de l'attribut score ci-dessus est un tableau, et chaque élément de ce tableau est un objet json. 🎜🎜Quelques opérations sur les tableaux🎜🎜🎜🎜Lire et écrire des éléments : 🎜🎜🎜
    var JSONString1 = '{"k1":"v1","k2":"v2"}';console.log(JSON.parse(JSONString1));
    //输出Object {k1: "v1", k2: "v2"}
    🎜🎜🎜Traverse : 🎜🎜🎜
    //对象的每一个属性的值加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}
    🎜Fichier de code🎜🎜[La première méthode a été écrite plus tard, et celle ci-dessous a été utilisée au début La deuxième méthode, parce que je ne pouvais pas le faire à l'époque, j'ai pensé à la sortir directement]🎜
    var JSONObject = {"k1":"v1","k2":"v2"};
    JSON.stringify(JSONObject);
    //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}
    🎜3. Chaîne JSON🎜🎜Description de la tâche🎜🎜🎜Tâche de ce niveau : Pratiquer la conversion mutuelle des chaînes JSON et des objets JavaScript. . 🎜🎜🎜Les exigences spécifiques sont les suivantes :🎜
    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字符串

    上面的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"}

    函数参数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}

    如上面所示,函数的参数有两个,其中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字符串

    参数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}

    参数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}

    这里简单介绍一下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
    //}

    参数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 **********/}

    相关推荐: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!

    Déclaration:
    Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer