对于任何基于 JavaScript 本赛季的开发人员来说，都有必要认证阅读一下这篇文章。 我写的这篇文章是学习 JavaScript 简写编码技巧的重要参考资料，这些技巧都是我多年学习和总结出来的。 为了有助于理解这些简写编码技巧，我也给出了相关的编码观点。

2017 年 6 月 14 日：本文已更新，增加了基于 ES6 新的简写技巧。

1. 三元操作符

当你想在一行代码中写一个 if..else 语句时，这是一个很好的节省代码的方式。

普通写法：

const x = 20;
let answer;
if (x > 10) {
    answer = 'is greater';
} else {
    answer = 'is lesser';
}

简写：

const answer = x > 10 ? 'greater than 10' : 'less than 10';

你也可以像这样嵌套 if 语句：

const answer = x > 10 ? " greater than 10" : x 

2. 缩短求值简写

将变量值分配给另一个变量时，你可能需要确保源变量不为 null、undefined 或者不为空。你可以使用多个条件写一个很长的 if 语句，也可以使用缩短求值的简写办法。

普通写法：

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

3. 变量声明速简写

在函数开始处声明变量并赋值是一个很好的习惯。这种简写方法可以同时声明多个变量，为您节省大量的时间和空间。

普通写法：

let x;
let y;
let z = 3;

简写：

let x, y, z=3;

4. If 条件为真的简写

这可能是微不足道的，但值得一提。在做 “ if 检查” 时，碰到条件为真时，比较运算操作可以省略。

普通写法：

if (likeJavaScript === true)

简写：

if (likeJavaScript)

注意： 这两个例子并不是完全相等，只要 likeJavaScript 变量是一个 ，该表达式就是成立的。

还有另一个例子。如果 “a” 不等于 true ，如下：

普通写法：

let a;
if ( a !== true ) {
// do something...
}

简写：

let a;
if ( !a ) {
// do something...
}

5. JavaScript for 循环简写

如果你只想要简单的 JavaScript ，而不是依赖外部库，如jQuery或lodash，那这个小技巧会非常有用。

普通写法：

for (let i = 0; i < allImgs.length; i++)

简写：

for (let index of 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. 缩短求值

我们可以简单地使用缩短逻辑运算符，只用一行代码完成相同的事情，而不是写 6 行代码来分配缺省值。

普通写法：

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

简写：

const dbHost = process.env.DB_HOST || 'localhost';

7. 十进制数指数

你可能见过这个这种写法。它本质上是一种比较花哨的数字表示法，省去了后面尾随的一堆零。例如，1e7 实际上表示 1 后面跟着 7 个零。它表示一个十进制基数指数 (JavaScript解释为浮点类型)，等于10,000,000。

普通写法：

for (let i = 0; i < 10000; i++) {}

简写：

for (let i = 0; i < 1e7; i++) {}

// 以下将全部求值为 true 
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

8. 对象属性简写

在 JavaScript 中定义对象字面量非常容易。ES6 提供了一种更简单的方法来将属性分配给对象。如果 name 和 key 名字相同，则可以利用简写符号。

普通写法：

const obj = { x:x, y:y };

简写：

const obj = { x, y };

9. 箭头函数简写

普通写法的函数很容易阅读和书写，但是一旦开始在其他函数调用中嵌套它们，它们就会变得有点冗长和混乱。

普通写法：

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));

需要注意的是，在箭头函数内部的 this 值的确定方式不同于普通写法的函数，所以这两个例子并不完全相同。有关更多详细信息，请参阅 。

10. 隐式返回简写

我们经常使用 return 关键字来返回一个函数的最终结果。使用单条语句的箭头函数将隐式返回求值结果（该函数必须省略大括号（{}）才能省略 return 关键字）。

要返回多行表达式（如对象字面量），那么需要用 () 而不是 {} 来包裹你的函数体。这样可以确保代码作为一个单独的表达式被求值返回。

普通写法：

function calcCircumference(diameter) {
  return Math.PI * diameter
}

简写：

calcCircumference = diameter => (
  Math.PI * diameter;
)

11. 参数默认值

你可以使用 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. 模板字面量

你是不是已经厌倦了用 ' + ' 来连接多个变量拼接成一个字符串？有没有更简单的方式来完成吗？如果你可以使用 ES6 的话，那么恭喜你，你要做的只是使用反引号和 ${} 来包裹你的变量。

普通写法：

const welcome = 'You have logged in as ' + first + ' ' + last + '.'

const db = 'https://' + host + ':' + port + '/' + database;

简写：

const welcome = `You have logged in as ${first} ${last}`;

const db = `https://${host}:${port}/${database}`;

13. 解构赋值简写

如果你正在使用任何流行的 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. 多行字符串简写

如果你曾经发现自己需要在代码中编写多行字符串，那么你将会这样写：

普通写法：

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. 展开运算符简写

在ES6中引入的 展开运算符 有几个用例，使 JavaScript 代码更高效、更有趣。它可以用来替换某些数组函数。展开运算符写起来很简单，就是三个点。

普通写法：

// 拼接数组
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// 克隆数组
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()

简写：

// 拼接数组
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

// 克隆数组
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. 强制参数简写

默认情况下，如果 JavaScript 传递的值没赋值，它将设置函数参数为 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 简写

如果你曾经使用原生 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] 简写

你知道 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

这个函数很好的实现了所需的功能。但是，考虑一个场景，在这个场景中，你有非常多的表单需要验证，但是需要使用不同的字段和规则。那么构建一个在运行时被配置的通用验证函数岂不是更好？

简写：

// 对象验证规则
const schema = {
  first: {
    required:true
  },
  last: {
    required:true
  }
}

// 通用的验证函数
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. 双位非运算符简写

位操作符是你在刚学习 JavaScript 时会学到的一个特性，但是如果你不处理二进制的话，基本上是从来都不会用上的。

但是，双位运算符有一个非常实用的使用场景：可以用来代替 Math.floor。双位非运算符的优势在于它执行相同操作的速度更快。你可以在查看更多关于位运算符的知识。

普通写法：

Math.floor(4.9) === 4  //true

简写：

~~4.9 === 4  //true

注：按位运算符方法执行很快，当你执行数百万这样的操作非常适用，速度明显优于其他方法。但是代码的可读性比较差。还有一个特别要注意的地方，所有的按位运算都以带符号的32位整数进行。处理比较大的数字时（当数字范围超出 ±2^31?1 即：2147483647），会有一些异常情况。使用的时候明确的检查输入数值的范围。 具体可以查看 你可能不知道的 JavaScript 中数字取整：向上取整，向下取整，四舍五入，舍去小数

20. 还有其他的小技巧？

我确实喜欢这些小技巧，希望能有更多关于这方面的 JavaScript 小技巧。如果你有这方面的技巧，欢迎留言分享！

原文链接：