1
2
3
4
5
6
7
8

//陣列型式1
var menu = [];
menu[0] = "蘋果";
menu[1] = "香蕉";
menu[2] = "鳳梨";

//陣列型式2
var menu = ["蘋果","香蕉","鳳梨"];

1

<ul id="menu"></ul>

 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>

 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

<ul id="shop"></ul>

 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>`);