上一篇说完了ES6的面向对象,本篇我们来学习ES6针对Json新增的一些特性。
1、JSON对象
使用JSON对象的stringify方法,可以将JSON对象转换为字符串:
<!DOCTYPE html>
<html>
<head>
<title>TEST ES6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<script type="text/javascript">
let json={"name":"jack","age":28} ;
let str=JSON.stringify(json);
alert(str);
</script>
</body>
</html>
效果:
使用JSON对象的方法,可以将字符串转换为JSON对象:
<!DOCTYPE html>
<html>
<head>
<title>TEST ES6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<script type="text/javascript">
let str='{"name":"jack","age":28}';
let json=JSON.parse(str);
alert("JSON对象:"+json);
</script>
</body>
</html>
可以看到输出了一个Object对象,转换JSON对象成功。
这里要注意,我们要了解json的标椎写法,必须遵循以下标准:
(1)所有的名字都必须用引号包起来
(2)只能用双引号
如:
{name:'jack',age:28} 是错的
{"name":"jack","age":28} 是对的
只要不遵循上面规则的,parse方法就不能转换成标准的JSON对象。
2、JSON简写
假设我们需要拼接多个参数形成一个JSON,一般如以下写法:
<!DOCTYPE html>
<html>
<head>
<title>TEST ES6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<script type="text/javascript">
let a=1;let b=2;
let json={"a":a,"b":b};
alert(JSON.stringify(json));
</script>
</body>
</html>
效果:
但是在新版的ES6中,名字和值一样的时候,可以只写值:
<script type="text/javascript">
let a=1;let b=2;
let json={a,b};
alert(JSON.stringify(json));
</script>
会简洁很多。
json中如果包含函数,一般的写法如下:
<script type="text/javascript">
let json={
"a":1,
show: function(){
alert(this.a);
}
}
json.show();
</script>
效果:
在ES6中,我们可以将“: function”去除:
<script type="text/javascript">
let json={
"a":1,
show(){
alert(this.a);
}
}
json.show();
</script>
json相关的特性就讲到这里,下一篇我们来讲解Promise。
参考:深入解读ES6系列视频教程(kaikeba.com提供)
转载请注明出处:https://blog.csdn.net/acmman/article/details/115219971