陣列[]：依照編號排排站好的資料

1. 宣告陣列[]
2. 編號資料
3. 利用push，新增資料
4. 開始列印資料

ul#menu

// 1宣告陣列
var menu=[];

// 2編號資料
menu[0]="東坡肉炒飯";
menu[1]="葱爆羊肉";
menu[2]="花式炒鮭魚";

// 3利用push，新增資料
menu.push("新疆烤山豬");

// 4開始列印資料
$("#menu").append("<li>"+menu[0]+"</li>");
$("#menu").append("<li>"+menu[1]+"</li>");
$("#menu").append("<li>"+menu[2]+"</li>");
$("#menu").append("<li>"+menu[3]+"</li>");

陣列進階：簡寫方法

var menu = [];

// 1 編號資料簡寫，簡化以下資料
// menu_json[0]="東坡肉炒飯";
// menu_json[1]="葱爆羊肉";
// menu_json[2]="花式炒鮭魚";

// *毎筆資料用逗號隔開
menu = ["東坡肉炒飯", "葱爆羊肉", "花式炒鮭魚"];

menu.push("新疆烤山豬");

// 2 列印資料簡寫，利用迴圈for制定規則
// $("#menu_json").append("<li>"+menu_json[0]+"</li>");
// $("#menu_json").append("<li>"+menu_json[1]+"</li>");
// $("#menu_json").append("<li>"+menu_json[2]+"</li>");
// $("#menu_json").append("<li>"+menu_json[3]+"</li>");

// 迴圈變數(開始；結束；規則)
for (var i = 0; i < 4; i++) {
 // debug: console.log(i);
 $("#menu").append("<li>" + menu[i] + "</li>");
}

陣列進階2：自動判斷資料長度

var menu = [];

menu = ["東坡肉炒飯", "葱爆羊肉", "花式炒鮭魚"];

menu.push("新疆烤山豬");

// 迴圈結束値使用menu.length
for (var i = 0; i < menu.length; i++) {
 $("#menu").append("<li>" + menu[i] + "</li>");
}

物件{}：毎一項資料都有名字的陣列

1. 定義物件
2. 編寫物件
3. 列印物件

ul#shop

// 1 定義物件
var shop = {};

// 2 編寫物件
shop.name="阿東熱炒";
shop.addr="台北市宵夜路";
shop.phone="02 123456789";

// 3 列印物件
// 補充：列印物件方法二shop["name"]=shop.name
// 方法二使用時機，中括號裡面是變數或參數時使用
// shop.name只有當name是存在的物件名才可使用
$("#shop").append("<li>商店名稱："+shop.name+"</li>");
$("#shop").append("<li>商店地址："+shop.addr+"</li>");
$("#shop").append("<li>商店電話："+shop.phone+"</li>");

物件進階：編寫物件簡寫

var shop = {};

// 編寫物件簡寫，簡化以下項目
// shop.name="阿東熱炒";
// shop.addr="台北市宵夜路";
// shop.phone="02 123456789";

// 用逗號區隔
shop={
 //屬性名稱有空格時需要"包起來
 //ex. "shop name": "阿東熱炒"
 name: "阿東熱炒",
 addr: "台北市宵夜路",
 phone: "02 123456789"
};


$("#shop").append("<li>商店名稱："+shop.name+"</li>");
$("#shop").append("<li>商店地址："+shop.addr+"</li>");
$("#shop").append("<li>商店電話："+shop.phone+"</li>");

物件内的陣列&清單内的子清單

ul#shop

var shop = {};

// 1 物件内新增陣列
shop = {
 name: "阿東熱炒",
 addr: "台北市宵夜路",
 phone: "02 123456789",
 menu: ["東坡肉炒飯", "葱爆羊肉", "花式炒鮭魚"]
};

// 2 一樣可以用push，不過前面要+物件名
shop.menu.push("新疆烤山豬");

// 4 定義子清單變數
// 4.1 建立ul開始標籤
var menu_html = "<ul>";
// 4.2 製作内部迴圈
for(i = 0; i < shop.menu.length; i++){
 menu_html+="<li>"+shop.menu[i]+"</li>";
}
// 4.3 建立ul結束標籤
menu_html += "</ul>";

// 3 列印子陣列，先用menu_html借代，因為要做子清單
$("#shop").append("<li>商店名稱：" + shop.name + "</li>");
$("#shop").append("<li>商店地址：" + shop.addr + "</li>");
$("#shop").append("<li>商店電話：" + shop.phone + "</li>");
$("#shop").append("<li>商店菜單：" + menu_html + "</li>");

使用變數呼叫物件

必須要將整串變數連名帶姓地存成變數或參數

var car={brand: "Audi", color: "blue", foot: 4};

var s=car.brand;
console.log(brand); //Audi

//不可以這樣做↓
var s2=brand;
console.log(car.v2); //error

//呼叫變數的式子不管有多長，都不可以拆開
//要寫成像這樣→var s3=title.dataset.name
//參數同理