Detailed explanation of JSON object definition and value implementation steps in JS

This time I will bring you a detailed explanation of the steps for JSON object definition and value implementation in JS. What are the precautions for JSON object definition and value implementation in JS. The following is a practical case, let’s take a look. one time.

1.JSON (JavaScript Object Notation) is a simple data format that is more lightweight than xml. JSON is a native JavaScript format, which means that no special API or toolkit is required to process JSON data in JavaScript.

The rules of JSON are simple: an object is an unordered collection of "name:value" pairs. An object starts with "{" (left bracket) and ends with "}" (right bracket). Each "name" is followed by a ":" (colon); "name/value" pairs are separated by "," (comma).

The rules are as follows:

1) Mapping is represented by colon (":"). Name: Value
2) Parallel data are separated by commas (","). Name 1: value 1, name 2: value 2
3) The mapped collection (object) is represented by curly brackets ("{}"). {Name 1: Value 1, Name 2: Value 2}
4) The collection (array) of parallel data is represented by square brackets ("[]").
[
{Name 1: value, name 2: value 2},
{Name 1: value, name 2: value 2}
]
5) The types that element values ​​can have ：string, number, object, array, true, false, null

Five writing methods in 2.json:

1) Traditional way to store data and call data

<script>
//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) The first style:

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

3) The second style:

<script>
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) The third style:

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

5) The fourth style:

<script>
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) The fifth style:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to implement fuzzy query with jQuery

Async/await hell problem handling

The above is the detailed content of Detailed explanation of JSON object definition and value implementation steps in JS. For more information, please follow other related articles on the PHP Chinese website!