你可能是JavaScript的新手，或者只是偶尔使用它。不管怎样，JavaScript已经改变了很多，有些特性还是值得使用的。这篇文章介绍了一些功能，在我看来，认真的JavaScript开发人员每天或多或少都在使用这些功能。参考资料以下两个ES6+站点是我的最爱：ES6特性MDN扩展运算符顾名思义，在对象或数组之前使用的扩展运算符(...)将结构扩展为列表。演示：letfirstHalf=['一','二'];letsecondHalf=['三','四',...firstHalf];这样的写法，够优雅简洁了吧？如果我们不使用扩展运算符，我们必须这样写：letfirstHalf=['one','two'];letsecondHalf=['three','four'];for(vari=0,iacc+curr,0);}如前所述，...remainingcollection剩余的提供了参数，为我们提供了这些参数的名称，清楚地表明我们打算处理其余参数。据我所知，ES5至少有争论，但很少有人知道。字符串插值见过这样的语句吗？classProduct{constructor(name,description,price){this.name=name;this.description=description;this.price=price;}getDescription(){return"Fulldescription\n"+"name:"+this.name+"description:"+this.description}}当然，我指的是getDescription()方法中冗长的、不可读的语句。大多数编程语言中都存在类似的现象。有些语言提供字符串插值，幸运的是JavaScript就是其中之一。我们重写getDescription()方法：getDescription(){return`Fulldescription\n:name:${this.name}description${this.description}`;}`包裹的一对字符串可以使用${}插值。现在看起来舒服多了。简写属性在ES5中必须这样写：functioncreateCoord(x,y){return{x:x,y:y}}ES6以后可以使用简写属性：functioncreateCoord(x,y){return{x,y}}looks喜欢是不是更清爽？方法属性方法属性是定义对象中指向方法的属性。以下面的ES5代码为例：constmath={add:function(a,b){returna+b;},sub:function(a,b){returna-b;},multiply:function(a,b){return*b;}}ES6只需要这样写：constmath={add(a,b){returna+b;},sub(a,b){returna-b;},multiply(a,b){returna*b;}}解构赋值解构赋值有利于开发者自身的心理健康。考虑以下代码：functionhandle(req,res){constname=req.body.name;constdescription=req.body.description;consturl=req.url;log('urlendpoint',url);//大量代码逻辑dbService.createPerson(name,description)}不管从什么角度看，上面的代码都不是完美的，但是它确实反映了一个应用场景，我们想要从不同层次的对象中获取数据。你可能会问，这里有什么问题？好吧，我可以通过不声明那么多变量来节省一些击键次数。functionhandle(req,res){const{body:{name,description},url}=req;log('urlendpoint',url);//一大堆代码逻辑dbService.createPerson(name,description)看，我们上面的代码将三行压缩为一行。解构赋值不限于对象。它也适用于数组。考虑以下代码：constarray=[1,2,3,4,5,6];consta=array[0];constc=array[2];上面的代码可以用更优雅的方式重写：constarray=[1,2,3,4,5,6];const[a,,c,...remaining]=arr;//remaining=[4,5,6]我们可以使用上面的模式匹配来分解数组的值。我们使用,,来跳过某些值。这里也可以使用上面提到的剩余参数，这里我们通过剩余参数来捕获剩余的数组成员。解构赋值也可以与函数和参数一起使用。当一个函数的参数超过2-3个时，使用一个对象来收集所有参数是JavaScript中的事实标准。例如，以下函数：functiondoSomething(config){if(config.a){...}if(config.b){...}if(config.c){...}}写得更好：functiondoSomething({a,b,c}){if(a){...}if(b){...}if(c){...}}数组方法ES6引入了许多有用的数组方法，例如:find()，在列表中查找一个成员，如果没有找到则返回nullfindIndex()，查找一个列表成员的索引该列表包含项目下面的代码将帮助您了解它们的用法：constarray=[{id:1,checked:true},{id:2}];arr.find(item=>item.id===2)//{id:2}arr.findIndex(item=>item.id===2)//1arr.some(item=>item.checked)//trueconstnumberArray=[1,2,3,4];numberArray.includes(2)//truePromises+Async/Await如果你在这个圈子里呆了几年，你可能还记得我们只有回调的时候，像这样：functiondoSomething(cb){setTimeout(()=>{cb('done')},3000)}doSomething((arg)=>{console.log('donehere',arg);})我们使用回调，因为有些操作是异步的，需要时间才能完成。然后我们有了promise库，人们开始使用它。然后JavaScript逐渐添加了对promises的原生支持。functiondoSomething(){returnnewPromise((resolve,reject)=>{setTimeout(()=>{resolve('done')},3000)})}doSomething().then(arg=>{console.log('donehere',arg);})我们甚至可以这样称呼它，将promises串在一起：getUser().then(getOrderByUser).then(getOrderItemsByOrder).then(orderItems=>{//Processsortedmembers})好，我们有了async/await，上面这段代码可以这样写：err){//这里处理错误，建议返回一个值或者重新抛出错误}}getItems().then(items=>{//Processsortedmembers})Module几乎任何编程语言都支持这个概念modules，即把代码分成多个文件，每个文件都是一个自成一体的单元（模块）。考虑以下代码：//math.jsexportfunctionadd(a,b){returna+b;}exportfunctionsub(a,b){returna-b;}exportdefaultmult(a,b)=>a*b;//main.jsimportmult,{add,sub}from'./math';mult(2,4)//8add(1,1)//2sub(1,2)//-1我们上面用export关键字标记了add的两个结构和sub对任何导入该模块的模块都是公开可见的。exportdefault关键字表示仅导入模块时得到的结构。在main.js中，我们将引入的默认命名为mult，并说明我们引入了两个方法，add()和sub()。箭头函数和字典范围this我在本文中的许多地方都使用了箭头函数，这只是另一种函数符号。以前我们只能这样声明函数：functionprintArray(arr){//具体操作}现在我们也可以这样写：constprintArray=(arr)=>{//具体操作}我们也可以这样写函数声明在一行中：constadd=(a,b)=>a+b上面的代码显示我们执行一个操作并返回结果。我们还可以使用以下语法返回一个对象：constcreate=(a,b)=>({x:a,y:b})过去，我们很难搞清楚这是什么。考虑以下代码：letarray=[1,2,3];functionsum(){this.total=0;arr.forEach(function(item){this.total+=item;//糟糕，`this`是内部函数的this`})returntotal;}上面代码中的this指向了forEach内部函数的this，这不是我们想要的。以前我们解决这个问题的方法是：functionsum(){this.total=0;varself=this;arr.forEach(function(item){self.total+=item;//这里用了self，解决了问题，不过感觉有点别扭})returntotal;}箭头函数可以解决问题，不再使用self，现在代码是这样的：functionssum(){this.total=0;arr.forEach((item)=>{this.total+=item;//一切正常，`this`指向外层函数})returntotal;}大获全胜！结论我可以说更多关于ES6的内容，但我只会在这篇文章中介绍我最喜欢的功能。我认为您应该从今天开始使用这些功能。
