1 JavaScript
html完成了架子，css做了美化，但是网页是死的，我们需要给他注入灵魂，所以接下来我们需要学习JavaScript，这门语言会让我们的页面能够和用户进行交互。
1.5.1.3 JSON对象
自定义对象
在 JavaScript 中自定义对象特别简单，其语法格式如下：
var 对象名 = { 属性名1: 属性值1, 属性名2: 属性值2, 属性名3: 属性值3, 函数名称: function(形参列表){} };
我们可以通过如下语法调用属性：
对象名.属性名
通过如下语法调用函数：
对象名.函数名()
接下来，我们再VS Code中创建名为04. JS-对象-JSON.html的文件演示自定义对象
<script> //自定义对象 var user = { name: "Tom", age: 10, gender: "male", eat: function(){ console.log("用膳~"); } } console.log(user.name); user.eat(); <script>
浏览器控制台结果如下：
其中上述函数定义的语法可以简化成如下格式：
var user = { name: "Tom", age: 10, gender: "male", // eat: function(){ // console.log("用膳~"); // } eat(){ console.log("用膳~"); } }
json对象
JSON对象：JavaScript Object Notation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下：
{ "key":value, "key":value, "key":value }
其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。
例如我们可以直接百度搜索“json在线解析”，随便挑一个进入，然后编写内容如下：
{ "name": "李传播" }
但是当我们将双引号切换成单引号，再次校验，则报错，如下图所示：
那么json这种数据格式的文本到底应用在企业开发的什么地方呢？-- 经常用来作为前后台交互的数据载体
如下图所示：前后台交互时，我们需要传输数据，但是java中的对象我们该怎么去描述呢？我们可以使用如图所示的xml格式，可以清晰的描述java中需要传递给前端的java对象。
但是xml格式存在如下问题：
- 标签需要编写双份，占用带宽，浪费资源
- 解析繁琐
所以我们可以使用json来替代，如下图所示：
接下来我们通过代码来演示json对象：注释掉之前的代码，编写代码如下：
var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}'; alert(jsonstr.name);
浏览器输出结果如下：
为什么呢？**因为上述是一个json字符串，不是json对象，所以我们需要借助如下函数来进行json字符串和json对象的转换。**添加代码如下：
var obj = JSON.parse(jsonstr); alert(obj.name);
此时浏览器输出结果如下：
当然了，我们也可以通过如下函数将json对象再次转换成json字符串。添加如下代码：
alert(JSON.stringify(obj));
浏览器输出结果如图所示：
整体全部代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS-对象-JSON</title> </head> <body> </body> <script> //自定义对象 // var user = { // name: "Tom", // age: 10, // gender: "male", // // eat: function(){ // // console.log("用膳~"); // // } // eat(){ // console.log("用膳~"); // } // } // console.log(user.name); // user.eat(); // //定义json var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}'; //alert(jsonstr.name); // //json字符串--js对象 var obj = JSON.parse(jsonstr); //alert(obj.name); // //js对象--json字符串 alert(JSON.stringify(obj)); </script> </html>
遍历数组或集合
$.each(data,function(key,value){})，主要用于遍历数组或json对象等
var json = {"name":'张飞',"age":13}; $.each(json,function(key,val){ console.log(key,val); })
jquery解析json对象数组
<script> //json对象数组，拿过来； //数据库拿过来的是一个json数组字符串; // let users=[{"id":1,"name":"tom","age":22,"gendar":"男"}, // {"id":2,"name":"jack","age":33,"gendar":"女"}, // {"id":3,"name":"peter","age":1,"gendar":"男"} // ]; // let result=JSON.stringify(users); // console.log(result); // //typeof // console.log(typeof(result)); //result:从数据库传递过来的一个json字符串 let result='[{"id":1,"name":"tom","age":22,"gendar":"男"},{"id":2,"name":"jack","age":33,"gendar":"女"},{"id":3,"name":"peter","age":1,"gendar":"男"}]'; //需要先转换一下 let users2=JSON.parse(result); //解析一下； //key:还是之前的下标；0 1 2; //value:是一个json对象；[object Object] // 需要时json对象的值； $.each(users2,function(key,user){ // 对象.属性; console.log(key+","+user.id+","+user.name); }) </script>
使用vue的v-for指令解析json对象数组格式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>案例</title> <script src="js/vue.js"></script> </head> <body> <!-- 2.html5元素; v-for指令遍历； --> <div id="app"> <table border="1" align="center" width="50%"> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> <th>等级</th> </tr> <!-- 在写v-for的时候，一定是这个数据，可以重复执行； 参数1：单个数据元素； 参数2：索引 json对象：[object Object] 对象.属性s --> <tr v-for="(user,index) in users"> <td>{{index+1}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> <td> <span v-show="user.gendar==1">男</span> <span v-show="user.gendar==2">女</span> </td> <td>{{user.score}}</td> <td> <span v-if="user.score>=0 && user.score<60">不及格</span> <span v-else-if="user.score>=60 && user.score<80">良好</span> <span v-else-if="user.score>=80 && user.score<=100">优秀</span> <span v-else>不合规</span> </td> </tr> </table> </div> <!-- 3.js --> <script> new Vue({ el:'#app', //绑定 data:{ users:[{"name":"张三","age":22,"gendar":1,"score":55}, {"name":"李四","age":36,"gendar":2,"score":69}, {"name":"王武","age":52,"gendar":1,"score":-89} ] } }); </script> </body> </html>
618，清华社 IT BOOK 多得图书活动开始啦！活动时间为 2023 年 6 月 7 日至 6 月 18 日，清华
社为您精选多款高分好书，涵盖了 C++、Java、Python、前端、后端、数据库、算法与机器学习等多
个 IT 开发领域，适合不同层次的读者。全场 5 折，扫码领券更有优惠哦！快来京东点击链接 IT BOOK
多得（或扫描京东二维码）查看详情吧！
