js实用的十个小技巧

8,926 阅读6分钟

前言

每一门语言都有一些奇技淫巧,JS也不例外,一直想总结这么篇文章,我包括一些新手,都会有这么一个疑问,每次面对一张空白的页面,不知从何下手,没有思路,高手有的是设计模式,但是在这里讲一些设计模式,我可能不够格,这些书籍都有可以自己去翻阅,我能给的就是,总结我写代码的时候,会优化的一些技巧

实用篇

1.立即执行

我为什么把立即执行放在第一个,因为一般做业务的时候都会有一个入口函数,比如一下这种格式

function init(){
    //...
}
init()

我一开始也跟上面这样写,但是后来看了《你所不知道的javaScript》,我是这么写的

(function init(){
    //...
})()

立即执行的好处:
作用域隔离,因为init这个函数名是没有必要在全局作用域中展示的

2.常量解耦

这个技巧我在业务中也是经常使用的,没学会之前是这么写的

function(){
    console.log(12345678901)
}

但是学会之后,是这样的

const TEL = 12345678901
function(){
    console.log(TEL)
}

可能这里有人会问,你这不是多此一举,而且还添加了一个全局常量,但是事实是这样的,好处如下:

  • 当多处引用这个常量的时候,当你修改的时候,只要修改一处代码即可
  • 这样写出来的代码更具语义话,举个例子,有些请求回调中ERROR常量一般为1,摆在那别人很难看懂

3.递归的解耦

这个方法在红宝书中有写到,我不知道常不常用,如有错误,请纠正我,因为我递归一直在用,面试写算法题也在用,没学会之前的写法

function a(){
    //...
    a();
}

学会之后,我的递归一般是这么写的

function a(){
    //...
    argument.callee();
}

解耦的好处:
修改函数名即可,不影响里面的代码
补充:
评论里指出的很正确,在严格模式下不能使用,我去mdn的官网翻了api文档,贴图如下:

4.整数的转换之加法篇

你可能以前看到过parseInt和parseFloat这两个方法来转换成number类型的整数型和浮点型,其实,一开始我也是用这么笨的方法的,为什么说笨呢,举个例子

let str = '123'
console.log(typeof parseInt(str));    //number

接下来是加号操作符

let str = '123'
console.log(typeof +str);    //number

好处就不多说了吧,你打字打得累死,不如加号来的快,而且加号实现方式还优雅

5.短路操作

没学会这个方法之前我的代码是这样的:

if(!foo){
   foo = bar
}

但是我学会短路操作之后的是这样的:

foo = foo || bar

好处:

  1. 代码量减少
  2. 书写优雅

缺点:
代码可读性降低

短路原理:
在js中&&和||这两个操作符有一个特性,比如&&前后有两个表达式,前者为false,后者不会执行,||会反过来

补充:评论里面有人建议用!!代表true,用!代表false,这一点认可,这样操作是有好处的,!!代表强制转化成true,这样做的目的就是保证值只能在true/false中取,而非其它值。最近在看vue源码,细想一下,尤神也有对这点的应用

vue源码
vue源码

6.条件表达式

条件表达式或许在每门语言中都会用到,你没学会之前你会这么写

if(a === true){
   b = c;
}else{
    b = d;
}

但是你学会之后,你会这么写

let b = a ? c : d

好处:
1.减少代码量
2.代码优雅

缺点:
代码可读性降低

7.调试之alert

我没有实习之前不喜欢用alert的,现在也不怎么用,都是console.log,这样就可以在浏览器的控制台中看到页面数据的输出,但是h5不一样,h5有时候pc端没什么问题,但是手机端就是各种bug,想调试一个数据很麻烦,但是我们有个宝贝,alert这个东西在手机端调试比console.log棒的地方就是我们能看见我们的数据,他会以一个弹框的形式显示给我们

补充:关于这个调试,我说的确实不够详细,其实自己在实习过程中还用到插件,那是一个webpack的插件,和评论里说的那个一模一样,这个插件有很多好处,在手机端就像console控制台一样,可以看报错,但是我翻了我们项目的源码,贴图如下:

vconsole
vconsole

8.优雅的向下取整

向下取整有很多种方式,做常用的,是调用Math的方法,如下图的例子

let num = 1.23
let num1 = Math.floor(num);
console.log(num1); //1

但是下面有一种更加优雅的方式

let num = 1.23
let num1 = num | 0;
console.log(num1)  // 1

这种方式更加简洁,这种方式的原理是来源于js的位运算,这边的 | 不是逻辑或,是按或运算

  • 注意点:
    • Math.floor(NaN)返回的是NaN,但是或零返回的是0;
    • Math.floor(Infinity)返回的是Infinity,但是或零返回的是0;

补充:评论中补充了一个~~也可以向下取整,确实更加优雅,推荐,关于这个原理有兴趣的朋友可以自己去看一下,~是取反操作符,我试了一下1.234取反是-2,在取反就是1,不过以上注意点变了

  • ~~NaN等于0,这个原理就是js会先调用Number,把NaN转化成false,false取反就是-1,在取反就是0。

9.单声明的形式

在编程中,最好养成一个习惯,一个函数的参数,声明在函数的顶部,然后用这个声明操作符来完成,例如:

let a = 0,
     b = 0,
     c = 0,
     d = 0;
  • 这样的好处有:
    • 变量名不散乱,比较容易寻找
    • 少代码量
    • 防止你声明变量的时候出错

10.绑定this

这个怎么解释呢?其实es6箭头函数已经解决了,我也当一个技巧跟大家絮叨絮叨,我们在设计整个js代码怎么书写的时候,常常会把一块功能相同的代码放到一块,看看下面的例子,你就懂了

function bindEvent(){
    let _this = this;
    function a () {
        //可以在a中使用_this;
    }
    function b () {
        //可以在b中使用_this;
    }
}
  • 总结:
    上面很多技巧,我平时也在用,如果有错,请你们纠正,如果有受益,麻烦点个👍,谢谢。

备注:
真知源于实践,此篇文档纯原创,要转载请注明出处,喜欢的点个star,github