1 JavaScript
html完成了架子，css做了美化，但是網(wǎng)頁是死的，我們需要給他注入靈魂，所以接下來我們需要學(xué)習(xí)JavaScript，這門語言會讓我們的頁面能夠和用戶進(jìn)行交互。
1.5.1.3 JSON對象
自定義對象
在 JavaScript 中自定義對象特別簡單，其語法格式如下：
var 對象名 = {
屬性名1: 屬性值1,
屬性名2: 屬性值2,
屬性名3: 屬性值3,
函數(shù)名稱: function(形參列表){}
};
我們可以通過如下語法調(diào)用屬性：
對象名.屬性名
通過如下語法調(diào)用函數(shù)：
對象名.函數(shù)名()
接下來，我們再VS Code中創(chuàng)建名為04. JS-對象-JSON.html的文件演示自定義對象
<script>
//自定義對象
var user = {
name: "Tom",
age: 10,
gender: "male",
eat: function(){
console.log("用膳~");
}
}
console.log(user.name);
user.eat();
<script>
瀏覽器控制臺結(jié)果如下：
其中上述函數(shù)定義的語法可以簡化成如下格式：
var user = {
name: "Tom",
age: 10,
gender: "male",
// eat: function(){
// console.log("用膳~");
// }
eat(){
console.log("用膳~");
}
}
json對象
JSON對象：JavaScript Object Notation，JavaScript對象標(biāo)記法。是通過JavaScript標(biāo)記法書寫的文本。其格式如下：
{
"key":value,
"key":value,
"key":value
}
其中，key必須使用引號并且是雙引號標(biāo)記，value可以是任意數(shù)據(jù)類型。
例如我們可以直接百度搜索“json在線解析”，隨便挑一個進(jìn)入，然后編寫內(nèi)容如下：
{
"name": "李傳播"
}
但是當(dāng)我們將雙引號切換成單引號，再次校驗，則報錯，如下圖所示：
那么json這種數(shù)據(jù)格式的文本到底應(yīng)用在企業(yè)開發(fā)的什么地方呢？-- 經(jīng)常用來作為前后臺交互的數(shù)據(jù)載體
如下圖所示：前后臺交互時，我們需要傳輸數(shù)據(jù)，但是java中的對象我們該怎么去描述呢？我們可以使用如圖所示的xml格式，可以清晰的描述java中需要傳遞給前端的java對象。
但是xml格式存在如下問題：
- 標(biāo)簽需要編寫雙份，占用帶寬，浪費資源
- 解析繁瑣
所以我們可以使用json來替代，如下圖所示：
接下來我們通過代碼來演示json對象：注釋掉之前的代碼，編寫代碼如下：
var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(jsonstr.name);
瀏覽器輸出結(jié)果如下：
為什么呢？**因為上述是一個json字符串，不是json對象，所以我們需要借助如下函數(shù)來進(jìn)行json字符串和json對象的轉(zhuǎn)換。**添加代碼如下：
var obj = JSON.parse(jsonstr);
alert(obj.name);
此時瀏覽器輸出結(jié)果如下：
當(dāng)然了，我們也可以通過如下函數(shù)將json對象再次轉(zhuǎn)換成json字符串。添加如下代碼：
alert(JSON.stringify(obj));
瀏覽器輸出結(jié)果如圖所示：
整體全部代碼如下：
<!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>
遍歷數(shù)組或集合
$.each(data,function(key,value){})，主要用于遍歷數(shù)組或json對象等
var json = {"name":'張飛',"age":13};
$.each(json,function(key,val){
console.log(key,val);
})
jquery解析json對象數(shù)組
<script>
//json對象數(shù)組，拿過來；
//數(shù)據(jù)庫拿過來的是一個json數(shù)組字符串;
// 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:從數(shù)據(jù)庫傳遞過來的一個json字符串
let result='[{"id":1,"name":"tom","age":22,"gendar":"男"},{"id":2,"name":"jack","age":33,"gendar":"女"},{"id":3,"name":"peter","age":1,"gendar":"男"}]';
//需要先轉(zhuǎn)換一下
let users2=JSON.parse(result);
//解析一下；
//key:還是之前的下標(biāo)；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對象數(shù)組格式：文章來源：http://www.zghlxwxcb.cn/news/detail-476165.html
<!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的時候，一定是這個數(shù)據(jù)，可以重復(fù)執(zhí)行；
參數(shù)1：單個數(shù)據(jù)元素；
參數(shù)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">優(yōu)秀</span>
<span v-else>不合規(guī)</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、前端、后端、數(shù)據(jù)庫、算法與機(jī)器學(xué)習(xí)等多
個 IT 開發(fā)領(lǐng)域，適合不同層次的讀者。全場 5 折，掃碼領(lǐng)券更有優(yōu)惠哦！快來京東點擊鏈接 IT BOOK
多得（或掃描京東二維碼）查看詳情吧！
文章來源地址http://www.zghlxwxcb.cn/news/detail-476165.html
到了這里，關(guān)于day02-JavaScript-Vue的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
