if操做符簡寫javascript
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)
複製代碼
三元操做符簡寫java
const x = 20;
let answer;
if (x > 10) {
answer = 'is greater';
} else {
answer = 'is lesser';
}
可簡寫爲 ==> const answer = x > 10 ? 'is greater' : 'is lesser';
開關控件 ==> isOpened2 ? '開' : '關'
複製代碼
三元運算符的嵌套less
this.offline ? offlineIcon1 : isOpened == 1 ? openedIcon1 : closedIcon1
複製代碼
短路求值簡寫方式函數
當給一個變量分配另外一個值時,想肯定源始值不是null,undefined或空值。能夠寫撰寫一個多重條件的if語句。ui
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}
可簡寫爲 ==> const variable2 = variable1 || 'new';
複製代碼
聲明變量簡寫方法this
let x;
let y;
let z = 3;
可簡寫爲 => let x, y, z=3;
複製代碼
循環條件的簡寫spa
for (let i = 0; i < allImgs.length; i++) ==> for (let index in allImgs)
複製代碼
短路評價code
let dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = 'localhost';
}
==> const dbHost = process.env.DB_HOST || 'localhost';
複製代碼
十進制指數orm
// 當須要寫數字帶有不少零時(如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
複製代碼