目录
JSON概念
JSON语法规则
JSON 数据 - 一个名称对应一个值
JSON 对象
JSON 数组
JSON字符串转JSON对象
JSON对象转JSON字符串
JSON遍历
this的介绍
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
JSON概念
-
JSON 英文全称 JavaScript Object Notation
-
JSON 是一种轻量级的数据交换格式。
-
JSON是独立的语言 *
-
JSON 易于理解。
-
格式仅仅是一个文本
JSON语法规则
-
数据为 键/值 对。
-
数据由逗号分隔。
-
大括号保存对象
-
方括号保存数组
JSON 数据 - 一个名称对应一个值
JSON 数据格式为 键/值 对,就像 JavaScript 对象属性。
键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:
"name":"Runoob"
JSON 对象
JSON 对象保存在大括号内。
就像在 JavaScript 中, 对象可以保存多个 键/值 对:
var student = {"id": 1, "name": "张三", "age": 23, "gender": "男"}
取数据,键找值
var id = student.id; //或 var age = student["age"];
var name = student.name;
alert(id);
alert(name);
可以存放任意类型
var person = {"name": "张三","age": 23,"car": {"carName": "宝马", "carColor": "白色", "carPrice": 9999.99},"house":["别墅","高层","地下室","公寓"],"eat":function() {alert("吃饭");},"sleep":function() {alert("睡觉")}}var price= person.car.carPrice;var str=person.house[3];alert(price);alert(str);person.eat();//修改alert(person.name);person.name="李四";alert(person.name);//删除 deleltedelete person.age;alert(person.age);//增加person.id =1;
JSON 数组
JSON 数组保存在中括号内。
就像在 JavaScript 中, 数组可以包含对象:
"sites":[ {"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"} ]
在以上实例中,对象 "sites" 是一个数组,包含了三个对象。
每个对象为站点的信息(网站名和网站地址)。
var studentArr=[
{"id": 1, "name": "张三", "age": 23, "gender": "男"},
{"id": 2, "name": "李四", "age": 24, "gender": "男"},
{"id": 3, "name": "王五", "age": 25, "gender": "女"}
];var sex=studentArr[2].gender;
JSON字符串转JSON对象
//JSON对象
var student = {"id": 1, "name": "张三", "age": 23, "gender": "男"};
//JSON字符串
var jsonStr = '{"id": 2, "name": "张三", "age": 23, "gender": "男"}'
//把JSON字符串,转换成JSON对象
var obj=JSON.parse(jsonStr);
JSON对象转JSON字符串
//把JSON对象转换成JSON字符串
var str=JSON.stringify(student);
JSON遍历
var obj={"id": 3, "name": "王五", "age": 25, "gender": "女"};//JSON对象的遍历for (key in obj){var value= obj[key];console.log(key+"====="+value)}
this的介绍
//全局定义的这个函数和变 量,他默认绑定到了window对象上var nn=100;function show(){alert(this);}//直接调用这个函数时,函数中的this,代表window对象window.show();alert(window.nn);document.getElementById("btn").onclick=function() {alert(this); //this 代表了绑定了该事件的这个HTML元素对象}
<button onclick="add()">一个按钮</button><button onclick="hehe(this)">一个按钮2</button>function add(){//这个this代表的还是window对象alert(this);}<button onclick="hehe(this)">一个按钮2</button>function hehe(obj){alert(this); //这个this代表的还是window对象alert(obj); //button对象}
var person = {"name": "张三","age": 23,"eat":function() {alert("吃饭"+this); //this 代表调用者alert("吃饭"+this.name);//张三return this;}}var obj =person.eat();alert(obj===person);//true
var person = {"name": "张三","age": 23,"eat":function() {alert("吃饭"+this); //this 代表调用者alert("吃饭"+this.name);return this;}}//可以改变this的指向function show2(a,b){alert(this.age);alert(a);alert(b);}//直接调用函数//show2();//函数对象中有call 可以让函数执行//call 改变函数中this的指向show2.call(person,20,30);//show2.apply(person,[20,30]);//var vv =show2.bind(person,20,30);// vv();