我的个人博客:http://www.xiaolongwu.cn

在平时的开发中,编码技巧很重要,会让你少写很多代码,起到事倍功半的效果。

下面总结几种简单的技巧,大家共同学习一下

1、 利用+、-、/1,*1将字符串转换为整数型

这个方法试用于将字符串类型的数字转换为整数型,如果带字母就会返回NaN。

var a = "1234", b = "leonWuv";
//我们想把a转换为1234的整数型,一般方法
console.log(typeof Number(a)) //number
//简单写法
console.log(+a + 1,typeof +a); //1235 number
console.log(a - 0 + 1,typeof (a-0)); //1235 number
console.log(a*1 + 1,typeof (a*1)); //1235 number
console.log(a/1 + 1,typeof (a/1)); //1235 number
console.log(b/1 + 1,typeof (b/1)); //NaN number

这个也是用于 Date();它将返回时间戳

//以下方法都返回时间戳
console.log(+ new Date()); //1512378253218 2017年12月04日17时左右;
console.log(Date.parse(new Date())); //1512378253000 注意后三位向下取整为000;
console.log(new Date("2017/1/1").getTime()); ////1483200000000

2、利用!!强制转换布尔值

我们需要验证一个变量是否存在或者有效时,可以使用!!来简单快速的判断

这个技巧我在 javaScript数据类型你都弄明白了吗?绝对干货这篇博文中的第四部分提到过

总结一下就是:只要变量的值为:0、null、" "、undefined或者NaN都将返回的是false,反之返回的是true。看下面例子

var a = 0,b = "12";
console.log(!!c); //false
// 分解上面的代码--Boolean(c)得false,取非为true,再取非为false。
console.log(!!d) //true
// 分解上面的代码--Boolean(d)true,取非为false,再取非为true

3、在遍历数组时,缓存数组的length

在处理一个数组循环时,我们好多人通常会这么写

for(var i = 0; i < array.length; i++) {
console.log(array[i]);
}

当我们遍历一个小型数组时,这样写是可以的,但是当我们处理一个大型数组时,这样写就会每次循环都计算数组的长度,会有延误,这时我们可以这样写

var length = array.length;
for(var i = 0; i < length; i++) {
console.log(array[i]);
}

当然我们也可以这样写,这两种方式都是可以的

for(var i = 0, length = array.length; i < length; i++) {
console.log(array[i]);
}

4、合理利用&&运算符

看看这段代码

if(a){
console.log("hello leonWu");
//解释一下这段代码,如果Boolean(a)为true,就打印出hello leonWu
}

我们稍微修改一下上面的代码

a && console.log("hello leonWu"); //结果是一样的,但是这样是不是简单清晰多了,代码量也少了

相关链接:js编码的实用技巧(二)

未完待续。。。。

github资源地址:https://github.com/js编码的实用技巧(一).md

我的个人博客:http://www.xiaolongwu.cn

csdn博客地址:https://blog.csdn.net/wxl1555

如果您对我的博客内容有疑惑或质疑的地方,请在下方评论区留言,或邮件给我,共同学习进步。

邮箱:wuxiaolong802@163.com

js基础进阶--编的实用技巧(一)的更多相关文章

  1. js基础进阶--关于setTimeout的思考

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 先热身 看看下面的额代码会打印出什么? for (var i = 0; i < 5; i++) { setTimeout( ...

  2. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  3. js基础进阶--编码实用技巧(二)

    我的个人博客:http://www.xiaolongwu.cn 接上篇文章 js编码的实用技巧(一) 5.合理利用||运算符 使用||可以作为参数之外的默认值,当第一个参数返回值为false时,那么第 ...

  4. js基础进阶--关于Array.prototype.slice.call(arguments) 的思考

    欢迎访问我的个人博客:http://www.xiaolongwu.cn Array.prototype.slice.call(arguments)的作用为:强制转化arguments为数组格式,一般出 ...

  5. JS基础_Unicode编码表

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题(二)-callback,promise,generator,async-await JS的进阶技巧 前端面试送命题(一)-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制

    [原创]分布式之数据库和缓存双写一致性方案解析(三)   正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...

  7. VUE基础实用技巧

    Vue以前听说过,有了解过一点.当时还在热衷于原生JavaScript去写一些方法的封装,不是为啥,就感觉这样很帅,后面多多少少接触了一些JQuery的用法,到现在为止,JavaScript原生封装的 ...

  8. 【JavaScript实用技巧(二)】Js操作DOM(由问题引发的文章改版,新人大佬都可)

    [JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...

  9. 网站开发进阶(十五)JS基础知识充电站

    JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...

随机推荐

  1. Linux进程状态解析之R、S、D、T、Z、X

    文章转载自:http://hi.baidu.com/shining_pc/item/21abcb32a4d2d484c3cf2950 Linux是一个多用户,多任务的系统,可以同时运行多个用户的多个程 ...

  2. 【代码管理】GitHub超详细图文攻略 - Git客户端下载安装 GitHub提交修改源码工作流程 Git分支 标签 过滤 Git版本工作流

    GitHub操作总结 : 总结看不明白就看下面的详细讲解. . 作者 :万境绝尘  转载请注明出处 : http://blog.csdn.net/shulianghan/article/details ...

  3. 【算法编程】基于Miller-Rabin的大素数测试

    基本原理: 费尔马小定理:如果p是一个素数,且0<a<p,则a^(p-1)%p=1.        利用费尔马小定理,对于给定的整数n,可以设计素数判定算法,通过计算d=a^(n-1)%n ...

  4. windows linux—unix 跨平台通信集成控制系统----文件搜索

    跨平台的网络通信,跟设备的集成控制,牵扯到在各种平台下的文件搜索问题,windows下面的已经有了. 地址如下: http://blog.csdn.net/wangyaninglm/article/d ...

  5. OAF更改动态头行

    选择头信息,动态刷新行信息.本文将详细介绍该种需求的做法. 本例沿用<OAF-头行结构>的am与vo,所以在进行本例之前,请先完成<OAF-头行结构> 一.创建页面 在test ...

  6. Android Studio Gradle 多渠道自动打包,动态修改HostUrl,签名apk,混淆配置详解

    文/ skay csdn博客:http://blog.csdn.net/sk719887916/article/details/40541163 最近遇到项目从Eclispe迁移到Android st ...

  7. 两种方法 更改 EBS R12界面LOGO以及内容

    from:metalink more: Note 174219.1 - How To Change The Logo In The Oracle Application Menu Note 84975 ...

  8. myeclipse10破解

    原本一直使用eclipse,但是写起web还是不太方便,由于idea使用不太顺手不太爱用.原来一直不能破解,今天迫不得已又拿起myeclipse仔细搞一番.下面是遇到的问题的总结. 不成功原因一:.原 ...

  9. webpack 4.x 遇到的错误

    由于之前重装电脑,很多之前的小Demo 现在都跑不起来.特别是webpack一直在报错. webpack 安装node 全局安装webpack,webpack-cli(一定要全局安装) 项目初始化 w ...

  10. dom4j 解析 xml标签属性

    重写onEnd()和onStart()方法 public class XmlElementHandler implements ElementHandler { @Override public vo ...