Explication détaillée de la définition d'objet JSON et des étapes d'instance de valeur dans JS

Cette fois, je vais vous apporter une explication détaillée des étapes pour définir et obtenir des valeurs d'objets JSON en JS Quelles sont les précautions pour définir et obtenir des valeurs d'objets JSON en JS. .Ce qui suit est un cas pratique.

1.JSON (JavaScript Object Notation) est un format de données simple qui est plus léger que XML. JSON est un format JavaScript natif, ce qui signifie qu'aucune API ou boîte à outils spéciale n'est requise pour gérer les données JSON en JavaScript.

Les règles de JSON sont simples : un objet est une collection non ordonnée de paires "nom:valeur". Un objet commence par "{" (crochet gauche) et se termine par "}" (crochet droit). Chaque "nom" est suivi d'un ":" (deux-points) ; les paires "nom/valeur" sont séparées par "," (virgule).

Les règles sont les suivantes :

1) Le mappage est représenté par deux points (":"). Nom : Valeur
2) Les données parallèles sont séparées par des virgules (","). Nom 1 : valeur 1, nom 2 : valeur 2
3) La collection mappée (objet) est représentée par des accolades ("{}"). {Nom 1 : Valeur 1, Nom 2 : Valeur 2}
4) La collection (tableau) de données parallèles est représentée par des crochets ("[]").
[
{name1:value,name2:value2},
{name1:value,name2:value2}
]
5) Les types que peuvent avoir les valeurs des éléments : string, number, object, array, true, false, null

2. Cinq méthodes d'écriture en json :

1) Manière traditionnelle de stocker des données et d'appeler des données

<script type="text/javascript">
//JS传统方式下定义"类"
function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
}
//JS传统方式下创建"对象"
var p = new Person(20141028,"一叶扁舟",22); 
//调用类中的属性，显示该Person的信息
window.alert(p.id);
window.alert(p.name);
window.alert(p.age);
</script>

2) Le premier style :

<script type="text/javascript">
var person = {
id:001,
name:"一叶扁舟",
age:23
}
window.alert("编号:"+person.id);
window.alert("用户名:"+person.name);
window.alert("年龄:"+person.age);
</script>

3) Le deuxième style :

<script type="text/javascript">
var p = [
{id:001,name:"一叶扁舟",age:22},
{id:002,name:"无悔",age:23},
{id:003,name:"无悔_一叶扁舟",age:24}
]; 
 
for(var i = 0; i < p.length; i++){
window.alert("编号:"+p[i].id);
window.alert("用户名:"+p[i].name);
window.alert("年龄:"+p[i].age);
 
}
</script>

4) Le troisième style :

<script type="text/javascript">
var p = {
"province":[
{"city":"福州"},
{"city":"厦门"},
{"city":"莆田"}
]
};
window.alert("所在城市：" + p.province[0].city);
</script>

5) Le quatrième style :

<script type="text/javascript">
var p = {
"ids":[
{"id":001},
{"id":002},
{"id":003}
],
"names":[
{"name":"一叶扁舟"},
{"name":"无悔"},
{"name":"无悔_一叶扁舟"}
]
}; 
 
for(var i = 0; i < p.names.length; i++){
window.alert("名字:"+p.names[i].name); 
}
for(var i = 0; i < p.ids.length; i++){
window.alert("id:"+p.ids[i].id);
}
 
</script>

6) Le cinquième style :

<script type="text/javascript">
var p = {
"province":["福州","厦门","莆田"]
};
window.alert("城市的个数:"+p.province.length);
window.alert("分别是：\n");
for(var i=0;i<p.province.length;i++){
window.alert(p.province[i]);
}
</script>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des choses plus excitantes, veuillez faire attention à php. D'autres articles connexes sur le site chinois !

Lecture recommandée :

Analyse de cas d'utilisation de JS Promise

Implémentation jQuery de l'analyse de cas pratique de requête floue

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!