这篇文章介绍了一些在我看来，认真的JavaScript开发者每天或多或少都会用到的特性。1、展开运算符，顾名思义，用于对象或数组前的展开运算符（…），将一个结构体展开成列表。示范：letfirstHalf=[one,two];letsecondHalf=[three,four,...firstHalf];这样的写法够优雅简洁吧？如果我们不使用扩展运算符，我们必须这样写：push(firstHalf[i]);}传播运算符也适用于合并对象的属性：consthero={name:Xena-WarriorPrincess,realName:LucyLawless}constheroWithSword={...hero,weapon:sword}如果你不需要展开运算符，需要遍历对象的属性：letkeys=Object.keys(hero);letobj={};for(vari=0;iacc+curr,0);}如前所述，...remaining收集remaining，为我们提供了这些参数的名称，清楚地表明我们打算处理剩余的参数。据我所知，ES5至少有争论，但很少有人知道。3.字符串插值你见过这样的语句吗？classProduct{constructor(name,description,price){this.name=name;this.description=description;this.price=price;}getDescription(){return"Fulldescription"+"name:"+this.name+"description:"+this.description}}当然，我指的是getDescription()方法中不可读的多行长语句。大多数编程语言中都存在类似的现象。有些语言提供字符串插值，幸运的是JavaScript就是其中之一。让我们重写getDescription()方法：getDescription(){return`Fulldescription:name:${this.name}description${this.description}`;}在包裹的字符串中可以使用一对${}插值。现在看起来舒服多了。4、速记属性在ES5中必须这样写：functioncreateCoord(x,y){return{x:x,y:y}}ES6以后可以使用速记属性：functioncreateCoord(x,y){return{x,y}是不是看起来更清爽了？5.方法属性方法属性是指向对象中定义的方法的属性。以下面的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;}}6.解构赋值解构赋值有利于开发者自身的心理健康。考虑以下代码：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){...}}7.数组方法ES6引入了许多有用的数组方法，如：find()，在列表中找到一个成员，返回null表示没有找到ofalistincludes，一个list是否包含一个item下面的代码可以帮助你理解它们的用法：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/Await8.异步解决方案如果你在这个圈子里混了几年，你可能还记得我们曾经只有这样的回调：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链接在一起：/await，上面的代码可以这样写：asyncfunctiongetItems(){try{constuser=awaitgetUser();consorder=awaitgetOrderByUser(user);constitems=awaitgetOrderItemsByOrder(order);returnitems;}catch(err){//这里处理错误，建议返回某个值或重新抛出错误}}getItems().then(items=>{//处理排序后的成员}9、模块几乎任何编程语言都支持模块的概念，即，代码分为多个文件，每个文件是一个独立的单元（模块）。考虑以下代码：//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。
