入门级
1、三目运算符
示例：
const x = 5; let a; if (x > 3) { a = '大于3'; } else { a = '不大于3'; } console.log(a) // 大于3
三目写法：
const a = x > 3 ? '大于3' : '不大于3'; console.log(a) // 大于3
2、声明变量
在函数开始之前，对变量进行赋值是一种很好的习惯。
在申明多个变量时,示例：
let x; let y; let z = 3;
可以简写为：
let x, y, z=3;
3、循环语句
当使用纯 JavaScript（不依赖外部库，如 jQuery 或 lodash）时，下面的简写会非常有用。
示例：
for (let i = 0; i < allImgs.length; i++)
简写为：
for (let index of allImgs)
遍历数组 forEach 的简写示例：
function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element); } let arr = [2, 5, 9] arr.forEach(logArrayElements); // logs: // a[0] = 2 // a[1] = 5 // a[2] = 9
4、十进制数
可以使用科学计数法来代替较大的数据，如可以将 10000000 简写为 1e7。
for (let i = 0; i < 10000; i++) { }
简写为：
for (let i = 0; i < 1e7; i++) { }
5、多行字符串
如果需要在代码中编写多行字符串，就像下面这样：
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.`
6、if 语句
在使用 if 进行基本判断时，可以省略赋值运算符。
if (likeJavaScript === true)
// 简写
if (likeJavaScript)
进阶级
7、变量赋值
当将一个变量的值赋给另一个变量时，首先需要确保原值不是 null、未定义的或空值。
可以通过编写一个包含多个条件的判断语句来实现：
if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let variable2 = variable1; }
简写
const variable2 = variable1 || 'new';
测试版
let variable1; let variable2 = variable1 || ''; console.log(variable2 === ''); // prints true variable1 = 'foo'; variable2 = variable1 || ''; console.log(variable2); // prints foo
8、默认值赋值
如果预期参数是 null 或未定义，则不需要写六行代码来分配默认值。我们可以只使用一个简短的逻辑运算符，只用一行代码就能完成相同的操作。
let dbHost; if (process.env.DB_HOST) { dbHost = process.env.DB_HOST; } else { dbHost = 'localhost'; }
简写
const dbHost = process.env.DB_HOST || 'localhost';
9、对象属性
ES6 提供了一个很简单的办法，来分配属性的对象。如果属性名与 key 名相同，则可以使用简写。
const obj = { x:x, y:y };
简写
const obj = { x, y };
10、箭头函数
经典函数很容易读写，但是如果把它们嵌套在其它函数中进行调用时，整个函数就会变得有些冗长和混乱。这时候可以使用箭头函数来简写：
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));
11、隐式返回值
返回值是我们通常用来返回函数最终结果的关键字。只有一个语句的箭头函数，可以隐式返回结果（函数必须省略括号（{ }），以便省略返回关键字）。
要返回多行语句（例如对象文本），需要使用（）而不是{ }来包裹函数体。这样可以确保代码以单个语句的形式进行求值。
function calcCircumference(diameter) { return Math.PI * diameter }
简写版本
calcCircumference = diameter => ( Math.PI * diameter; )
12、默认参数值
可以使用 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
13、模板字符串
以前习惯了使用“+”将多个变量转换为字符串，但是有没有更简单的方法呢？
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}`;
14、解构赋值
解构赋值是一种表达式，用于从数组或对象中快速提取属性值，并赋给定义的变量。
在代码简写方面，解构赋值能达到很好的效果。
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;
