简化一段javascript代码

在实际的项目中,我们经常会有如下的需求:
从一个map中获取某key的值,如果发现对应的key的值为null,则为该key创建一个值(一般为初始值),然后把这个值存回到map中,代码如下:

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

但是总感觉这段代码很恶心,为啥,太啰嗦,太长。 实际项目中,这种操作会技巧多,如果到处都是这种操作的话,就很让人崩溃。坏蛋必须死。
##赋值操作合并
首先,value = "" 和 map[key] = value这两行没必要写成两行,都是赋值,应此可以这样优化:

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]  ||  ""

##总结
这个问题并不难,拿这个问题问小伙伴,一些人也可以给出正确答案。但平时没有谁这样去主动思考。

欢迎关注公众号:

原文地址:http://blog.51cto.com/13842424/2135458

时间: 2024-10-12 08:23:07

简化一段javascript代码的相关文章

因一段JavaScript代码引发的闲扯

前两天,一朋友给我发了一段JavaScript代码: function f1(){ var n=999; nAdd=function(){ n+=1 }; function f2(){ alert(n); } return f2; } var result1=f1(); var result2=f1(); result1(); // 999 result2();//999 nAdd(); result1(); // 是999而不是1000,这是为何呢? result2();//1000 问题的原

[javascript]两段 javaScript 代码的逻辑比较

两段 javaScript 代码的逻辑比较: #1 if(tagName.length < 3){    $(this).parent().addClass('active');    tagName.push($(this).text());    tagId.push($(this).attr('label-id')); } else {    Hnb.ui.showError("最多只能选择三个标签");} #2 if(tagName.length > 3){    

30 段 JavaScript 代码

1. 前端人员经常遇到的问题就是如何区分IE及非IE浏览器,JavaScript代码是: if(!+[1,]) { //IE11不支持 alert('这是IE浏览器'); }else{ alert('这不是IE浏览器'); } 2. 将日期直接转换为数值: alert(+new Date()); 3. 非IE浏览器下将类数组对象 "arguments" 转换为数组: Array.prototype.slice.call(arguments); arguments不是Array的实例,因

JavaScript代码段整理笔记系列(二)

上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey; //检测Alt event.ctrlKey; //检测Ctrl 17.获取屏幕分辨率的宽.高: window.screen.height; //获取屏幕的高 window.screen.width; //获取屏幕的宽 18.脚本永不出错的方式: window.onerror=function(m

前端福利!10个短小却超实用的JavaScript 代码段

JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高 性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaScript的身影.JavaScript正在逐渐进化为一门全能的开发语言.下面是我收集 的10段实用JavaScript代码,基于它们你还可以创造出更强大的JS插件或功能函数. 但用好JavaScript并不容易,你除了需要掌握它的语法并知道如何写出高质量的代码之外,还需要了解如何解决那些几乎在每个项

这几行 javascript 代码能让你的浏览器崩溃?

先上Demo,有兴趣的可以先试一下: http://www.zeakhold.com/crash/ (温馨提示:访问前请保存好浏览器其他窗口的任务,整人被打概不负责嘿嘿~) 事情还是得从 IT Security Tweets ™   的一篇推文说起: 也就是说,这段 javascript 代码,能让浏览器崩溃并且能让iPhone重启?! 于是打开电脑跃跃欲试,当满怀好奇地在浏览器上执行了这段代码后发现: Chrome 立马陷入了卡死的状态,更要命的是点击关闭窗口没响应!! 打开任务管理器,发现C

JavaScript代码放在HTML代码不同位置的差别

通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一定影响,具体如下所述. 1.放置于<head></head>之间 将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法.由于 HTML 文档是由浏览器从上到下依次载入的,将 JavaScript 代码放置于

在HTML标签&lt;a/&gt;中调用javascript代码

<a/>标签的“href”属性可以是一个有效的URL,表示跳转的目的地,除此之外,href还可以是一段javascript代码.当为“href”设置javascript代码时,格式如下:<a href=”javascript:……;” />.当点击这种形式的超链接时,浏览器将执行“href”中设置的javascript代码.需要注意的是,如果代码执行之后的返回值是一个有效值(除“undefined”之外的值)的话,当前页面的内容将会被返回值替换! W3C标准不推荐使用这种方法来调用

分析JavaScript代码应该放在HTML代码哪个位置比较好

本文总结了多种放置JS代码的方法,需要的朋友可以参考下 在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一定影响,具体如下所述. 放置于<head></head>之间 将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常