JavaScript中的一些小技巧
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位是用来存数字,32位是存符号(表示正负),
所以一次位操作,他最大的数字是 2^31 ,比它大的数字才会出现问题,所以才这个数字以下的操作大家都不用担心的;1.2 数字的加减:
这个应该很多人都知道,如0.1+0.2
,使用 console 计算的结果并不是你们想象的0.3,而是0.30000000000000004;
原因嘛,是因为js 是基于 IEEE754 数值的计算,所有使用的都会有这毛病,比如早期的 Java;
而我们进行加减运行时,可以对其小数点进行控制,来省略不必要的小数;逻辑运算符:
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则执行;
2.2 一种偏门用法:
如果对于某个input需要验证的话,那么可以使用","来进行分割判断var input = '',err = ''
if(input || (err='请输入内容'),input.length>10 && (err = '长度过长'),err){
console.log(err)
}简单的说下,关于逗号运算符:
在有逗号的情况下,只需要看逗号后面的代码返回是什么就行了,前面的代码只是执行,并不会去影响if的判断
上述代码等于:var input = '',err = '';
if(!input){
err = '请输入内容'
}
if(input.length>10){
err = '长度过长'
}
if(err){
console.log(err)
}替换 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 方便,简洁了很多;
如果 foo 是一个从0开始的数字那么使用数组也是一个好的选择:function type(foo){
return ['warning','success','error'][foo]|| 'default'
}也许有人会说逻辑运算符也能代替,但是不要忘记了代码的可读性,像
var a = bar && foo || (baz && qux)
这样的代码,可读性太差了;要记得代码的可读性,可维护性是和他的性能同样重要的;
JavaScript中的一些小技巧的更多相关文章
- ACM 做题过程中的一些小技巧。
ACM做题过程中的一些小技巧. 1.一般用C语言节约空间,要用C++库函数或STL时才用C++; cout.cin和printf.scanf最好不要混用. 2.有时候int型不够用,可以用long l ...
- C语言中的调试小技巧
C语言中的调试小技巧 经常看到有人介绍一些IDE或者像gdb这样的调试器的很高级的调试功能,也听人说过有些牛人做工程的时候就用printf来调试,不用特殊的调试器.特别是在代码经过编译器一些比较复杂的 ...
- jquery获取json对象中的key小技巧
jquery获取json对象中的key小技巧 比如有一个json var json = {"name" : "Tom", "age" : 1 ...
- ES6中常用的小技巧,用了事半功倍哦
ES6中常用的小技巧,如果能在实际项目中能使用到,必定事半功倍: 1. 强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数. 在下面的例子中,我们写了 ...
- C#中使用swagger小技巧
C#中使用swagger小技巧 swaggerUI显示的接口内容主要用于开发阶段便于与前端联调,不适合发布到对外的站点. 有以下两种方式,让接口不显示在SwaggerUI中 1.使用属性 [ApiEx ...
- 前端网络、JavaScript优化以及开发小技巧
一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...
- JavaScript使用中的一些小技巧
任何一门技术在实际中都会有一些属于自己的小技巧.同样的,在使用JavaScript时也有一些自己的小技巧,只不过很多时候有可能容易被大家忽略.而在互联网上,时不时的有很多同行朋友会总结(或收集)一些这 ...
- JavaScript的取值小技巧之“中括号[]取值法”
一.简介 做下记录,今天看了一篇很有意思的文章,学到了这个取值的小技巧 正常的话我们一般都是用对象直接去'.'对应的属性名(也就是键值对的键)来获取对应的值 这里记录的是另一种取值方式,他是采用中括号 ...
- javascript的几个小技巧
1.在循环中缓存array.length 这个技巧很简单,这个在处理一个很大的数组循环时,对性能影响将是非常大的.基本上,大家都会写一个这样的同步迭代的数组. for(var i=0;i<arr ...
随机推荐
- vue数据已渲染成 但还是报错 变量 undefined
问题:页面上的数据已渲染出来,但是控制台还是报错变量未undefined,主要是当页面加载完成后,数据并未加载完,所以会报次错误. 解决办法:在数据渲染的主节点(最外层的div)添加 v-if=“da ...
- docker 镜像导入导出[转]
0)查看镜像id sudo docker images REPOSITORY TAG IMAGE ID CREATED SIZE quay.io/calico/node v1.0.1 c70511a4 ...
- 从内存的角度观察 堆、栈、全局区(静态区)(static)、文字常量区、程序代码区
之前写了一篇堆栈的,这里再补充下内存其他的区域 1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈. 2.堆区(heap) — 一般由程 ...
- 记录:Web无引用无配置方式动态调用WCF服务
这几年一直用WebApi较多,最近项目中有个需求比较适合使用WCF,以前也用过JQuery直接调用Wcf的,但是说实话真的忘了… 所以这次解决完还是花几分钟记录一下 WCF服务端:宿主在现有Win服务 ...
- Markdown初步使用
一.兼容 HTML Markdown 的理念是,能让文档更容易读.写和随意改.HTML 是一种发布的格式,Markdown 是一种书写的格式.就这样,Markdown 的格式语法只涵盖纯文本可以涵盖的 ...
- JFreeChart API 说明(转)
原地址 http://blog.csdn.net/mike_caoyong/article/details/7338160 JFreeChart目前是最好的java图形解决方案,基本能够解决目前的图形 ...
- 初学者手册-MyBatis踩坑记(org.apache.ibatis.binding.BindingException)
1.参数绑定失败 org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.binding.Bi ...
- 运维平台cmdb开发-day2
一 发送数据到api(Django的URL) 发送请求携带参数 requests.get(url='http://127.0.0.1:8000/api/asset/?k1=123') # <Qu ...
- ALSA声卡笔记4-----体验声卡
1 .配置内核支持UDA1341 (1)内核 解压内核并打上补丁 配置内核 platform 需要设置哪些配置项,先看一下platform,需要把S3c24xx-i2s.c文件配置上去,dma.c也要 ...
- 字体相关CSS属性介绍
font-family 字体系列. font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. 简单实例: bod ...