簡化一段javascript代碼

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

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

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

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

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

賦值操作合并

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

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

去掉if判斷

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

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

如果用 || 符號，看起來更加方便：

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

當然，這兩行代碼，最終可以合并成如下代碼：

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

至此完成，最終5行代碼簡化成一行代碼。

另外一個答案

拿這個問題問公司的小伙伴，下面是另外一種答案：

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

總結(jié)

這個問題并不難，拿這個問題問小伙伴，一些人也可以給出正確答案。但平時沒有誰這樣去主動思考。

歡迎關注公眾號：

云服務器 GPU云服務器一段手機html代碼 asp注釋一段代碼 javascript代碼 javascript常用代碼

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95500.html

javascript 勻速運動實現(xiàn)側(cè)邊欄分享效果

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

wind3110991 2019-08-23 11:34 評論0 收藏0
你真會用setTimeout嗎?

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

jsyzchen 2019-08-21 10:47 評論0 收藏0
JavaScript的計時器的工作原理

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

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

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

sihai 2019-08-22 11:14 評論0 收藏0
JavaScript 與異步編程

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

YFan 2019-08-21 16:40 評論0 收藏0