如何让你的JavaScript代码更优雅

写了好多年的JavaScript代码，你的代码是不是可以更加优雅？下面整理了一些优化代码的建议，大家可以酌情做一下参考，希望能给到大家一些帮助。

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

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

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

如下所示：

var result1 = ("66" == 66); //true，因为转换后相等 
var result2 = ("66" === 66); //false，因为不同的数据类型不相等

要记住：null == undefined 会返回 true，因为它们是类似的值；但 null === undefined 会返 回 false，因为它们是不同类型的值。

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

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

}

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

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

var message = "hi"; 

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

var message = "hi"; 
message = 100; // 有效，但不推荐 

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

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;
    }
}

总结

以上就是一些让代码看起来更优雅的建议，当然不仅仅是看起来优雅而已，有时候你随手写的一两句代码可能就会对性能造成不同的影响，可大可小。所以这里还是建议大家按照一定的规范来写，更简洁高效的代码不仅仅是个人能力的一种体现，你的团队也需要写出你来写出优雅高效的代码来提高团队的整体效率。

关注我们