我的个人博客: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. Zookeeper介绍 Zookeeper搭建 Zookeeper集群搭建

    关键字:分布式 背景         随着互联网技术的高速发展,企业对计算机系统的技术.存储能力要求越来越高,最简单的证明就是出现了一些诸如:高并发.海量存储这样的词汇.在这样的背景 下,单纯依靠少量 ...

  2. Rust语言之HelloWorld Web版

    Rust语言之HelloWorld Web版 下面这篇文章值得仔细研读: http://arthurtw.github.io/2014/12/21/rust-anti-sloppy-programmi ...

  3. (C++)string类杂记

    本文特记录C++中string类(注意string是一个类)的一些值得注意的地方. string类的实例是以‘\0'结束的吗? 这个问题有时还真容易混淆,因为我们可能会将 C++ 语言中的string ...

  4. 线性表的顺序存储设计和实现 - API函数实现

    基本概念 设计与实现 插入元素算法 判断线性表是否合法 判断插入位置是否合法 把最后一个元素到插入位置的元素后移一个位置 将新元素插入 线性表长度加1 获取元素操作 判断线性表是否合法 判断位置是否合 ...

  5. Jumpstart for Oracle Service Bus Development

    http://www.oracle.com/technetwork/articles/jumpstart-for-osb-development-page--097357.html Tutorial ...

  6. Java进阶(十四)实现每天定时对数据库的操作

    Java实现每天定时对数据库操作 现在有一个很棘手的问题:客户要求实现一个功能,就是每日凌晨自动计算慢性病订单是否有需要在今日提醒的,如果有则生成一条提醒记录到lm_notice之中. 如何在Web工 ...

  7. 如何修改SpriteBuilder中的按钮禁用启用状态

    按钮的禁用状态和按钮的User Interaction Enabled属性并不相符. 后者设定的是按钮是否参与用户交互. 你不能直接在SpriteBuilder中编译按钮的禁用启用属性.除非你想给按钮 ...

  8. 史上最全Android Studio快捷键 -2016-02-28

  9. CMake添加-D_DEBUG宏

    Linux下Debug版不会自动添加 _DEBUG宏,只有NDEBUG宏可用. cmake ../src _DCMAKE_BUILD_TYPE=Debug -D_DEBUG 会报错: -D_DEBUG ...

  10. IOS动画(Core Animation)总结 (参考多方文章)

    一.简介 iOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide. Core Animation是IOS和OS X平台上负责图形渲染与动画的 ...