陣列[]:依照編號排排站好的資料
- 宣告陣列[]
- 編號資料
- 利用push,新增資料
- 開始列印資料
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>");
}
物件{}:毎一項資料都有名字的陣列
- 定義物件
- 編寫物件
- 列印物件
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
//參數同理