物件+function 運用技巧

Posted on In

「物件」裡面，除了可以放入「number, string, boolean, array」之外，還可以放入「function」來做一些運算

「放入 function」到物件中

JS:

🎃 先新增goDinner 這個「屬性」

🎃 這裡的「function」可以「不命名」

1
2
3
4
5
6
7
8
9
var farm = {
    farmer: '卡斯伯',
    chick: 15,
    duck: 3,
    dog: ['張姆士', '龐的'],
    goDinner: function(){
        console.log(farm.farmer + '該回家吃晚飯了！')        
    }
};

呼叫 function

❌ 錯誤寫法

如果只有寫「farm.goDinner;」，在 Console 不會顯示任何的值

JS:

1
2
3
4
5
6
7
8
9
10
11
12
var farm = {
    farmer: '卡斯伯',
    chick: 15,
    duck: 3,
    dog: ['張姆士', '龐的'],
    goDinner: function(){
        console.log(farm.farmer + '該回家吃晚飯了！')        
    }
};

// 呼叫「物件中的 function」
farm.goDinner;

❌ 錯誤寫法

如果只有寫「console.log(farm.goDinner);」，function 不會被執行，在 Console 只會把整個「function 的內容」印出來

JS:

1
2
3
4
5
6
7
8
9
10
11
12
var farm = {
    farmer: '卡斯伯',
    chick: 15,
    duck: 3,
    dog: ['張姆士', '龐的'],
    goDinner: function(){
        console.log(farm.farmer + '該回家吃晚飯了！')        
    }
};

// 呼叫「物件中的 function」
console.log(farm.goDinner);

✅ 正確寫法

🎃 要執行 function，要寫farm.goDinner();

‼️ 最後方要加上一個「小括號」

JS:

1
2
3
4
5
6
7
8
9
10
11
12
var farm = {
    farmer: '卡斯伯',
    chick: 15,
    duck: 3,
    dog: ['張姆士', '龐的'],
    goDinner: function(){
        console.log(farm.farmer + '該回家吃晚飯了！')        
    }
};

// 呼叫「物件中的 function」
farm.goDinner();

function 就會被執行了

function 運算–> 在物件中

現在，我想要計算出物件中「chick + duck」的數量

作法如下：

🎃 在物件中，新增一個 function 來做運算

JS:

  • 新增的 function，屬性是「poultryTotal」
  • farm.poultryTotal(); 最後會執行這個 function
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 + '隻家禽')     
    }
};

// 呼叫「物件中的 function」
farm.poultryTotal();

物件的使用時機

在「接別人的 API」或是「接後端資料庫」時，

就會使用 JSON 的格式來丟資料給對方