摘要：而用来声明一些根据判断条件会发生变化的变量。函数中尽量避免的嵌套是十分常见的一种逻辑。仅对原数组进行一次遍历。当然，使用专门的请求库也是很好的选择。以上总结仅仅是个人对于工作中的一些细节上的经验之谈。
不知不觉，正式工作马上两年了，待了两家公司，做过的项目也不少了，总结一下自己在写代码上的经验累积。1. 确定变量的类型
JS是弱类型语言，类型检查不严格。在判断两个变量是否相等的时候，使用==会进行隐式的类型转换。比如：
["a"] == "a"; // true; 1 == "1"; // true;
在前端项目日益复杂的今天，早已不再是后端吐出数据，前端直接展示就行了。一些计算是需要放在前端进行的。前端要进行计算，那么变量的类型在整个过程中，就必须是明确的。不然很容易出一些bug。举个最简单的例子，
var a = "0.1";
var b;
if(a == 0.1) {
b = a.toFixed(3); // 出错，因为字符串没有toFixed方法。
}
声明一个变量的时候，首先明确这个变量的类型，用const 进行声明。这样后续写代码过程中，能够清晰的知道这个变量的类型，避免对变量进行不合法的操作或者一不小心对变量进行了修改，出现bug。并且，一开始使用const声明变量，后续review代码时，思路能稍微清晰一点(这个变量就是用来干这个事情的，它是不会改变的)。而let用来声明一些根据判断条件会发生变化的变量。
使用const来声明变量后，那用什么来声明常量，并且可以避免和const声明的变量混淆呢？可以采用大写变量名来声明常量。比如圆周率
const PI =3.1415926535;
在代码中，看到名字大写的变量是，我就知道了，这是一个全局的常量。
2. 多使用纯函数纯函数，就是不会产生副作用的函数。举一个例子，
const fn = arr => { // 非纯函数
arr.push(1);
}
const pureFn = arr => { // 纯函数
return [].slice.call(arr).push(1);
}
const oldArr = [2,3];
fn(oldArr); // fn修改了原数组，不纯
const newArr = pureFn(oldArr); // pureFn返回了一个新数组，没有修改原数组。
使用纯函数的好处是，函数的输出仅仅依赖输入，不会受外部条件影响，并且不会影响到外部的环境。调试代码时，可以以函数为单位来验证、测试。
像上面的例子，我们在函数fn中修改了oldArr, 如果我们在另外一个地方又需要操作oldArr的时候, 我们能100%的保证知道这个oldArr已经被修改过了嘛？当业务逻辑变得复杂的时候，我们很容易就忽略了这个问题，导致出现莫名其妙的bug。而纯函数就不会有这种问题，我们只需要关注其输入和输出就行。
再考虑一种情况，在使用vue或者react进行开发的时候，经常会遇到我明明更新了这个数组，可是页面没有重新渲染的问题。这是因为，vue和react在进行数据的diff时，对于数组(引用数据类型)，都没有采用深比较。如果我仅仅只改变了数组中的一个元素时，数组其实并没有变化，vue和react发现没有diff，当然不会重新渲染。使用纯函数就不会有这个问题，因为每次都是返回一个全新的数组。
3. 函数中尽量避免if、else的嵌套if 、else是十分常见的一种逻辑。如果在代码中，出现了复杂的嵌套，会降低代码可读性，并且容易出错。比如下面的代码：
function fn (a,b,c){
if(a>1){
if(b === c){
return true;
} else {
return false;
}
} else {
return true;
}
}
以上代码可以改写为，避免了多层的嵌套，代码的可读性得到了增强。
function fn(a,b,c){
if(a <= 1) {
return true;
}
if(b === c){
return true;
}
return false;
}
同时，还可以多使用短路，减少if 、 else的使用
var b;
if(condition) {
b = 1;
}
// 可以改写成
var b;
condition && (b = 1);
4. 熟练使用数组的各种操作方法
Array.forEach、Array.map、Array.filter、Array.reduce等等，都是特别好用的数组操作方法，几乎可以满足各种的遍历需要了，比for循环来得优雅。
Array.forEach仅对原数组进行一次遍历。
Array.map对原数组进行遍历，返回一个新数组。
Array.filter对原数组进行过滤，同时返回一个新数组。
Array.reduce对原数组进行一次遍历，可以进行累加。
但其实for循环有一个以上方法都没有的优点，for循环可以随时中止数组的遍历，break一下就行。
可以根据不同场景采用不同的遍历方法。
5. 减少对jQuery、zepto的依赖，积累自己的小工具库如今写代码已经很少使用jQuery和zepto了。jQuery和zepto确实给我们带来了很大的方便，但很多时候，使用jQuery或者zepto只是为了使用选择器，发送请求，简单动画。选择器完全可以用querySelector等代替了，发送网络请求，不管是ajax或者jsonp，自己封装一个就行，没有必要为了这一个功能，引入一个完整的jQuery或zepto。当然，使用专门的http请求库也是很好的选择。简单动画使用css3就可以完成了，并不需要使用js操作DOM。
在业务中，一些经常使用的小的功能，比如获取dom元素距离页面顶部的高度，获取url中的参数，判断变量类型，函数防抖，函数节流等等，完全可以封装进自己的小工具库，在多个项目中使用。
写在最后工作时间还不够长，代码量也还不够，对于javascript的一些高级应用，编程技巧，各种设计模式在项目中的应用，项目的整体架构等还没有很深入的理解，react、vue等框架也只是会用而已，并没有很深入的研究。
以上总结仅仅是个人对于工作中的一些细节上的经验之谈。欢迎交流。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95853.html
摘要：性能访问字面量和局部变量的速度是最快的，访问数组和对象成员相对较慢变量标识符解析过程搜索执行环境的作用域链，查找同名标识符。建议将全局变量存储到局部变量，加快读写速度。优化建议将常用的跨作用域变量存储到局部变量，然后直接访问局部变量。 缺陷 这本书是2010年出版的，这本书谈性能是有时效性的，现在马上就2018年了，这几年前端发展的速度是飞快的，书里面还有一些内容考虑IE6、7、8的东...
摘要：高性能小结文章转载于我的博客最近看完了动物丛书的高性能，觉得那本书的小结部分写得非常不错，简洁轻快易懂概括性很强。由于局部变量存在于作用域链的起始位置，因此访问局部变量比访问跨作用域变量更快。 高性能javascript小结 文章转载于我的CSDN博客：http://blog.csdn.net/hello_world_20/article/details/46793317 最近看完了动...
摘要：参考链接面向对象编程模型现在的很多编程语言基本都具有面向对象的思想，比如等等，而面向对象的主要思想对象，类，继承，封装，多态比较容易理解，这里就不多多描述了。 前言 在我们的日常日发和学习生活中会常常遇到一些名词，比如 命令式编程模型，声明式编程模型，xxx语言是面向对象的等等，这个编程模型到处可见，但是始终搞不清是什么？什么语言又是什么编程模型，当你新接触一门语言的时候，有些问题是需...
摘要：最近在全力整理高性能的文档，并重新学习一遍，放在这里方便大家查看并找到自己需要的知识点。 最近在全力整理《高性能JavaScript》的文档，并重新学习一遍，放在这里方便大家查看并找到自己需要的知识点。 前端开发文档 高性能JavaScript 第1章：加载和执行 脚本位置 阻止脚本 无阻塞的脚本 延迟的脚本 动态脚本元素 XMLHTTPRequest脚本注入 推荐的无阻塞模式...
阅读 2116·2021-11-12 10:36
阅读 2121·2021-09-03 10:41
阅读 2727·2021-08-19 10:57
阅读 1212·2021-08-17 10:14
阅读 1467·2019-08-30 15:53
阅读 1192·2019-08-30 15:43
阅读 958·2019-08-30 13:16
阅读 2944·2019-08-29 16:56
