前言
每一门语言都有一些奇技淫巧,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
好处:
- 代码量减少
- 书写优雅
缺点:
代码可读性降低
短路原理:
在js中&&和||这两个操作符有一个特性,比如&&前后有两个表达式,前者为false,后者不会执行,||会反过来
补充:评论里面有人建议用!!代表true,用!代表false,这一点认可,这样操作是有好处的,!!代表强制转化成true,这样做的目的就是保证值只能在true/false中取,而非其它值。最近在看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控制台一样,可以看报错,但是我翻了我们项目的源码,贴图如下:
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