ES发展至今,兼容性也已很好,在项目中恰当的使用ES6的语法,可以使你的代码更加的简洁优雅,并且使你写的代码看起来更加的有逼格
- 小函数使用箭头函数来替代
很多函数内部只有一行代码的函数,如果写个function,最少需要3行,但是用箭头函数只需一行就可以搞定了,如下实现数组从大到小排序的一个函数:
var nums=[4,8,1,9,0];
nums.sort(function(a,b){
return b-a;
});
//输出[9,8,4,1,0]
使用箭头函数:
var nums=[4,8,1,9,0];
nums.sort(a,b => b-a);
箭头函数另外一个应用场景——setTimeout,setTimeout里面经常也会有只需执行一行代码的情况,写个function总感觉有点麻烦,用字符串的方式又不太好,这里用箭头函数就很方便:
setTimeout(()=>console.log("hi"),3000)
箭头函数在c++/java中叫lambda表达式。
2.字符串拼接
以前的字符串拼接要用+来拼接,比较麻烦,如下:
var str=
'div'+
'<span>1</span>'+
'</div>';
而现在使用ES6的模板语法就可以了,使用反引号,也就是在输入法英文状态下tab键上面的那个键:
var str=
`div
<span>1</span>
</div>`;
模板语法还支持占位符替换,如:
var page=5,
type=encodeURIComponent("#js");
var url = "/list?page="+page+"&type="+type;
用模板语法可以这样写:
var url=`/list?page=${page}&type=${type}`;
3.块级作用域变量
块级作用域变量也是ES6的一个特色,例如下面的一个任务队列的模型抽象:
var tasks=[];
for(var i=0; i<4;i++){
tasks.push(function(){
console.log("i is"+i);
});
}
for (var j=0; j<tasks.length;j++){
tasks[j]();
}
简单解读一下上面的代码哈,第一个for循环是在向tasks中添加4个函数,第二个for是遍历执行这4个函数,执行结果是控制台打印出四次i is 4。而不是我们期待输出的:0,1,2,3,这是因为闭包都是用的同一个变量i,i已经变成4了,所以执行闭包的时候就是4。
怎么办呢?可以这样解决:
var tasks=[];
for(var i=0; i<4;i++){
!function(k){
tasks.push(function(){
console.log("i is "+k);
});
}(i);
}
for (var j=0; j<tasks.length;j++){
tasks[j]();
}
把i赋值给k,由于k是一个function的一个参数,每次执行函数的时候,就会创建新的k,所以每次的k都是不同的变量,这样,输出就正常了。控制台得到的结果是:
如果使用ES6,只要把var 改成let就可以了:
var tasks=[];
for(let i=0; i<4;i++){
tasks.push(function(){
console.log("i is"+i);
});
}
for (var j=0; j<tasks.length;j++){
tasks[j]();
}
因为这里for循环里面的大括号就是一个独立的作用域,let定义的变量是在独立的作用域里,所以它的值也是独立的,当然即使没有写大括号,for循环里面的变量也是独立的。