JavaScript 编码小技巧

三元操作符

如果使用if...else语句，那么这是一个很好节省代码的方式。

Longhand:

const x = 20;

let answer;

if (x > 10) {

    answer = 'is greater';

} else {

    answer = 'is lesser';

}

Shorthand:

const answer = x > 10 ? 'is greater' : 'is lesser';
const big = x > 10 ? " greater 10" : x

Short-circuit Evaluation

分配一个变量值到另一个变量的时候，你可能想要确保变量不是null、undefined或空。你可以写一个有多个if的条件语句或者Short-circuit Evaluation。

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {

     let variable2 = variable1;

}

Shorthand:

const variable2 = variable1  || 'new';

let variable1;

let variable2 = variable1  || '';

console.log(variable2 === ''); // prints true

 

variable1 = 'foo';

variable2 = variable1  || '';

console.log(variable2); // prints foo

声明变量

在函数中声明变量时，像下面这样同时声明多个变量可以节省你大量的时间和空间：

Longhand:

let x;

let y;

let x = 3;

Shorthand:

let x, y, z=3;

如果存在

这可能是微不足道的，但值得提及。做“如果检查”时，赋值操作符有时可以省略。

Longhand:

if (likeJavaScript === true)

Shorthand:

if (likeJavaScript)

JavaScript的for循环

如果你只想要原生的JavaScript，而不想依赖于jQuery或Lodash这样的外部库，那这个小技巧是非常有用的。

Longhand:

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

Shorthand:

for (let index in allImgs)

Short-circuit Evaluation

如果参数是null或者是undefined，我们可以简单的使用一个Short-circuit逻辑运算，实现一行代码替代六行代码的写法。

Longhand:

let dbHost;

if (process.env.DB_HOST) {

  dbHost = process.env.DB_HOST;

} else {

  dbHost = 'localhost';

}

Shorthand:

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

十进制指数

你可能看过这个。它本质上是一个写数字的奇特写法，就是一个数字后面有很多个0。例如1e7本质相当于10000000（1的后面有7个0）。它代表了十进制计数等于10000000。

Longhand:

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

Shorthand:

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;

对象属性

定义对象文字（Object literals）让JavaScript变得更有趣。ES6提供了一个更简单的办法来分配对象的属性。如果属性名和值一样，你可以使用下面简写的方式。

Longhand:

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

Shorthand:

const obj = { x, y };

箭头函数

经典函数很容易读和写，但它们确实会变得有点冗长，特别是嵌套函数中调用其他函数时还会让你感到困惑。

Longhand:

function sayHello(name) {

  console.log('Hello', name);

}

 

setTimeout(function() {

  console.log('Loaded')

}, 2000);

 

list.forEach(function(item) {

  console.log(item);

});

Shorthand:

sayHello = name => console.log('Hello', name);

 

setTimeout(() => console.log('Loaded'), 2000);

 

list.forEach(item => console.log(item));

隐式返回

return在函数中经常使用到的一个关键词，将返回函数的最终结果。箭头函数用一个语句将隐式的返回结果（函数必须省略{}，为了省略return关键词）。

如果返回一个多行语句（比如对象），有必要在函数体内使用()替代{}。这样可以确保代码是否作为一个单独的语句返回。

Longhand:

function calcCircumference(diameter) {

  return Math.PI * diameter

}

Shorthand:

calcCircumference = diameter => (

  Math.PI * diameter;

)

默认参数值

你可以使用if语句来定义函数参数的默认值。在ES6中，可以在函数声明中定义默认值。

Longhand:

function volume(l, w, h) {

  if (w === undefined)

    w = 3;

  if (h === undefined)

    h = 4;

  return l * w * h;

}

Shorthand:

volume = (l, w = 3, h = 4 ) => (l * w * h);

 

volume(2) //output: 24

Template Literals

是不是厌倦了使用+来连接多个变量变成一个字符串？难道就没有一个更容易的方法吗？如果你能使用ES6，那么你是幸运的。在ES6中，你要做的是使用撇号和${}，并且把你的变量放在大括号内。

Longhand:

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

 

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

Shorthand:

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

 

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

Destructuring Assignment

如果你正在使用任何一个流行的Web框架时，就有很多机会使用数组的形式或数据对象的形式与API之间传递信息。一旦数据对象达到一个对个组件时，你需要将其展开。

Longhand:

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;

Shorthand:

import { observable, action, runInAction } from 'mobx';

 

const { store, form, loading, errors, entity } = this.props;