js 中的一些小技巧

  1. js 数字操作:
    1.1 取整:
    取整有很多方法如:

    parseInt(a,10);
    Math.floor(a);
    a>>0;
    ~~a;
    a|0; 

    前面2种是经常用到的,后面3中算是比较偏的,因为其有不足之处,比如将下面代码放到 console 里测试:

    var num = 2150000000;
    console.log(num|0);
    console.log(parseFloat(num))

    你会发现问题;
    输出的是:

    -2144967296
    2150000000

    其原因就在于js数字存储的方式,js的数值存储可以说是32位64位是透明的的,他的前31位是用来存数字,31位是存符号(表示正负),
    所以一次位操作,他最大的数字是 2^31 ,比它大的数字才会出现问题,所以才这个数字以下的操作大家都不用担心的;

    1.2 数字的加减:
    这个应该很多人都知道,如0.1+0.2,使用 console 计算的结果并不是你们想象的0.3,而是0.30000000000000004;
    原因嘛,是因为js 是基于 IEEE754 数值的计算,所有使用的都会有这毛病,比如早期的 Java;
    而我们进行加减运行时,可以对其小数点进行控制,来省略不必要的小数;

  2. 逻辑运算符:
    2.1 在我之前学习的时候,只说明了这样的情况

    //||或:
    var bar = foo||apple;
     //约等于
    if(foo){
       bar = foo;
    }else{
       bar = apple;
    }
    
    //而&&且:
    var bar = foo&&apple;
    if(foo){
      bar = apple;
    }else{
      bar = foo;
    }

    我想大家看到这个也许知道了是怎么回事,但是却不知道应用的场景吧;
    ||(或),一般用来创建值得默认值,比如var foo = bar || 1;,这样可以联系上面,当 bar 没有值得时候 foo = 1;

    而&&(且)我觉得作用比或要大,因为他有短路的功能,举个例子:

    var data = {
       msg:{
         foo:1
      }
    }
    var bar = data.msg && data.msg.foo;

    这里使用且可以用来判断 foo 的前置 msg 是否存在,如果不存在就直接返回 undefined,
    并且不会报错,而单独使用 data.msg.foo 时,若 msg 不存在,则会出现 Cannot read property ‘foo‘ of undefined 的报错,
    这个在日常工作共较为重要;

    而另外一个例子:

    var isRun = true;
    function foo(callback){
       callback&&callback();
       //或者:
       isRun&&callback();
    }

    在函数中判断是否有回调函数或者设置值是否为TRUE,若TRUE则执行;

  3. 替换 else if:
    这个问题也是老生常谈了,我就简单的说下;
    3.1 使用 switch 替换:
    相信不用我多说了,不过有一点,在 case 里要使用 break 或 return,不然会出现一个问题:

    var a = 1;
    
    switch(true){
        case a<2:
            console.log(1);
        case a<3:
            console.log(2);
    }

    运行后可以看到,输出了1,2 那么是 a<2 且 a<3 了吗? 其实并不是:

    var a = 1;
    
    switch(true){
        case a<2:
            console.log(1);
        case a<1:
            console.log(2);
    }

    将 a<3 替换为 a<1,运行后,仍然是输出1,2 这可以说明 a<1 并没有被判断;
    这个地方需要被注意,很多错误都会因此而引发;

    3.2 使用对象替换:

    function check(foo){
       return {
         1:'warnging',
         2:'success',
         3:'error'
       }[foo]
    }

    可以用对象的方法来替换if,并且也可以通过或(且)加入默认值:

    function type(foo){
       return {
         1:'warning',
         2:'success',
         3:'error'
       }[foo]|| 'default'
    }

    对比一下,比 if else 方便,简洁了很多;
    也许有人会说逻辑运算符也能代替,但是不忘忘记了代码的可读行,像var a = bar && bar || (baz && qux) 这样的代码,可读性太差了;

    要记得代码的可读性,可维护性是和他的性能同样重要的;

原文地址:https://www.cnblogs.com/Grewer/p/8457444.html

时间: 2024-10-11 07:31:19

js 中的一些小技巧的相关文章

js中的换算小技巧

之前自己一直使用~~运算符来把‘112222’字符型的数值换算成整型的数值 但今天调试程序发现了一些问题 ~~'999'=>999 ~~'111111999'=>111111999 这些都是正常的 但 ~~'1111119998888000'=>-925489088 就不正常了 所以大数值的换算还是使用‘+’运算符吧 +'1111119998888000'=>1111119998888000

javascrip中的confirm小技巧

jsp页面中的一个标签: <a href="javascript:void(0)" onclick="confirmDelete('<%=request.getContextPath() %>/master/sysUser_deleteUserById.action?sysUserId=${each.sysUserId }');">删除</a> javascript中的confirm函数: <script>   fun

Matlab中的一些小技巧

Matlab中的一些小技巧 1.. Ctrl+C 中断正在执行的操作 如果程序不小心进入死循环,或者计算时间太长,可以在命令窗口中使用Ctrl+c来中断.MATLAB这时可能正疲于应付,响应会有些滞后. 2. figure命令新建一个绘图窗口 figure 可以打开一个空的绘图窗口,接下的绘图命令可以将图画在它里面,而不会覆盖以前的绘图窗口.当有多个figure窗口时,在命令窗口中执行如Plot等命令将覆盖当前figure窗口中的对象.所谓的当前figure窗口,也就是最后一次查看的窗口(可以用

ssh框架中.xml文件小技巧分离xml

struts.xml文件 struts.xml文件里的action可以分离出来,如: <!-- 预警信息监测 --> <include file="config/struts/warningInformAtion-struts.xml"></include> 注: include是放在</struts>标签的前面 在src下面新建 package 名为:config.struts,再新建xml文件为warningInformAtion-s

request.getAttribute在 jsp:include 中的应用(小技巧)

在这样的一个场景中 a.jsp 中使用 jsp:include在多处引入了 b.jsp,但是在b.jsp中有一部分只需要执行一次(引入一次):那么这个时候就可以使用 request.setAttribute来完成 在a.jsp中有这样一段代码 <% System.out.println(request.getAttribute("TOP_AD_LOADED")); %> <jsp:include page="b.jsp"> <jsp:p

运算符中的一些小技巧

- 记下一些关于运算符的小技巧或容易出错的地方 %运算符 取余运算符运算结果的正负号由第一个运算子的正负号决定,比如: 1 -1 % 2 // -1 2 1 % -2 // 1 所以有时候对负数取余会出现错误,使用绝对值函数可以避免错误: // 会出错 function isOdd(n) { return n % 2 === 1; } isOdd(-5) // false isOdd(-4) // false // 正确了 function isOdd(n) { return Math.abs(

前端js调试的一些小技巧

===前言=== 此文根据本人长期js开发以及团队协作中遇到的一些问题的汇总.本文强调调试技巧,具体的代码逻辑实现本文不做深入讲解.本文所有场景均使用chrome作为开发浏览器. 掌握这些小技巧能有效的提高你的工作效率或降低低级错误出现的的几率.任何读者如果发现本文的任何错误请及时指出,也可以通过评论进行问题补充. ===场景=== A.表单提交 许多前端习惯按照以下流程编写表单程序. 1.编写html. 2.绑定form的submit事件,验证各表单项. 3.表单验证成功则提交表单,失败则提示

iOS开发中的那些小技巧

一,前言 看到这个图,你会想起谁?是不是想起了,曾经的用户名输入框,密码输入框... 那么,问题来了:作为iOS开发的你,这个输入框你是怎么实现的,成为关键. 二,方案 方案1:弄一个UIView,在这个视图上分别放三个控件:UIImageView,UILabel与UITextField.(这个方案很直接,如果你只是简单的直接将三个控件放到视图上,那么你的月薪暴露了,最多3K.如果你是对这个视图重写了,将那三个控件封装起来了,放在.h文件,那你的月薪应该是3.5K,如果是将那三个控件放到.m文件

RS开发中的一些小技巧[不定期更新]

从9月份一直忙到了现在,项目整体的改版工作也完成了十有八九了,有些事情只有你自己真正的做了,你才能明白:哦,原来还可以这个样子,这样做真的好了很多呢,接下来我就分享一些最近遇到的RS开发的一些小技巧,都是些基本的东西,已掌握的可以来温习一下,没掌握的希望可以帮到大家 一:UI设计 1.1:配色 可以利用字体颜色.背景颜色.图片等来补充RS常规报表以及单个数据项的单调感,例如下面通过图片以及字体颜色调整过的报表的效果 1.2:布局 布局大家都知道使用table了,提前像设计HTML的页面一样规划好