15+ JS简写骚操作，让你的代码“秀”起来

译者：王二狗
博客：掘金、思否、知乎、简书、头条、CSDN
点赞再看，养成习惯，你们的支持是我持续分享的最大动力😘
原文链接：https://www.sitepoint.com/shorthand-javascript-techniques/

三元操作符

使用三元操作符可以让你的if...else多行语句变成一行

简化前：

const x = 20;
let answer;

if (x > 10) {
    answer = "greater than 10";
} else {
    answer =  "less than 10";
}

简化后：

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

短路操作符

当进行变量赋值的时候，你可能需要确保被用来赋值的变量不是null、undefined或者为空。

简化前：

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

简化后：

const variable2 = variable1  || 'new';

是不是感觉难以置信😢，试一试下面的代码：

let variable1;
let variable2 = variable1  || 'bar';
console.log(variable2 === 'bar'); // prints true

variable1 = 'foo';
variable2 = variable1  || 'bar';
console.log(variable2); // prints foo

需要注意的是，如果 varibale1 的值为 false 或者是 0 ，则 'bar' 将会被赋值给 varibale2.

声明变量

简化前：

let x;
let y;
let z = 3;

简化后：

let x, y, z=3;

if判断是否存在

简化前：

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

简化后：

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

for 循环

简化前：

const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++)

简化后：

for (let fruit of fruits)

如果你想得到数组元素的下标，你可以这样子写：

for (let index in fruits)

当你用这种方法获取对象的key时仍然有效

const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj)
  console.log(key) // output: continent, country, city

对象属性

简化前：

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

简化后：

const obj = { x, y };

return

简化前：

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

简化后：

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

参数是默认值

简化前：

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

模板文本

简化前：

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}`;

解构赋值

简化前：

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;

… 运算符

简化前：

// 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];

你还可以使用 ...运算符在一个数组的任意位置去嵌入另一个数组：

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 }

Array.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' }

指数幂

简化前：

Math.pow(2,3); // 8
Math.pow(2,2); // 4
Math.pow(4,3); // 64

简写后：

2**3 // 8
2**4 // 4
4**3 // 64

字符串转数字

简化前：

const num1 = parseInt("100");
const num2 =  parseFloat("100.01");

简化后：

const num1 = +"100"; // converts to int data type
const num2 =  +"100.01"; // converts to float data type

Object.entries()

这是一个 es8 中出现的特性，允许你把一个对象转换成具有键值对的数组。

const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.entries(credits);
console.log(arr);

/** Output:
[ [ 'producer', 'John' ],
  [ 'director', 'Jane' ],
  [ 'assistant', 'Peter' ]
]
**/

Object.values()

Object.values() 同样是 es8 里面出现的一个新特性，它和 Object.entries() 功能类似，但是在最终的转换数组中没有 key。

const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.values(credits);
console.log(arr);

/** Output:
[ 'John', 'Jane', 'Peter' ]
**/

告诫自己，即使再累也不要忘记学习，成功没有捷径可走，只有一步接着一步走下去。 共勉！