常用的 JavaScript 簡寫方法

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
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末峭范,一起剝皮案震驚了整個(gè)濱河市财松,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌虎敦,老刑警劉巖游岳,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異其徙,居然都是意外死亡胚迫,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門唾那,熙熙樓的掌柜王于貴愁眉苦臉地迎上來访锻,“玉大人,你說我怎么就攤上這事闹获∑谌” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵避诽,是天一觀的道長龟虎。 經(jīng)常有香客問我,道長沙庐,這世上最難降的妖魔是什么鲤妥? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮拱雏,結(jié)果婚禮上棉安,老公的妹妹穿的比我還像新娘。我一直安慰自己铸抑,他們只是感情好贡耽,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般蒲赂。 火紅的嫁衣襯著肌膚如雪阱冶。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天凳宙,我揣著相機(jī)與錄音熙揍,去河邊找鬼。 笑死氏涩,一個(gè)胖子當(dāng)著我的面吹牛届囚,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播是尖,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼意系,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了饺汹?” 一聲冷哼從身側(cè)響起蛔添,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎兜辞,沒想到半個(gè)月后迎瞧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡逸吵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年凶硅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扫皱。...
    茶點(diǎn)故事閱讀 39,690評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡足绅,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出韩脑,到底是詐尸還是另有隱情氢妈,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布段多,位于F島的核電站首量,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏进苍。R本人自食惡果不足惜蕾总,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望琅捏。 院中可真熱鬧,春花似錦递雀、人聲如沸柄延。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽搜吧。三九已至市俊,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間滤奈,已是汗流浹背摆昧。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蜒程,地道東北人绅你。 一個(gè)月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像昭躺,于是被迫代替她去往敵國和親忌锯。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 官網(wǎng) 中文版本 好的網(wǎng)站 Content-type: text/htmlBASH Section: User ...
    不排版閱讀 4,380評論 0 5
  • 函數(shù)參數(shù)的默認(rèn)值 基本用法 在ES6之前领炫,不能直接為函數(shù)的參數(shù)指定默認(rèn)值偶垮,只能采用變通的方法。 上面代碼檢查函數(shù)l...
    呼呼哥閱讀 3,382評論 0 1
  • 函數(shù)和對象 1帝洪、函數(shù) 1.1 函數(shù)概述 函數(shù)對于任何一門語言來說都是核心的概念似舵。通過函數(shù)可以封裝任意多條語句,而且...
    道無虛閱讀 4,556評論 0 5
  • 7月份葱峡,剛剛換了份工作砚哗,本來沒有打算現(xiàn)在出行,朋友說她辭職了族沃,想出去走走频祝,就找了旅行社,把行程發(fā)給我了脆淹,按耐不住內(nèi)...
    朝陽孤鶩閱讀 321評論 2 0
  • 原創(chuàng)日記(86)2017.5.13 多云 日記記錄我生活的婆婆媽媽常空。 幸福生活黑茶永相伴! 今天是我的生日盖溺,早上起...
    黑金公主閱讀 183評論 0 0