陣列與物件

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

  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>");
Display

陣列進階:簡寫方法

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>");
Display

    物件進階:編寫物件簡寫

    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>");
    Display

      使用變數呼叫物件

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

      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
      //參數同理

       

      Leave a Reply

      Your email address will not be published. Required fields are marked *