JavaScript小记——JSON

目录

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);

            //删除 delelte
            delete 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();