如何使用ES6简化代码

如何使用ES6简化代码

小编给大家分享一下如何使用ES6简化代码，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

使用 ES6 简化代码

ES6 已经发展很多年了，兼容性也已经很好了。恰当地使用，可以让代码更加地简洁优雅。

(1)使用箭头函数取代小函数

有很多使用小函数的场景，如果写个 function，代码起码得写 3 行，但是用箭头函数一行就搞定了，例如实现数组从大到小排序：

varnums=[4,8,1,9,0];nums.sort(function(a,b){returnb-a;});//输出[9,8,4,1,0]

如果用箭头函数，排序只要一行就搞定了：

varnums=[4,8,1,9,0];``nums.sort(a,b=>b-a);

代码看起来简洁多了，还有 setTimeout 里面经常会遇到只要执行一行代码就好了，写个 function 总感觉有点麻烦，用字符串的方式又不太好，所以这种情况用箭头函数也很方便：

setTimeout(()=>console.log("hi"),3000)

箭头函数在 C++/Java 等其它语言里面叫做 Lambda 表达式，Ruby 比较早就有这种语法形式了，后来 C++/Java 也实现了这种语法。当然箭头函数或者 Lambda 表达式不仅适用于这种一行的，多行代码也可以，不过在一行的时候它的优点才比较明显。

(2)使用 ES6 的 class

虽然 ES6 的 class 和使用 function 的 prototype 本质上是一样的，都是用的原型。但是用 class 可以减少代码量，同时让代码看起来更加地高大上，使用 function 要写这么多：

functionPerson(name,age){this.name=name;this.age=age;}Person.prototype.addAge=function(){this.age++;};Person.prototype.setName=function(name){this.name=name;};

使用 class 代码看加地简洁易懂：

classPerson{constructor(name,age){this.name=name;this.age=age;}addAge(){this.age++;}setName(name){this.name=name;}}

并且 class 还可以很方便地实现继承、静态的成员函数，就不需要自己再去通过一些技巧去实现了。

(3)字符串拼接

以前要用+号拼接：

vartpl='<div>'+'<span>1</span>'+'</div>';

现在只要用两个反引号“`”就可以了：

vartpl=`<div><span>1</span></div>`;

另外反引号还支持占位替换，原本你需要：

varpage=5,type=encodeURIComponet("#js");varurl="/list?page="+page+"&type="+type;

现在只需要：

varurl=`/list?page=${page}&type=${type}`;

就不用使用+号把字符串拆散了。

(4)块级作用域变量

块级作用域变量也是 ES6 的一个特色，下面的代码是一个任务队列的模型抽象：

vartasks=[];for(vari=0;i<4;i++){tasks.push(function(){console.log("iis"+i);});}for(varj=0;j<tasks.length;j++){tasks[j]();}

但是上面代码的执行输出是 4，4，4，4，并且不是想要输出：0，1，2，3，所以每个 task 就不能取到它的 index 了，这是因为闭包都是用的同一个 i 变量，i 已经变成 4 了，所以执行闭包的时候就都是 4 了。那怎么办呢?可以这样解决：

vartasks=[];for(vari=0;i<4;i++){!function(k){tasks.push(function(){console.log("iis"+k);});}(i);}for(varj=0;j<tasks.length;j++){tasks[j]();}

把 i 赋值给了 k，由于 k 它是一个 function 的一个参数，每次执行函数的时候，肯定会实例化新的 k，所以每次的 k 都是不同的变量，这样就输出就正常了。但是代码看起来有点别扭，如果用 ES6，只要把 var 改成 let 就可以了：

vartasks=[];for(leti=0;i<=4;i++){tasks.push(function(){console.log("iis"+i);});}for(varj=0;j<tasks.length;j++){tasks[j]();}

只改动了 3 个字符就达到了目的。因为 for 循环里面有个大括号，大括号就是一个独立的作用域，let 定义的变量在独立的作用域里面它的值也是独立的。当然即使没写大括号 for 循环执行也是独立的。除了以上几点，ES6 还有其它一些比较好用的功能，如 Object的 assign，Promise 等，也是可以帮助写出简洁高效的代码。

以上是“如何使用ES6简化代码”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！