JS-JSON

JSON对象的创建

键 值
键的类型 都是字符串 值是任意类型
	
1
2
3
4
5
6
7
8
9
10
11
12

获取值的方式

键找值
方式一
    var name = student.name;
    student.eat("饺子");
方式二
	var age = student["age"];
1
2
3
4
5
6

嵌套 修改键值对

var person = {
    "name": "jack",
    "age": 18,
    "car": {
        "carName": "宝马",
        "carColor": "white",
        "carPrice": "888888"
    }
}
获取内层对象属性
var carName = person.car.carName;
修改键的值
person.name = "tom";
添加属性
person.sex = "女";
删除属性
delete person.age;

var shengFen = {
	"陕西省": ["西安", "商洛"],
}
var xiAn = shengFen.陕西省[0];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

遍历对象

var student = {
    "name": "张三",
    "age": 23,
    "sex": "男",
    "eat": function(str) {
   		alert("吃饭" + str);
    }
}
遍历对象
for (key in student) {
	var value = student[key];
}

遍历数组
var arr = ["aaa", "bbb", "ccc", "ddd"];
for(index in arr){
	var ele = arr[index];
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

对象和字符串互转

JSON对象
var student = {
    "name": "张三",
    "age": 23,
    "sex": "男",
    "eat": function(str) {
    	alert("吃饭" + str);
    }
}

JSON对象-->JSON字符串
var studentStr = JSON.stringify(student);
alert(studentStr);

JSON字符串
要用紧凑的格式 不要有换行和空格 
键要使用双引号引起来
var jsonStr = '{"name": "张三","age": 23,"sex": "男"}';

JSON字符串-->JSON对象
var jsonObj = JSON.parse(jsonStr);
var jsonObjName = jsonObj.name;
alert(jsonObjName);

其他语言 比如JAVA 他要给前台返回JSON数据 只能以JSON字符串返回
前台收到后 转成JSON对象 取数据
JSON格式的字符串 就作为了网络传输 首选的数据格式 轻巧 利于阅读和解析
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

JSON数组

var arr = [{
        "name": "jack",
        "age": 33,
        "sex": "女"
    }, {
        "name": "tom",
        "age": 44,
        "sex": "女"
    }];
    
    var name = arr[1].name;//jack

    for (index in arr) {
    	//遍历数组获取JSON对象
        var jsonObj = arr[index];
        for (key in jsonObj) {
        	//遍历JSON对象 获取键值
            var value = jsonObj[key];
            alert(key + "---" + value);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

封装数据

封装数据
方式1
    var student = {
        "name": "张三",
        "age": 23,
        "sex": "男",
    }

方式2
    function Person(name,age,sex){
        //封装属性
        this.name = name;
        this.age = age;
        this.sex =sex;
        //封装功能
        this.eat = function(eatFood){
            alert(eatFood)
        }
    }
    
    var p1 = new Person("li",24,"男");
    var pName = p1.name;
    p1.eat("大米饭");
    var p2 = new Person("wang",20,"男");

方式3
    var obj = new Object();
    obj.name = "smith";
    obj.age = 12;
    obj.sal = 5000;
    console.log(obj);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

this指向

Java中的this
this是实例方法中隐含的一个对象 那个对象调用该方法
方法中的this就代表这个对象

JS中的this
全局作用域 this代表window对象
	alert(this == window); //true
	
全局作用域 定义的函数 函数中的this 代表window对象
    function show() {
        alert(this);
    }
    window.alert(this == window); //true
    
事件处理函数中的this代表 绑定了该事件的对象
    var btn = document.getElementById("btn");
    btn.onclick = function() {
        alert(this == btn); //true
    }
    
构造函数中的this代表的就是你new的对象
    function Person(name, age, sex) {
        var myObj = this;
        //封装属性
        this.name = name;
        this.age = age;
        this.sex = sex;
        //封装功能
        this.eat = function() {
            return myObj;
        }
        var p1 = new Person("li", 24, "男");
        var myObj = p1.eat();
        alert(p1 == myObj); //true
    }

    var jsonObj = {
        "name": "jack",
        "sleep": function(obj) {
            alert(this == jsonObj); //true
        }
    }
	jsonObj.sleep(jsonObj);

定时器中的this 代表的是window对象
    var show2 = function(obj) {
        console.log(this); //window
    }
    setTimeout(show2(), 1000);

通过bind call 方法来改变this的指向
    var show3 = function(obj) {
        console.log(this.name); //window
    }
    setTimeout(show3.bind({
        "name": "王老五"
    }), 1000);

this指向例题
	var name = "小王";
    var age = 17;
    var obj = {
        "name": "小张",
        "objAge": this.age, //this->window
        "myFun": function() {
            console.log(this.name + " 年龄:" + this.age)
            //this->obj
        }
    }
    obj.objAge; //17
    obj.myFun(); //小张 年龄:undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71