阅读此文章对于任何使用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