20個常用的JavaScript簡寫技巧

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"任何編程語言的簡寫技巧都能夠幫助你編寫更簡練的代碼，讓你用更少的代碼實現你的目標。讓我們一個個來看看JavaScript的簡寫技巧吧。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"1. 聲明變量"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nlet x; \nlet y = 20; \n\n\n\/\/Shorthand \nlet x, y = 20;"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"2. 給多個變量賦值"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們可以使用數組解構來在一行中給多個變量賦值。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nlet a, b, c; \na = 5; \nb = 8; \nc = 12;\n \n\/\/Shorthand \nlet [a, b, c] = [5, 8, 12];"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"3. 三元運算符"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們可以使用三元（條件）運算符在這裏節省 5行代碼。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nlet marks = 26; \nlet result; \nif(marks >= 30){\n result = 'Pass'; \n}else{ \n result = 'Fail'; \n} \n\/\/Shorthand \nlet result = marks >= 30 ? 'Pass' : 'Fail';"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"4. 賦默認值"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們可以使用OR(||)短路運算來給一個變量賦默認值，如果預期值不正確的情況下。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nlet imagePath; \nlet path = getImagePath(); \nif(path !== null && path !== undefined && path !== '') { \n imagePath = path; \n} else { \n imagePath = 'default.jpg'; \n} \n\n\n\/\/Shorthand \nlet imagePath = getImagePath() || 'default.jpg';"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"5. 與(&&) 短路運算"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你只有當某個變量爲true時調用一個函數，那麼你可以使用"},{"type":"codeinline","content":[{"type":"text","text":"與(&&)"}]},{"type":"text","text":" 短路形式書寫。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nif (isLoggedin) {\n goToHomepage(); \n} \n\n\n\/\/Shorthand \nisLoggedin && goToHomepage();"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當你在React中想要有條件地渲染某個組件時，這個"},{"type":"codeinline","content":[{"type":"text","text":"與(&&)"}]},{"type":"text","text":" 短路寫法比較有用。例如："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"

{ this.state.isLoading && } "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"6. 交換兩個變量"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了交換兩個變量，我們通常使用第三個變量。我們可以使用數組解構賦值來交換兩個變量。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"let x = 'Hello', y = 55; \n\/\/Longhand \nconst temp = x; \nx = y; \ny = temp; \n\n\n\/\/Shorthand \n[x, y] = [y, x];"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"7. 箭頭函數"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nfunction add(num1, num2) { \n return num1 + num2; \n} \n\n\n\/\/Shorthand \nconst add = (num1, num2) => num1 + num2;"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"參考: "},{"type":"link","attrs":{"href":"https:\/\/jscurious.com\/javascript-arrow-function\/","title":"","type":null},"content":[{"type":"text","text":"JavaScript Arrow function"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"8. 模板字符串"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們一般使用+運算符來連接字符串變量。使用ES6的模板字符串，我們可以用一種更簡單的方法實現這一點。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nconsole.log('You got a missed call from ' + number + ' at ' + time); \n\n\n\/\/Shorthand \nconsole.log(`You got a missed call from ${number} at ${time}`);"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"9. 多行字符串"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於多行字符串，我們一般使用+運算符以及一個新行轉義字符（\\n）。我們可以使用(`)以一種更簡單的方式實現。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nconsole.log('JavaScript, often abbreviated as JS, is a\\n' + 'programming language that conforms to the \\n' + \n'ECMAScript specification. JavaScript is high-level,\\n' + \n'often just-in-time compiled, and multi-paradigm.' ); \n\/\/Shorthand \nconsole.log(`JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.`);"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"10. 多條件檢查"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於多個值匹配，我們可以將所有的值放到數組中，然後使用"},{"type":"codeinline","content":[{"type":"text","text":"indexOf()"}]},{"type":"text","text":" 或"},{"type":"codeinline","content":[{"type":"text","text":"includes()"}]},{"type":"text","text":" 方法。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nif (value === 1 || value === 'one' || value === 2 || value === 'two') { \n \/\/ Execute some code \n} \n\n\n\/\/ Shorthand 1\nif ([1, 'one', 2, 'two'].indexOf(value) >= 0) { \n \/\/ Execute some code \n}\n\/\/ Shorthand 2\nif ([1, 'one', 2, 'two'].includes(value)) { \n \/\/ Execute some code \n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"11. 對象屬性複製"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果變量名和對象的屬性名相同，那麼我們只需要在對象語句中聲明變量名，而不是同時聲明鍵和值。JavaScript會自動將鍵作爲變量的名，將值作爲變量的值。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"let firstname = 'Amitav'; \nlet lastname = 'Mishra'; \n\/\/Longhand \nlet obj = {firstname: firstname, lastname: lastname}; \n\n\n\/\/Shorthand \nlet obj = {firstname, lastname};"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"12. 字符串轉成數字"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}