js实用的十个小技巧

ou
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

avatar
文章
阅读
粉丝