陣列資料格式
1
2
3
4
5
6
7
8
|
//陣列型式1
var menu = [];
menu[0] = "蘋果";
menu[1] = "香蕉";
menu[2] = "鳳梨";
//陣列型式2
var menu = ["蘋果","香蕉","鳳梨"];
|
將陣列資料塞進html
1
2
3
4
5
6
7
8
9
10
11
|
var menu = ["蘋果","香蕉","鳳梨"];
//基礎寫法
$("#menu").append("<li>"+menu[0]+"</li>");
$("#menu").append("<li>"+menu[1]+"</li>");
$("#menu").append("<li>"+menu[2]+"</li>");
//for迴圈寫法
for(var i=0;i<3;i++){
$("#menu").append("<li>"+menu[i]+"</li>");
}
|
編譯結果:
1
2
3
4
5
|
<ul id="menu">
<li>蘋果</li>
<li>香蕉</li>
<li>鳳梨</li>
</ul>
|
for(從第幾個開始,到第幾個結束,每一次要間隔多少)
物件資料格式
1
2
3
4
5
6
7
8
9
10
11
12
|
//物件型式1
var shop = {};
shop.name = "瑞春水果店";
shop.addr = "高雄市五甲路";
shop.phone = "07 1234567";
//物件型式2
var shop = {
name: "瑞春水果店",
addr: "高雄市五甲路",
phone: "07 1234567"
}
|
列印物件所有資料
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var shop = {
name: "瑞春水果店";
addr: "高雄市五甲路";
phone: "07 1234567";
menu: ["蘋果","香蕉","鳳梨"];
}
$("#shop").append("<li>"+shop.name+"</li>");
$("#shop").append("<li>"+shop.addr+"</li>");
$("#shop").append("<li>"+shop.phone+"</li>");
//傳統寫法
var html_menu = "";
html_menu+= "<ul>";
for(var i=0 ; i<shop.menu.length ; i++){
html_menu+= "<li>"+shop.menu[i]+"</li>";
}
html_menu+= "</ul>";
$("#shop").append("<li>商品菜單:"+html_menu+"</li>");
//樣板字面值+map寫法
$("#shop").append(
`<li>商品菜單:<ul>${shop.menu.map(item => `<li>${item}</li>`).join('')}</ul></li>`);
|
其他相關