JSON

179 阅读2分钟

在JSON中,一共就这么几种数据类型:

  • number:和JavaScript的number完全一致;
  • boolean:就是JavaScript的true或false
  • string:就是JavaScript的string
  • null:就是JavaScript的null
  • array:就是JavaScript的Array表示方式——[]
  • object:就是JavaScript的{ ... }表示方式。

注意:JSON字符集必须是UTF-8,为了统一解析,JSON的字符串规定必须用双引号"",Object的键也必须用双引号""

JSON.stringify()

第一个参数:只传一个,就是将一值(对象或者数组)转换成JSON字符串

第二个参数:作用就是过滤,可以为一个过滤函数,也可以是一个数组

//函数
var data = {
	name: 'sunhy',
	info: {
		age: 24,
		sex: 'male'
	}
}
var shy = JSON.stringify(data, function (key, val) {
	console.log('key is %s', key)
	console.log('val is %s', typeof (val))
	return val
})
console.log(shy)

// key is 
// val is object
// key is name
// val is string
// key is info
// val is object
// key is age
// val is number
// key is sex
// val is string
// {"name":"sunhy","info":{"age":24,"sex":"male"}}
//数组
var data = {
	name: 'sunhy',
	info: {
		age: 24,
		sex: 'male'
	}
}
var shy = JSON.stringify(data, ['info', 'sex'])
console.log(shy)

// {"info":{"sex":"male"}}

第三个参数:用来控制结果字符串里面的间距。

可以是一个数字,可以是一个字符串 如果是一个数字, 则在字符串化时每一级别会比上一级别缩进多这个数字值的空格(最多10个空格);

如果是一个字符串,则每一级别会比上一级别多缩进用该字符串(或该字符串的前十个字符)。

如果不加第三个参数,输出会只占一行

var data = {
	name: 'sunhy',
	info: {
		age: 24,
		sex: 'male'
	}
}
var shy = JSON.stringify(data, null, 4)
console.log(shy)

// {
//    "name": "sunhy",
//    "info": {
//        "age": 24,
//        "sex": "male"
//    }
// }

JavaScript对象=> JSON字符串 (JSON.stringify

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
var s = JSON.stringify(xiaoming, null, '  ');
console.log(s) 

结果

{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" Middle School",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}

部分属性转化(定义一个toJSON()的方法)

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // 只输出name和age,并且改变了key:
            'Name': this.name,
            'Age': this.age
        };
    }
};

JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

JSON格式的字符串=>变成一个JavaScript对象(JSON.parse())

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

JSON.parse()还可以接收一个函数,用来转换解析出的属性

var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {
    if (key === 'name') {
        return value + '同学';
    }
    return value;
});
console.log(JSON.stringify(obj)); // {name: '小明同学', age: 14}

练习:

用浏览器访问OpenWeatherMap的天气API,查看返回的JSON数据,然后返回城市、天气预报等信息

var url = 'https://api.openweathermap.org/data/2.5/forecast?q=Beijing,cn&appid=800f49846586c3ba6e7052cfc89af16c';
$.getJSON(url, function (data) {//调用了jQuery getJSON() 方法
 var info = {
        city: data.city.name,
        weather: data.list[0].weather[0].main,
        time: data.list[0].dt_txt
    };
    alert(JSON.stringify(info, null, '  '));
});