JavaScript 19 個 JavaScript 編碼中的簡寫語法
閱讀此文章對於任何使用JavaScript的開發人員來說都是非常有必要的。我將這篇文章作為我使用JavaScript簡化語法編碼參考的重要來源已經很多年
2017年6月14日:本文基於ES6語法更新新增新的簡寫技巧。如果您想了解有關ES6更改的更多資訊，檢視ES6相關內容。
1. The Ternary Operator(三元運算子)
當你想在一行中編寫if..else語句時，這將會是一個非常好的方式。
原版：
const x = 20; let big; if (x > 10) { big = true; } else { big = false; }
簡版：
const big = x > 10 ? true : false;
你也可以巢狀if語句像這樣：
const big = x > 10 ? " greater 10" : x < 5 ? "less 5" : "between 5 and 10";
2. Short-circuit Evaluation Shorthand(空值or未定義檢查)
將變數值分配給另一個變數時，可能需要確保源變數不為null，undefined或為''。你可以使用多個條件來一個很長的if語句，也可以使用短路賦值。
原版：
if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let variable2 = variable1; }
簡版：
const variable2 = variable1 || 'new';
不相信我？你可以自己測試（把下面的程式碼貼上在es6console)：
let variable1;
let variable2 = variable1 || '';
console.log(variable2 === ''); // prints true
variable1 = 'foo';
variable2 = variable1 || '';
console.log(variable2); // prints foo
3. Declaring Variables Shorthand(宣告變數)
在你的函式開始時宣告變數複製是一個好習慣。這種簡寫方法可以在同時宣告多分變數時節省大量的時間和空間。
原版：
let x;
let y;
let z = 3;
簡寫：
let x, y, z=3;
4. If Presence Shorthand(判斷是否存在)
這可能是微不足道的，但值得一提。當正在進行『如果檢查』的時候，分配運算子有時可以省略。
原版：
if (likeJavaScript === true)
簡版：
if (likeJavaScript)
Note:這兩個例子並不是完全相同，只要
likeJavaScript是一個真值，簡版的邏輯就會通過。
這是另外一個例子。如果『a』不等於true，則做某事。
原版：
let a;
if ( a !== true ) {
// do something...
}
簡版：
let a;
if ( !a ) {
// do something...
}
5. JavaScript for Loop Shorthand(JS迴圈)
這個小提示是非常有用的，如果你想要純粹的原生JavaScript，而不是依賴外部的庫，例如jQuery或者loadsh。
原版：
for (let i = 0; i < allImgs.length; i++)
簡版：
for (let index in allImgs)
Array.forEach 簡化：
function logArrayElements(element, index, array) {
console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 9
6. Short-circuit Evaluation(短路賦值)
如果預期的引數為null或undefined，則不用寫六行程式碼來分配一個預設值，所以我們可以簡單地使用一個短路邏輯運算子並用一行程式碼來完成通同樣的事情。
原版：
let dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = 'localhost';
}
簡版：
const dbHost = process.env.DB_HOST || 'localhost';
7. Decimal base exponents(十進位制基數指數)
你可能已經看過這個了。它本質上是一個花哨的方式來編寫沒有尾隨0的數字。例如1e7基本上意味著是1,隨後是7個零。它表示一個十進位制基數（在JavaScript作為浮點型解釋）等於10,000,000。
原版：
for (let i = 0; i < 10000; i++) {}
簡版：
for (let i = 0; i < 1e7; i++) {}
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
8. Object Property Shorthand(物件屬性)
在JavaScript中定義物件字面量變得更加容易。ES6為物件分配屬性提供了一種跟簡單的方法。如果屬性名稱和值名稱相同，則可以利用簡寫符號。
原版：
const obj = { x:x, y:y };
簡版：
const obj = { x, y };
9. Arrow Functions Shorthand(箭頭函式)
傳統的函式易於簡單的形式讀取和書寫，但是一旦你將其巢狀在其他函式呼叫中，它們往往會變得有點冗長且令人困惑。
原版：
function sayHello(name) {
console.log('Hello', name);
}
setTimeout(function() {
console.log('Loaded')
}, 2000);
list.forEach(function(item) {
console.log(item);
});
簡版：
sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));
10. Implicit Return Shorthand(隱式Return)
Return是我們經常使用的返回函式的最終結果的關鍵字。一個單一語句的箭頭函式將隱式地返回結果的值（該函式必需省略大括號{}，以省略return關鍵字）。
要返回多行語句（例如物件文字），必須使用()而不是{}來包裹函式體。這確保程式碼被執行為單個語句。
原版：
function calcCircumference(diameter) {
return Math.PI * diameter
}
簡版：
calcCircumference = diameter => (
Math.PI * diameter;
)
11. Default Parameter Values(預設引數值)
你可以使用if語句定義函式引數的預設值。在ES6中，你可以在函式宣告中定義預設值。
原版：
function volume(l, w, h) {
if (w === undefined)
w = 3;
if (h === undefined)
h = 4;
return l * w * h;
}
簡版：
volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24
12. Template Literals(模板文字)
你不厭倦使用+將多個變數連線成一個字串嗎？這不是一個更容易的方式嗎？如果你能試用ES6，那麼你就是幸運的。所有你需要做的就是使用 ` 符號，和${}來包含你的變數。
原版：
const welcome = 'You have logged in as ' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;
簡版：
const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;
13. Destructuring Assignment Shorthand(解構分配)
如果你正在使用任何流行的Web框架，那麼你將很高興使用陣列或資料以物件文字形式傳遞元件和API之間的資訊。一旦資料物件到達元件，就需要解包它。
原版：
const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;
簡版：
import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;
你甚至可以分配你自己的變數名：
const { store, form, loading, errors, entity:contact } = this.props;
14. Multi-line String Shorthand(多行字串)
如果你發現自己需要在程式碼中編寫多行字串，那麼你將如何編寫它：
原版：
const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
+ 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
+ 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
+ 'veniam, quis nostrud exercitation ullamco laboris\n\t'
+ 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
+ 'irure dolor in reprehenderit in voluptate velit esse.\n\t'
但有一個更簡單的方案。只需使用反引號。
簡版：
const lorem = `Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse.`
15. Spread Operator Shorthand(拓展操作符)
在ES6中引入的擴充套件運算子有幾個用例，使JavaScript程式碼的使用更有效率和有趣。它可以用於替換某些陣列函式。擴充套件操作符只是一連串的三個點。
原版：
// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()
簡版：
// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];
與concat()方法不同，您可以使用擴充套件運算子在另一個數組的任何位置插入陣列。
const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];
您還可以將擴充套件運算子與ES6解構符號組合：
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }
16. Mandatory Parameter Shorthand(強制引數)
預設情況下，JavaScript將函式引數設定為undefined，如果它們未傳遞值。一些其他語言將會發出警告或錯誤。要強制執行引數分配，如果undefined，可以使用if語句來丟擲錯誤，或者你可以利用『強制引數簡寫』的優勢。
原版：
function foo(bar) {
if(bar === undefined) {
throw new Error('Missing parameter!');
}
return bar;
}
簡版：
mandatory = () => {
throw new Error('Missing parameter!');
}
foo = (bar = mandatory()) => {
return bar;
}
17. Array.find Shorthand(陣列的find函式)
如果你有需求在原生JavaScript中編寫查詢功能，那麼你可能已經使用了for迴圈。在ES6中，引入了一個名為find()的新陣列函式。
原版：
const pets = [
{ type: 'Dog', name: 'Max'},
{ type: 'Cat', name: 'Karl'},
{ type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
for(let i = 0; i<pets.length; ++i) {
if(pets[i].type === 'Dog' && pets[i].name === name) {
return pets[i];
}
}
}
簡版：
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }
18. Object [key] Shorthand(運用物件的Key)
你知道Foo.bar也可以寫成Foo ['bar']嗎？起初，似乎沒有一個理由，你應該這樣寫。但是，這個符號為您提供了編寫可重用程式碼的構建塊。
思考一個驗證函式的簡化示例：
function validate(values) {
if(!values.first)
return false;
if(!values.last)
return false;
return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true
這個功能完成了它的工作。但是，考慮一種情況，您有很多形式需要應用驗證但具有不同的欄位和規則。構建可以在執行時配置的通用驗證函式不是更好嗎？
簡版：
// object validation rules
const schema = {
first: {
required:true
},
last: {
required:true
}
}
// universal validation function
const validate = (schema, values) => {
for(field in schema) {
if(schema[field].required) {
if(!values[field]) {
return false;
}
}
}
return true;
}
console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true
現在我們有一個驗證函式，我們可以在所有程式碼塊中重用，而無需為每個函式編寫自定義驗證函式。
19. Double Bitwise NOT Shorthand
位運算子是您在初學者JavaScript教程中學到的功能之一，您永遠不會在任何地方實現它們。此外，如果您不處理二進位制檔案，誰想要處理這些零和零。
但是，對於~~，非常實用的用例。你可以使用它作為Math.floor()的替代。它的優點是它執行相同的操作更快。
原版：
Math.floor(4.9) === 4 //true
簡版：
~~4.9 === 4 //true