我的个人博客: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. python 去掉 pyc

    python 去掉 .pyc 在开发的机器上(Ubuntu),python自动生成的pyc文件太影响心情,把下面的语句添加到 /etc/profile中: # do not produce .pyc ...

  2. Flash Media Live Encoder 使用帮助

    翻译了一下Flash Media Live Encoder的帮助内容. Flash Media Live Encoder包含两个工具: Flash Media Live Encoder GUI(图 ...

  3. Swift基础之UIImageView(都是2.2版本)

    //设置全局变量,将下面的替换即可     //var myImgView = UIImageView();     //系统生成的viewDidLoad()方法     override func ...

  4. Leetcode_49_Anagrams

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42744709 Given an array of stri ...

  5. Android官方技术文档翻译——Eclilpse项目迁移

    本文译自Android官方技术文档<Migrating From Eclipse Projects>,原文地址:http://tools.android.com/tech-docs/new ...

  6. Leetcode_144_Binary Tree Preorder Traversal

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42876699 Given a binary tree, r ...

  7. 利用JQuery直接调用asp.net后台方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod]   命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod] ...

  8. 嵌入式C开发---用循环实现左移右移

    //将n左移m位 int byte_to_left_move(int n , int m) { int i , ret = 1 ; if(n == 0 || n < 0) { return ; ...

  9. "《算法导论》之‘图’":最小生成树(无向图)

    本文主要参考自<算法>. 加权图是一种为每条边关联一个权值或是成本的图模型.这种图能够自然地表示许多应用.在一幅航空图中,边表示航线,权值则可以表示距离或是费用.在一幅电路图中,边表示导线 ...

  10. PS 滤镜——极坐标变换到平面坐标

    %%% 极坐标到平面坐标 clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorith ...