JavaScript 鄉巴佬筆記 - ?. 運算子與物件屬性名簡寫

2022-05-03 10:17 PM

自從宣告 IE 封印解除，我一改過去儘量用古老寫法以免惹 IE 生氣的保守心態，積極學習現代 JavaScript。猶如鄉巴佬進城，連看見自動販賣機也會大讚科技好進步。對專業前端開發人員來說，2022 年還在介紹這種基本常識簡直笑死，但心想「總有比我更晚解封的人」，還是拋開羞恥心(謎：不要提那種你沒有的東西)分享一下好了。

在一個實際案例學到兩則 JavaScirpt 小技巧，用以下範例展示。它是個用 Vue.js MVVM 做的清單檢視連動介面，點左邊列表項目，右方會出現該筆詳細資訊：

一開始是用我習慣的傳統寫法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="//unpkg.com/vue@3"></script>
        <style>
            html,body { height: 100%; margin: 0; padding: 0; }
            #app { display: flex; height: 100%; background-color: rgb(105, 109, 109); }
            #app > * { margin: 6px; background-color: white; }
            .list { width: 130px; padding: 6px; border: 1px solid gray; }
            .list div:hover { background-color: #ddd; cursor: pointer; }
            .view { flex-grow: 1; }
            table { margin: 3px; width: 250px; }
            td { padding: 3px; background-color: #eee; }
            td:first-child { width: 80px; text-align: right; background-color: #ddd; }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="list">
                <div v-for="p in players" @click="currPlayer=p">
                    {{p.name}}
                </div>
            </div>
            <div class="view">
                <table>
                    <tr><td>Id</td><td>{{currPlayer && currPlayer.id}}</td></tr>
                    <tr><td>Name</td><td>{{currPlayer && currPlayer.name}}</td></tr>
                    <tr><td>Score</td><td>{{currPlayer && currPlayer.score}}</td></tr>
                </table>
            </div>
        </div>
        <script>
            function player(id, name, score) {
                this.id = id;
                this.name = name;
                this.score = score;
            }
            var players = [
                new player('P01', 'Jeffrey', 32767),
                new player('P02', 'darkthread', 65535),
                new player('P03', '0x270f', 9999),
            ];
            var vm = Vue.createApp({
                data() {
                    return {
                        players: players,
                        currPlayer: null
                    }
                }
            }).mount('#app');
        </script>
    </body>
</html>

寫完不免犯嘀咕，用 C# 寫根本不用這麼麻煩，像是 currPlayer && currPlayer.id 可以寫成 currPlayer?.id (C# 術語：Null-Conditional Operator)、在 C# 可寫成 new (術語：Projection Initializer)。

好奇心起，查了一下發現在 JavaScript 早就支援同樣的簡潔寫法。

?. 運算子在 JavaScript 叫 Optional Chaining，除了物件屬性，也能用在陣列跟方法上： (瀏覽器支援：Chrom 80+、Firefox 74+，Node.js 14+)

obj?.prop  
obj?.[expr]  
arr?.[index]  
func?.(args)

至於宣告物件時以變數名當屬性名稱 (Shorthand Property Name)的寫法是從 ES2015(ES6) 開始支援的。

            <div class="view">
                <table>
                    <tr><td>Id</td><td>{{currPlayer?.id}}</td></tr>
                    <tr><td>Name</td><td>{{currPlayer?.name}}</td></tr>
                    <tr><td>Score</td><td>{{currPlayer?.score}}</td></tr>
                </table>
            </div>
        </div>
        <script>
            //...略...
            var vm = Vue.createApp({
                data() {
                    return {
                        players, //若要沿用變數名，不用寫成 players: players
                        currPlayer: null
                    }
                }
            }).mount('#app');
        </script>

鄉巴佬進化中。

JavaScript 鄉巴佬筆記 - ?. 運算子與物件屬性名簡寫

Comments

Post a comment