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

总结

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