关于ES6的六个小特性(二)
前言
Javascript团体的每个人都喜欢新的API,语法更新以及特性,它们提供了更好的,更智能,更有效的方式以完成重要的任务。
继上一篇的《简单谈谈ES6的六个小特性》,这次我再分享6个可以减少代码和最大化效率的方法。
1.ObjectShorthand
新的对象声明方法允许我们可以不声明对象的key:
varx=12;
vary=yes;
varz={one:'1',two:'2'};
//Theoldway
varobj={
x:x,
y:y,
z:z
}
//Thenewway
varobj={x,y,z};
2.MethodProperties
避免function关键字声明函数:
vardavidwalsh={
makeItHappen(param){
//dostuff
}
}
必须承认去除掉function关键字确实使代码简洁、更好维护。
3.BlocksvsImmediatelyExecutedFunctions
下面创建立即执行方法的模式有点难看:
(function(){
//dostuff
})();
通过ES6我们可以通过{}和let来创建块级作用于,完成立即执行函数的作用:
{
letj=12;
letdivs=document.querySelectorAll('div');
//dostuff
}
j;//ReferenceError:jisnotdefined...
如果在Block内部声明函数,它将会被外部访问到。但你如果使用let关键字声明函数自变量,将不使用括号的情况下实现IEF的功能。
4.forloopsandlet
因为在JS里面会存在变量提升,我们经常会在作用域前面声明一些”无用”的迭代变量,例如(forvarx=…)。ES6使用let解决了此恼人的问题:
for(letx=0;x<len;i++){
//dostuff
}
x;//ReferenceError:xisnotdefined
不久以后let会被应用的更多。
5.getandsetforClasses
classCart{
constructor(total){
this._total=total;
}
gettotal(){returnthis._total;}
settotal(v){this._total=Number(v);}
}
varcart=newCart(100);
cart.total//100
能为属性设置get、set是这部分最棒的。不需要使用函数来进行特殊的设定–当执行obj.prop={value}时,一切都会自动执行。
6.startsWith,endsWithandincludes
"MooTools".startsWith("Moo");//true;
"MooTools".startsWith("moo");//false;
"MooTools".endsWith("Tools");//true;
"MooTools".includes("oo");//true;
注:includes方法兼容性还是很多,曾有一个线上bug,就是因为不支持此方法导致的。
原文:https://davidwalsh.name/es6-features-ii/amp
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。