如何让你的JavaScript代码更优雅

时间 2020-06-15

原文原文链接

写了好多年的JavaScript代码，你的代码是否是能够更加优雅？下面整理了一些优化代码的建议，你们能够酌情作一下参考，但愿能给到你们一些帮助。html

1.推荐使用全等和不全等操做符

ECMAScript 提供两组操做符：相等和不相等（== 和 !=）——先转换再比较，全等和不全等（=== 和!==）——仅比较而不转换前端

除了在比较以前不转换操做数以外，全等和不全等操做符与相等和不相等操做符没有什么区别编程

以下所示：数组

var result1 = ("66" == 66);    //true，由于转换后相等 
var result2 = ("66" === 66);  //false，由于不一样的数据类型不相等
复制代码

要记住：null == undefined 会返回 true，由于它们是相似的值；但 null === undefined 会返回 false，由于它们是不一样类型的值。缓存

因为相等和不相等操做符存在类型转换问题，而为了保持代码中数据类型的完整性，推荐使用全等和不全等操做符。若是变量的类型是已经肯定了的，那么使用==是根本不必的；若是类型不肯定，应该手动作一下转换：bash

var code = "5";
if(parseInt(code) === 0){

}
复制代码

2.不建议修改变量所保存值的类型

变量是松散类型的，所谓松散类型就是能够用来保存任何类型的数据。换句话说，每一个变量仅仅是一个用于保存值的占位符而已;以下代码：dom

var message = "hi"; 
复制代码

像这样初始化变量并不会把它标记为字符串类型；初始化的过程就是给变量赋一个值那么简单。所以，能够在修改变量值的同时修改值的类型：编程语言

var message = "hi"; 
message = 100;         // 有效，但不推荐 
复制代码

这样给人的感受就过于随意了，且可读性太差，同时，js引擎在进行编译的时候也须要额外的耗时，不利于性能。推荐的方式是在初始化变量的时候给变量一个默认值：ide

var message = "hi",
    found = false,     
    age = 29
复制代码

3.避免延长做用域链

在两种状况下会发生做用域链的延长：函数

try-catch 语句的 catch 块；
with 语句

这两个语句都会在做用域链的前端添加一个变量对象。对 with 语句来讲，会将指定的对象添加到做用域链中。对 catch 语句来讲，会建立一个新的变量对象，其中包含的是被抛出的错误对象的声明。

咱们知道，标识符解析是沿着做用域链一级一级地搜索标识符的过程。搜索过程始终从做用域链的前端开始，而后逐级地向后回溯，直至找到标识符为止，所以做用域链越长，查找越慢。

4.缓存变量

好比数组长度：

for (let j = 0; j < area.geo.length; j++) {
     
 }
复制代码

应该写到一个变量里，避免每次循环都去查找这个对象且计算长度

let geoLength = area.geo.length
for (let j = 0; j < geoLength; j++) {
     
 }
复制代码

另外，缓存变量能够进行dom的优化：

let odiv=document.getElementById('content');
//接下来是一些操做dom的代码。。。
复制代码

这样避免了屡次去查找dom元素，能够提升代码效率。

5.关于if语句

大多数编程语言中为经常使用的一个语句就是 if 语句，这里提三点建议：

（1）始终使用代码块

业界广泛推崇的佳实践是始终使用代码块，即便要执行的只有一行代码。由于这样能够消除人们的误解，不然可能让人分不清在不一样条件下要执行哪些语句。

if (i > 25)    
alert("Greater than 25.");             // 单行语句 
else {     
alert("Less than or equal to 25.");    // 代码块中的语句 
} 
 
复制代码

（2）用三目运算符取代简单的 if-else

好比一个简单的函数：

lightBackground () {
      if(this.mode === 'dark'){
          return normal
      }else {
           return light
      }
    }
复制代码

用三目运算符来写就不会显得很臃肿，给人的感受很清晰

lightBackground () {
      return this.mode === 'dark' ? 'normal' : 'light'
    }
复制代码

原来的五行代码如今须要一行就OK了，代码的执行效率也比以前的要高。

（3）优化嵌套的条件语句

好比有大量的if-else语句：

if (index === 0) {
       fn0();
      } else if (index === 1) {
        fn1();
      } else if (index === 2) {
        fn2();
      } else if (index === 3) {
        fn3();
      }
复制代码

能够用switch语句来优化代码。从根本上讲，switch 语句就是为了让开发人员免于编写像上面这样的代码。

switch(index){
    case 0:
    fn0();
    break;
    case 1:
    fn(1);
    break;
    case 2:
    fn2();
    break;
    case 3:
    fn3();
    break;
    default:
    fn()
}
复制代码

或者使用对象的方法替代：

let idxObj = {
    0: fn0,
    1: fn1,
    2: fn2,
    3: fn3,
    4: fn
}
if(num in idxObj){
    idxObj[num]()
}
复制代码

6.巧用短路操做符

逻辑或和逻辑与的操做属于短路操做，即若是第一个操做数可以决定结果，那么就不会再对第二个操做数求值。

（1）咱们能够利用逻辑或的这一行为来避免为变量赋 null 或 undefined 值。

例如：

const hmsr = this.$route.query.hmsr || query.hmsr || ''
复制代码

ECMAScript程序的赋值语句常常会使用这种模式。

(2)逻辑与能够避免调用undefined的属性时报错

watch: {
    carList (to) {
      this.swiper && this.swiper.slideTo(0)
    },
  },
复制代码

7.函数的优化

在JavaScript开发中，大多时候都离不开函数，关于函数，提如下几点建议：

（1）函数的命名

函数名应该以动词开始，如 getName()。返回布尔类型值的函数通常以 is 开头，如 isEnable()。

（2）明确函数的返回类型

好比这样的代码：

function getPrice(num){
    if(num < 0) return "";
    else return num * 20;
}
复制代码

这个函数有时候返回空字符串，有的时候又会返回整数。这样写虽然不会报错，可是有可能为后边的代码埋下隐患。假如你一不当心进行了运算，返回字符串的状况你就获得了NaN，o(╯□╰)o。。推荐的写法是：

function getPrice(num){
    if(num < 0) return -1;
    else return num * 20;
}
复制代码

这样写避免了一些没必要要的错误，也使这个函数更清晰，不会让人疑惑。

（3）关于函数的参数

实际开发中，向函数传递参数是不可避免的，可是若是一个函数要传一大串的参数，那这看起来是很是恐怖的，使用这个函数的人不但要搞懂每一个参数的意义，并且要对号入座不能出一点差错。

因此咱们应该将函数的参数尽量的减小，能够把参数都放入一个对象内，而后把该对象传函数

8.ES6的一些使用

代码中ES6的使用可让你的代码更简洁，固然是有不少的了。这里列几个平时比较经常使用的：

（1）反引号（`）

模板字符串（template string）是加强版的字符串，用反引号（`）标识。它能够看成普通字符串使用，也能够用来定义多行字符串，或者在字符串中嵌入变量。

传统的 JavaScript 语言，输出模板一般是这样写的：

citys="<li value="+item.xzqh+">"+item.name+"</li>";  
复制代码

模板字符串中嵌入变量，须要将变量名写在${}之中。

citys=`<li value="${xzqh}">${name}</li>`; 
复制代码

使用模板字符串表示多行字符串，全部的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);
复制代码

上面代码中，全部模板字符串的空格和换行，都是被保留的，好比ul标签前面会有一个换行。

（2）箭头函数

箭头函数使得表达更加简洁。

const isEven = n => n % 2 === 0;
const square = n => n * n;
复制代码

上面代码只用了两行，就定义了两个简单的工具函数。若是不用箭头函数，可能就要占用多行，并且还不如如今这样写醒目。

箭头函数的一个用处是简化回调函数。

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);
复制代码

Java用->箭头，C#用的箭头与JS同样：=>，这个箭头叫“lambda运算符”.

lambda表达式（箭头函数）听说是定义函数最简洁的方法，语法上几乎没有冗余成分了。由于JS弱类型的特色，JS中的lambda表达式要比C#和Java中的更简洁。

（3）使用 ES6 的 class

虽然 ES6 的 class 和使用 function 的 prototype 原理上是没有区别的，都是用的原型。class 能够经过extends关键字实现继承，这比经过修改原型链实现继承，要清晰和方便不少。

好比：

function Person(name, age){
    this.name = name;
    this.age = age;
}

Person.prototype.addAge = function(){
    this.age++;
};

Person.prototype.setName = function(name){
    this.name = name;
};
复制代码

使用class的话代码就看起来简洁易懂了

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    addAge(){
        this.age++;
    }
    setName(name){
        this.name = name;
    }
}
复制代码

总结

以上就是一些让代码看起来更优雅的建议，固然不只仅是看起来优雅而已，有时候你随手写的一两句代码可能就会对性能形成不一样的影响，可大可小。因此这里仍是建议你们按照必定的规范来写，更简洁高效的代码不只仅是我的能力的一种体现，你的团队也须要写出你来写出优雅高效的代码来提升团队的总体效率。