前端一些javascript简写方式

if操作符简写
xxxx

var a = 1
if (a = 2) {
	a = 3
} else {
	a = 4
}
可简写为 ==> if (a = 1) a = 3; a = 4
if (flag === true) 存在条件的简写 ==> if (flag) 或者 ==> if(!flag)

三元操作符简写

const x = 20;
let answer;
if (x > 10) {
    answer = 'is greater';
} else {
    answer = 'is lesser';
}
可简写为 ==> const answer = x > 10 ? 'is greater' : 'is lesser';
开关控件 ==> isOpened2 ? '开' : '关'

三元运算符的嵌套

this.offline ? offlineIcon1 : isOpened == 1 ? openedIcon1 : closedIcon1

短路求值简写方式

当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句。

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}
可简写为 ==> const variable2 = variable1  || 'new';

声明变量简写方法

let x;
let y;
let z = 3;
可简写为 => let x, y, z=3;

循环条件的简写

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

短路评价

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

十进制指数

// 当需要写数字带有很多零时（如10000000），可以采用指数（1e7）来代替这个数字：
for (let i = 0; i < 1e7; i++) {}

// 下面都是返回true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

对象属性简写

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

箭头函数简写

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

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

list.forEach(function(item) {
  console.log(item);
});
==> list.forEach(item => console.log(item));

隐式返回值简写

function calcCircumference(diameter) {
  return Math.PI * diameter
}
==> calcCircumference = diameter => (
	  Math.PI * diameter;
	)
	
var func = function func() {
  return { foo: 1 };
};
==> var func = () => ({ foo: 1 });

默认参数简写

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

模板字符串

const welcome = 'You have logged in as ' + first + ' ' + last + '.'
==> const welcome = `You have logged in as ${first} ${last}`;

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

解构赋值简写

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
==> import { observable, action, runInAction } from 'mobx';

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;
==> const { store, form, loading, errors, entity } = this.props;

模板字符串简写

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.`

扩展运算符简写

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
==> 
// 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.slice()
==>
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

强制参数简写

function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!');
  }
  return bar;
}
==>
mandatory = () => {
  throw new Error('Missing parameter!');
}

foo = (bar = mandatory()) => {
  return bar;
}

双重非位运算简写

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