1胰苏、短路求值簡寫方式
當(dāng)給一個(gè)變量分配另一個(gè)值時(shí),想確定源始值不是null岸更,undefined或空值鸵膏。可以寫撰寫一個(gè)多重條件的if語句怎炊。
if(variable1 !== null|| variable1 !== undefined|| variable1 !== '') {
let variable2 = variable1;
}
或者可以使用短路求值方法:
const variable2 = variable1 || 'new';
2谭企、隱式返回值簡寫
經(jīng)常使用return語句來返回函數(shù)最終結(jié)果,一個(gè)單獨(dú)語句的箭頭函數(shù)能隱式返回其值(函數(shù)必須省略{}為了省略return關(guān)鍵字)
為返回多行語句(例如對象字面表達(dá)式)结胀,則需要使用()包圍函數(shù)體赞咙。
function calcCircumference(diameter) {
return Math.PI*diameter
}
var func=function func(){
return {foo:1};
}
簡寫:
calcCircumference=diameter=>{
Math.PI*diameter;
}
var func=()=>({foo:1});
3、默認(rèn)參數(shù)值
為了給函數(shù)中參數(shù)傳遞默認(rèn)值糟港,通常使用if語句來編寫,但是使用ES6定義默認(rèn)值院仿,則會(huì)很簡潔:
function volume(1,w,h){
if(w===undefined) w=3;
if(h===undefined) h=4;
return 1*w*h
}
簡寫:
volume=(1,w=3,h=4)=>(1*w*h);
volume(2) //output:24;
4秸抚、模板字符串
傳統(tǒng)的JavaScript語言,輸出模板通常是這樣寫的:
const welcome='You have logged in as'+first+last;
const db='http://'+host+':'+port+'/'+database;
ES6可以使用反引號和${}簡寫:
const welcome = `You have logged in as ${first} &{last}`;
const db=`http://${host}:${port}/${database}`
5歹垫、解構(gòu)賦值簡寫方法
在web框架中剥汤,經(jīng)常需要從組件和API之間來回傳遞數(shù)組或?qū)ο笞置嫘问降臄?shù)據(jù),然后需要解構(gòu)它排惨。
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;
簡寫:
import {observable,action,runInAction} from 'mbox';
const {store,form,loading,errors,entity}=this.props;
6吭敢、擴(kuò)展運(yùn)算符簡寫
擴(kuò)展運(yùn)算符有幾種用例讓JavaScript代碼更加有效使用,可以用來代替某個(gè)數(shù)組函數(shù):
const odd=[1,3,5];
const nums=[2,4,6].concat(odd);
簡寫:
const odd=[1,3,5];
const nums=[2,4,6,...odd];
console.log(nums); //output:[2, 4, 6, 1, 3, 5]
擴(kuò)展運(yùn)算符來可以在一個(gè)數(shù)組中任意處插入另一個(gè)數(shù)組:
const odd=[1,3,5];
const nums=[2,...odd,4,6];
也可以使用擴(kuò)展運(yùn)算符解構(gòu):
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}
7暮芭、強(qiáng)制參數(shù)簡寫
js中如果沒有向函數(shù)參數(shù)傳遞值鹿驼,則參數(shù)為undefined,為了增強(qiáng)參數(shù)復(fù)制欲低,
可以使用if語句來拋出異常,或使用強(qiáng)制參數(shù)簡寫方法畜晰。
function foo(bar){
if(bar===undefined) throw new Error('Misssing parameter!');
return bar;
}
簡寫:
mandatory=()=>{
throw new Error('Missing parameter!');
}
foo=(bar=mandatory())=>{
return bar;
}
8砾莱、Object[key]簡寫
考慮一個(gè)驗(yàn)證函數(shù):
function validate(values){
if(!values.first) return false;
if(!values.last) return false;
return true;
}
console.log(validate({first:'Tom',last:'Jack'})); //true
假設(shè)當(dāng)需要不同域和規(guī)則來驗(yàn)證,能否編寫一個(gè)通用函數(shù)在運(yùn)行時(shí)確認(rèn)凄鼻?
//對象驗(yàn)證規(guī)則
const schema={
first:{required:true},
last:{required:true}
}
//通用驗(yàn)證函數(shù)
const validate=(schema,values)={
for(field in schema){
if(schema[field].required){
if(!values[field]){
return false;
}
}
}
return true;
}
console.log(validate(schema,{first:'Tom'})); //false
console.log(validate(schema,{first:'Tom',last:'Jack'})); //true
現(xiàn)在可以有適用于各種情況的驗(yàn)證函數(shù)腊瑟,不需要為了每個(gè)而編寫自定義驗(yàn)證函數(shù)了
9、雙重非位運(yùn)算簡寫
有一個(gè)有效用例用于雙重非運(yùn)算操作符块蚌∪蚍牵可以用來代替Math.floor(),其優(yōu)勢在于運(yùn)行更快
Math.floor(4.9)===4 //true
簡寫:
~~4.9===4