簡(jiǎn)化一段javascript代碼

李增田發(fā)布于2019-08-22 18:06 / 1663人閱讀

摘要：賦值操作合并首先，和這兩行沒(méi)必要寫成兩行，都是賦值，應(yīng)此可以這樣優(yōu)化去掉判斷如果把判斷，改成三元運(yùn)算符，可以減少代碼，如下如果用符號(hào)，看起來(lái)更加方便當(dāng)然，這兩行代碼，最終可以合并成如下代碼至此完成，最終行代碼簡(jiǎn)化成一行代碼。

在實(shí)際的項(xiàng)目中，我們經(jīng)常會(huì)有如下的需求：
從一個(gè)map中獲取某key的值，如果發(fā)現(xiàn)對(duì)應(yīng)的key的值為null，則為該key創(chuàng)建一個(gè)值(一般為初始值)，然后把這個(gè)值存回到map中，代碼如下：

var value = map[key];
if(value == null){
        value = "";
        map[key] = value;
}

但是總感覺這段代碼很惡心，為啥，太啰嗦，太長(zhǎng)。實(shí)際項(xiàng)目中，這種操作會(huì)技巧多，如果到處都是這種操作的話，就很讓人崩潰。壞蛋必須死。

賦值操作合并

首先，value = "" 和 map[key] = value這兩行沒(méi)必要寫成兩行，都是賦值，應(yīng)此可以這樣優(yōu)化：

var value = map[key];
if(value == null){
        value = map[key]  = "";
}

去掉if判斷

如果把if判斷，改成三元運(yùn)算符，可以減少代碼，如下：

var value = map[key];
 value   = (value == null) ?( map[key]  = "") : value;

如果用 || 符號(hào)，看起來(lái)更加方便：

var value = map[key];
 value   = value || (map[key] = "");

當(dāng)然，這兩行代碼，最終可以合并成如下代碼：

  var value = map[key]  || (map[key] = "");

至此完成，最終5行代碼簡(jiǎn)化成一行代碼。

另外一個(gè)答案

拿這個(gè)問(wèn)題問(wèn)公司的小伙伴，下面是另外一種答案：

var value = map[key] = map[key]  ||  ""

總結(jié)

這個(gè)問(wèn)題并不難，拿這個(gè)問(wèn)題問(wèn)小伙伴，一些人也可以給出正確答案。但平時(shí)沒(méi)有誰(shuí)這樣去主動(dòng)思考。

歡迎關(guān)注公眾號(hào)：

云服務(wù)器 GPU云服務(wù)器一段手機(jī)html代碼 asp注釋一段代碼 javascript代碼 javascript常用代碼

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95500.html

相關(guān)文章

javascript 勻速運(yùn)動(dòng)實(shí)現(xiàn)側(cè)邊欄分享效果

摘要：原理采用對(duì)象距離左邊的距離加固定速度。實(shí)現(xiàn)側(cè)邊欄分享效果用運(yùn)動(dòng)做一個(gè)側(cè)邊欄分享分享到當(dāng)我們寫好一段代碼的時(shí)候，我們應(yīng)該進(jìn)行測(cè)試優(yōu)化。實(shí)現(xiàn)側(cè)邊欄分享效果簡(jiǎn)化速度參數(shù)用運(yùn)動(dòng)做一個(gè)側(cè)邊欄分享分享到原理采用offsetLeft（對(duì)象距離左邊的距離）加固定速度。采用定時(shí)器setInterval和clearInterval 根據(jù)當(dāng)前位置到目標(biāo)位置是正值還是負(fù)值決定運(yùn)行的速度為正值還是負(fù)值。...

wind3110991 2019-08-23 11:34 評(píng)論0 收藏0
你真會(huì)用setTimeout嗎?

摘要：什么交互都處理不了怎么辦簡(jiǎn)化復(fù)雜度復(fù)雜邏輯后端處理的多線程上面都是的做法，但是也是處理這種問(wèn)題的一把好手。換一種思路，上面就是利用實(shí)現(xiàn)一種偽多線程的概念。教科書里面的setTimeout 定義很簡(jiǎn)單 setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。廣泛應(yīng)用場(chǎng)景定時(shí)器，輪播圖，動(dòng)畫效果，自動(dòng)滾動(dòng)等等上面一些應(yīng)該是setTimeout在大家心中的樣子...

jsyzchen 2019-08-21 10:47 評(píng)論0 收藏0
JavaScript的計(jì)時(shí)器的工作原理

摘要：創(chuàng)建了一個(gè)簡(jiǎn)單的計(jì)時(shí)器，在經(jīng)過(guò)給定的時(shí)間后，回調(diào)函數(shù)將會(huì)被執(zhí)行。接受一個(gè)計(jì)時(shí)器由之前兩種計(jì)時(shí)器返回并且停止計(jì)時(shí)器回調(diào)函數(shù)的執(zhí)行。然而，我們可以注意到，當(dāng)定時(shí)器再一次觸發(fā)在計(jì)時(shí)器回調(diào)函數(shù)正在執(zhí)行的時(shí)候，這一次定時(shí)器回調(diào)函數(shù)被丟棄了。最近都在看一些JavaScript原理層面的文章，恰巧看到了jQuery的作者的一篇關(guān)于JavaScript計(jì)時(shí)器原理的解析，于是誠(chéng)惶誠(chéng)恐地決定把原文翻譯成...

geekzhou 2019-08-21 10:28 評(píng)論0 收藏0
JS 異步的實(shí)現(xiàn)

摘要：由于引擎同一時(shí)間只執(zhí)行一段代碼這是由單線程的性質(zhì)決定的，所以每個(gè)代碼塊阻塞了其它異步事件的進(jìn)行。這意味著瀏覽器將等待著一個(gè)新的異步事件發(fā)生。異步的任務(wù)執(zhí)行的順序是不固定的，主要看返回的速度。我們經(jīng)常說(shuō)JS是單線程的，比如node.js研討會(huì)上大家都說(shuō)JS的特色之一是單線程的，這樣使JS更簡(jiǎn)單明了，可是大家真的理解所謂JS的單線程機(jī)制嗎？單線程時(shí)，基于事件的異步機(jī)制又該當(dāng)如何，這些知識(shí)...

sihai 2019-08-22 11:14 評(píng)論0 收藏0
JavaScript 與異步編程

摘要：然而異步編程真正發(fā)展壯大，的流行功不可沒(méi)。于是從異步編程誕生的那一刻起，它就和回調(diào)函數(shù)綁在了一起。這個(gè)函數(shù)會(huì)起一個(gè)定時(shí)器，在超過(guò)指定時(shí)間后執(zhí)行指定的函數(shù)。我們知道是異步編程的未來(lái)。什么是異步（Asynchrony）按照維基百科上的解釋：獨(dú)立于主控制流之外發(fā)生的事件就叫做異步。比如說(shuō)有一段順序執(zhí)行的代碼 void function main() { fA(); fB(); }...

YFan 2019-08-21 16:40 評(píng)論0 收藏0