iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

《你的地圖會說話? WebGIS與JavaScript的情感交織》系列 第 5

[2-2] JS 的 Function X Arguments 與 ES6寫法介紹

本篇文章請搭配
[2-1] 點資料圖徵 X 瀏覽器定位 X 地址定位


還記得昨天我們用TGOS服務作地址定位嗎?
如果今天研究一個從來沒用過的API,除了看API文件以外,要怎麼去Try呢?
今天,我們一樣延續昨天來玩玩地址定位,來找一個沒玩過的API試試!
那就用Here Maps API試試看吧!

Here Maps API 地址定位

        var platform = new H.service.Platform({
            apikey: yourkey
        });

↑ Here Maps API 起手式,建立一個Platform。

        function LocateByAddress(address) {
            var geocoder = platform.getSearchService();
            geocoder.geocode({
                q: address
            }, function () {
                console.log(arguments);
            }, function () {
                console.log(arguments);
            });
        }

↑ 建立一個function,呼叫Platform的getSearchService,
呼叫geocode方法,第一個參數填地址,第二個參數及第三個參數皆為callback function,
通常API文件只會寫到這邊,至於callback function究竟傳了什麼東西出來呢?
別擔心!這時候我們只需要下console.log(arguments);
就一覽無遺啦!

        LocateByAddress('臺北市信義區市府路45號');

↑ 呼叫地址定位
https://ithelp.ithome.com.tw/upload/images/20200920/20130604JeAzjS5Yuf.jpg
↑ arguments的內容
Here API 地址定位的精確度,大概到小數點第3位,跟TGOS API相去不大,可是Here的定位範圍不限於台灣,不失為一個很好的選擇。
Here API 範例: Search for a Location based on an Address

parameters & arguments

那arguments是什麼呢?講arguments之前就要先講到parameters。
每個function都有input跟output參數,function預設拿來接input的參數就叫做parameters,
而output則是用return傳出去。

  • Output

        function Param(param1, param2, param3){
            var output = '我是輸出!';
            return output;
        }

https://ithelp.ithome.com.tw/upload/images/20200920/20130604uLzZ8DKRhC.jpg
↑ 如圖 return 後面接的東西會變成output傳出function

        function Param(param1, param2, param3) {
            var OUTPUT2 = '我是輸出!';
            return OUTPUT2;
        }

↑ 換一個output的變數名稱
https://ithelp.ithome.com.tw/upload/images/20200920/20130604uLzZ8DKRhC.jpg
↑ 並沒有因為變數名稱改變,而改變output結果,所以傳出去的參數無關乎在function內的變數名稱。

  • Parameters

        function Param(param1, param2, param3) {
            console.log(`${ param1 } | ${ param2 } | ${ param3 }`);
        }
        Param(111);
        Param(111, '222');
        Param(111, '222', { item: 333 });
        Param(111, '222', { item: 333 }, 4444);

↑ console.log把param分別列出來
https://ithelp.ithome.com.tw/upload/images/20200920/20130604cw8yu487UZ.jpg
↑ 可以看到每個Parameter被傳入function,而沒有傳入的Parameter會以undefined作為預設值。

  • arguments

        function Param(param1, param2, param3) {
            console.log(arguments);
        }
        Param(111);
        Param(111, '222');
        Param(111, '222', { item: 333 });
        Param(111, '222', { item: 333 }, 4444);

↑ console.log把arguments通通列出來
https://ithelp.ithome.com.tw/upload/images/20200920/20130604GUsX8mKt6J.jpg
↑ 可以看到arguments是一個類似Array的東西,它可以記載所有傳入function的值,無關乎function有幾個Parameter。

ES6的寫法

  • 預設值

ES6新增了function的parameter可以加入預設值的寫法,即便沒有傳入參數,也會用預設值取代undefined。

   function Dinner(food = "日本A5和牛老饕上蓋肉", soup = "馬賽海鮮濃湯", dessert = "法式玫瑰蘋果塔") {
       console.log(`中秋烤肉要吃什麼? 先喝 ${ soup },再吃 ${ food },最後吃 ${ dessert }。`);
}

↓ 如果今天鐵人賽有順利趕上進度的話,依照預期的方式過節日。

    Dinner();  // 什麼都沒填 讀取 預設值

↓ 可是如果今天還在趕鐵人賽每天的deadline,中秋節就沒辦法跟女友過了,女友如果森氣氣,就變成:

    Dinner('路邊攤魯肉飯','白開水', '手手吃到一把鼻涕一把淚');  // 有傳入參數,則依照傳入的值

↓ 結果如下
https://ithelp.ithome.com.tw/upload/images/20200920/201306049MDOCSF28g.jpg
要過什麼樣的人生? 取決於你各位鐵人賽的進度

        function Dinner(food, soup, dessert) {
            food = food || "日本A5和牛老饕上蓋肉";
            soup = soup || "馬賽海鮮濃湯";
            dessert = dessert || "法式玫瑰蘋果塔";
            
            console.log(`中秋烤肉要吃什麼? 先喝 ${soup},再吃 ${food},最後吃 ${dessert}。`);
            console.log(`祝各位都能有個愉快的中秋佳節!`);
        }
        Dinner();

↑ ES5以前,JS的預設值寫法用||代替。
注意!如果傳入值為空字串、0、null、undefined視同沒傳!
所以如果傳入值可能有0的時候,盡量避免使用預設值。

  • 擴展運算子 spread operator

ES6對於Array可以用...的方式展開,並傳入function之中。

        let number = [1, 2, 3, 4, 5];
        function Spread(a, b, c, d, e) {
            console.log(number);
            console.log(arguments);  // 擴展運算子讓Array展開傳入
        }
        Spread(...number);

↑ ...number擴展運算子可以把陣列展開並傳入,相當於傳入Spread(1, 2, 3, 4, 5);
https://ithelp.ithome.com.tw/upload/images/20200920/20130604NAO3hSu7tT.jpg
↑ 如上圖,number還是一個Array,傳入的arguments卻有5個參數。

    Spread.apply(undefined, number);

↑ 在ES5其實也可以運用apply的方式,達成擴展運算子的效果。
第一個參數為傳入的this,第二個參數可以傳入陣列作為參數

  • 其餘運算子 rest operator

其餘運算子可以把參數收攏成Array,並放入parameter之中。

        function Rest(...param) {
            console.log(param);  // 其餘運算子將傳入值轉為Array
            console.log(arguments);
        }
        Rest(1, 2, 3, 4, 5);

https://ithelp.ithome.com.tw/upload/images/20200920/20130604NAO3hSu7tT.jpg
↑ 結果相同。

  • 箭頭函式 arrow function

ES6還有一種function的寫法可以以箭頭函式簡化。
↓ 假設有一個ES5的function並且在呼叫時有callback匿名函式

        function Arrow(callback){
            callback();
        }
        Arrow(function(){
            console.log('我是ES5的callback匿名函式');
        });

改成ES6如下。

        let Arrow = (callback) => {
            callback();
        }
        Arrow(() => {
            console.log('我是ES5的callback匿名函式');
        });

箭頭函式只能改變匿名函式,不可改變具名函式; 變通做法為把箭頭函式宣告為一個新的變數。


今天介紹了

  • Here Maps API 地址定位
  • parameters & arguments & Output
  • ES6 function預設值
  • ES6 擴展運算子 spread operator
  • ES6 其餘運算子 rest operator
  • ES6 箭頭函式 arrow function

大概講了一半的ES6語法了,之後有機會會再把剩下的講完。
之前介紹了點資料圖徵,如果想要呈現美食地圖在圖台上,
每家餐廳要能秀出他們的詳細訂位資訊、評論、餐點照片,
要怎麼做呢?
下一篇,會介紹GIS重要的資料呈現方式,展點

才參賽五天,就覺得鐵人賽真D累累累累累~/images/emoticon/emoticon02.gif


上一篇
[2-1] 點資料圖徵 X 瀏覽器定位 X 地址定位
下一篇
[3-1] 打造你的美食地圖!用Here Maps API 秀出Google API餐廳資訊
系列文
《你的地圖會說話? WebGIS與JavaScript的情感交織》30

尚未有邦友留言

立即登入留言