六角學院｜陣列Array與物件Object

陣列Array

 -更有效率、更好維護將數值傳遞到function去做運算 或是 從陣列或著物件撈出各個數值,相
 較於變數而言更加靈活好用.

var cornField1 = 8
var cornField2 = 5
var cornField3 = 6

var cornField = [8,5,6]

若由一個空陣列(初始沒有東西)開始,要將數值加入輸入.push

var cornField = [];

cornField.push(5);
cornField.push(8);
cornField.push(6);
瀏覽器會顯示 [5,8,6]

若要將數字作更改,請指定第幾個數字

var cornField = [];

cornField.push(5);
cornField.push(8);
cornField.push(6);

cornField[0] = 10;
瀏覽器會顯示 [10,8,6]

若要仔新增一個數值也可以用如下這種方式

var cornField = [];

cornField.push(5);
cornField.push(8);
cornField.push(6);

cornField[0] = 10;

cornField[3] = 100;
瀏覽器會顯示 [10,8,6,100]

length可表示 總共有幾個數值/數量總數/寬度

var cornField = [];

cornField.push(5);
cornField.push(8);
cornField.push(6);

cornField[0] = 10;

cornField[3] = 100;

console.log(cornField.length);
瀏覽器會顯示 [4]

若要在當中加入字串,在瀏覽器中顯示要在console.log(____)中加入

var cornField = [];

cornField.push(5);
cornField.push(8);
cornField.push(6);

cornField[0] = 10;

cornField[3] = 100;

console.log('我總共有'+cornField.length+'個玉米田');
瀏覽器會顯示 [我總共有4個玉米田]


物件

架構:
var ____ = {
屬性 property : '值 value ' ,
___________ : [__ , ___ , ___],
}

var farm = {
farmer:'卡斯伯',
dogs:['張姆士','龐的'],
chick:15,
cornField:[8,5,6],
broccoliField:[6,6,6,6],
scarecrow:9
}

-物件除了可放字串、數字、布林值、陣列 , 還可以放function
var farm={
farmer:'卡斯伯',
chick:15,
duck:3,
dog:['張姆士','龐的']
goDinner:function(){
console.log(farm.farmer+',該回家吃晚飯囉')
},
farm.goDinner();
瀏覽器會顯示 [卡斯伯,該回家吃晚飯囉]

var farm={
farmer:'卡斯伯',
chick:15,
duck:3,
dog:['張姆士','龐的'],
goDinner:function(){
console.log(farm.farmer+',該回家吃晚飯囉')
},
poultryTotal:function(){
var num=farm.chick+farm.duck;
console.log('我的農場共有' + num +'隻家禽');
}
};
farm.goDinner();
farm.poultryTotal();
瀏覽器會顯示 [卡斯伯,該回家吃晚飯囉]
[我的農場共有18隻家禽]



若將物件與陣列一同使用: (架構如下)
var ____ = [
{
屬性 property : '值 value ' ,
___________ : [__ , ___ , ___],
},
{
屬性 property : '值 value ' ,
___________ : [__ , ___ , ___],
}
];

var farms=[
{
farmer:'卡斯伯',
dogs:['張姆士','龐的'],
chick:15,
cornField:[8,5,6],
broccoliField:[6,6,6,6],
scarecrow:9
},
{
farmer:'查理',
dogs:['皮皮'],
chick:30,
cornField:[18,12],
broccoliField:[8,8,8],
scarecrow:6
}
];


  • 陣列練習(1)-陣列的宣告

    當我們手邊有一大堆的資料時，如果一個一個的宣告變數將會非常費時費力
    所以我們可以透過陣列來把資料整理起來，例如英文老師在整理班上同學的英文成績時：
      

    1. var student1 = 85;
      2. 

    2. var student2 = 78;
      3. 

    3. var student3 = 99; 
      4. 

    4. ...
      5. 

    5.  
      6. 

    6. //當班上同學有50位的時候就會非常麻煩
      7. 

    7. //所以可以用下方的陣列把同學的成績統整起來
      8. 

    8.  
      9. 

    9. var student = [85,78,99...];
      10.

    • 陣列練習(2)-陣列的運用

    學會了如何宣告陣列之後，我們來練習陣列的運用吧



      

    1. //剛剛我們是透過下方的方式宣告陣列
      2. 

    2. var studentWeight = [65,55,75];
      3. 

    3.  
      4. 

    4. //我們可以透過下面的方式來取得第一個值
      5. 

    5. //特別注意JavaScript是從0當作第一個
      6. 

    6. var PeterWeight = studentWeight[0];
      7. 

    7.  
      8. 

    8. //也可用同樣的方式把第二個值從55改成56
      9. 

    9. studentWeight[1] = 56;
      10. 

    10.  
      11. 

    11. //當想要新增新的資料時，可以利用push方法
      12. 

    12. studentWeight.push(76);
      13. 

    13.  
      14. 

    14. //想要知道總共有幾個資料時，可以用length方法
      15. 

    15. var studentNumber = studentWeight.length;
      16.

    物件練習(1)-物件的宣告

    然而當資料更為複雜的時候，則可以利用 物件 來幫助我們整理
    例如太陽班裡面需要紀錄老師姓名、學生姓名、學生成績等資訊



      

    1. var SunClass = {
      2. 

    2.     teacher: "Jane",
      3. 

    3.     student: ["Andy","Peter","John"],
      4. 

    4.     studentGrade: [89,100,99],
      5. 

    5.     studentNumber: 3
      6. 

    6. };
      7.


    物件練習(2)-物件的運用

    接著我們來練習如何來運用物件吧



      

    1. var SunClass = {
      2. 

    2.     teacher: "Jane",
      3. 

    3.     student: ["Andy","Peter","John"],
      4. 

    4.     studentGrade: [89,100,99],
      5. 

    5.     studentNumber: 3
      6. 

    6. };
      7. 

    7.  
      8. 

    8. //當我們要獲得物件中某一屬性的值時
      9. 

    9. //例如想要知道老師是誰時
      10. 

    10. var myTeacher = SunClass.teacher;
      11. 

    11. //或者想知道第二個學生的姓名
      12. 

    12. var myStudent = SunClass.student[1];
      13. 

    13.  
      14. 

    14. //當我們要更改物件中某一屬性的值時
      15. 

    15. SunClass.teacher = "Edison";
      16. 

    16.  
      17. 

    17. //當我們要增加物件中的屬性時
      18. 

    18. SunClass.classRoom = "C104";
      19. 

    

    


    

    


    

    

    
物件練習(3)-物件與函數
    

    

    

    
在物件當中我們甚至可以加入這個物件專有的函數
    

    
例如在太陽班中我們時常需要計算學生總共有幾名
    

      

    1. var SunClass = {
      2. 

    2.     teacher: "Jane",
      3. 

    3.     student: ["Andy","Peter","John"],
      4. 

    4.     studentGrade: [89,100,99],
      5. 

    5.     studentNumber: 3,
      6. 

    6.     classRoom: "B107",
      7. 

    7.     countStudent: function(){
      8. 

    8.         console.log("學生共有"+SunClass.studentNumber+"位");
      9. 

    9.     }
      10. 

    10. };
      11. 

    11.  
      12. 

    12. //當我們需要呼叫時只需要
      13. 

    13. SunClass.countStudent();
      14. 

    

    


    

    


    

    


    

    

    
陣列與物件
    

    

    

    
當今天有多個物件的時候，我們一樣可以使用陣列來整理它們
    

    
例如六角學院中有兩個班級就可以透過下面的方式來呈現
    

      

    1. var hexSchool = [
      2. 

    2.     //第一個物件
      3. 

    3.     {
      4. 

    4.         teacher: "Jane",
      5. 

    5.         student: ["Andy","Peter","John"],
      6. 

    6.         studentGrade: [89,100,99],
      7. 

    7.         studentNumber: 3,
      8. 

    8.         classRoom: "B104"
      9. 

    9.     },
      10. 

    10.  
      11. 

    11.     //第二個物件
      12. 

    12.     {
      13. 

    13.         teacher: "Gary",
      14. 

    14.         student: ["Sam","Jenny","Rose"],
      15. 

    15.         studentGrade: [88,79,99],
      16. 

    16.         studentNumber: 3,
      17. 

    17.         classRoom: "C104"
      18. 

    18.     }
      19. 

    19. ];
      20. 

    

    

    
現在我們來練習在影片中陣列中物件的讀取方式
    

      

    1. 建立一個變數 myTeacher 並讓它等於第2個物件的 teacher 
      2. 

    2. 建立一個變數 myStudent  並讓它等於第1個物件中 student  陣列的第3個
      3. 

    

    

    

    

    
var hexSchool = [
    //第一個物件
    {
        teacher: "Jane",
        student: ["Andy","Peter","John"],
        studentGrade: [89,100,99],
        studentNumber: 3,
        classRoom: "B104"
    },

    //第二個物件
    {
        teacher: "Gary",
        student: ["Sam","Jenny","Rose"],
        studentGrade: [88,79,99],
        studentNumber: 3,
        classRoom: "C104"
    }
];

//請在下方作答
var myTeacher = hexSchool[1].teacher;
var myStudent = hexSchool[0].student[2];

    评论

    发表评论

    热门博文