本篇記錄物件與陣列的綜合應用,會使用到以下內容,順便複習一下寫法:
變數 var
var a = 1;
函式 function
function name(params) {}
陣列 array
var array = [0, 1, 2],
物件 object
var object = {
text: "string",
number: 10,
};
物件內建立函式,可以透過函式的功能來做運算,讓物件成為一系列的內容,會相當好用。
以一個家庭為例,程式碼如下:
var home = {
dad: "Tim",
mom: "Min",
son: ["Joshua", "John"],
chair: 4,
table: 3,
};
如果要在物件內加入函式,若要顯示:「Tim,該吃晚餐囉!」可以這樣寫:
var home = {
dad: "Tim",
mom: "Min",
son: ["Joshua", "John"],
chair: 4,
table: 3,
dinner: function () {
//建立函式
console.log(home.dad + ",該吃晚餐囉!"); //函式執行內容
},
};
home.dinner(); //執行物件 home 裡面的函式 dinner 的內容
就會得到 Tim,該吃晚餐囉!的結果
倘若今天要計算物件裡面桌子椅子的總數量,可以在物件中建立另一個函式,做為計算的功能,可以這樣寫:
var home = {
dad: "Tim",
mom: "Min",
son: ["Joshua", "John"],
chair: 4,
table: 3,
dinner: function () {
//建立函式
console.log(home.dad + ",該吃晚餐囉!"); //函式執行內容
}, //新增新物件要用逗點隔開
furniture: function () {
var furnitureNum = home.chair + home.table; //增加一個區域變數,把物件中的要抓取的屬性放進來
console.log(furnitureNum); //執行函式中的區域變數內容
},
};
home.dinner(); //執行物件 home 裡面的函式 dinner 的內容 ()
home.furnitureNum(); //執行物件 home 裡面的函式中的區域變數,結果會得到 7
可以利用陣列整合資料的觀念,把物件變成陣列資料,如果今天有兩個家庭為例,程式碼會如下:
var homes = [
{
dad: "Tim",
mom: "Min",
son: ["Joshua", "John"],
chair: 4,
table: 3,
},
{
dad: "Jerry",
mom: "Nancy",
son: ["Ethan", "Elijah", "Emma"],
chair: 5,
table: 4,
},
];
因為是物件,所以在大括號中間還是要用逗號隔開
陣列中加入物件,物件前面就不用再寫一個變數名稱,因為直接在陣列裡面變成資料了
延續上方程式碼,今天要存取物件資料的寫法如下:
var homes = [
{
dad: "Tim",
mom: "Min",
son: ["Joshua", "John"],
chair: 4,
table: 3,
},
{
dad: "Jerry",
mom: "Nancy",
son: ["Ethan", "Elijah", "Emma"],
chair: 5,
table: 4,
},
];
console.log(homes[0].dad);
//會找到陣列中第一筆物件的資料,再找到裡面的 dad 的值,結果會是 Tim
console.log(homes[1].son[2]);
//會找到陣列中第二筆物件的資料,再找到裡面的 son 的第三個值,結果會是 Elijah