这些技能大部分可能大家都会用到，如果你用过，就作为深化图，如果没遇到过吧，也算是学会了几招吧。1、要保证数组值使用grid，需要重新创建原始数据，每行的列长可能不匹配。为了确保不匹配行之间的长度相等，可以使用Array.fill方法。让array=Array(5).fill('');console.log(array);//输出(5)["","","","",""]2.获取数组的唯一值ES6提供了两种非常简洁的方法来从数组中提取唯一值。不幸的是，它们不能很好地处理非原始类型的数组。在本文中，我们关注原始数据类型。constcars=['Mazda','Ford','Renault','Opel','Mazda']constuniqueWithArrayFrom=Array.from(newSet(cars));console.log(uniqueWithArrayFrom);//输出["Mazda","Ford","Renault","Opel"]constuniqueWithSpreadOperator=[...newSet(cars)];console.log(uniqueWithSpreadOperator);//输出["Mazda","Ford","Renault","Opel"]3.使用扩展运算符合并对象和对象数组对象是很常见的。我们可以在这里使用它。我建了一个前端学习交流群：132667127，我自己整理的最新的前端资料和进阶开发教程，有需要的可以进群学习交流ES6新特性，更好更简洁处理合并的过程。//合并对象constproduct={name:'Milk',packaging:'Plastic',price:'5$'}constmanufacturer={name:'CompanyName',address:'TheCompanyAddress'}constproductManufacturer={...product,...manufacturer};console.log(productManufacturer);//输出{name:"CompanyName",packaging:"Plastic",price:"5$",address:"TheCompanyAddress"}//将对象数组合并到一个常量城市=[{name:'Paris',visited:'no'},{name:'Lyon',visited:'no'},{name:'Marseille',visited:'yes'},{name:'Rome',visited:'yes'},{name:'Milan',visited:'no'},{name:'Palermo',visited:'yes'},{name:'热那亚''，访问过：'是'}，{名称：'柏林'，访问过：'否'}，{名称：'汉堡'，访问过：'是'}，{名称：'纽约'，访问过：'是'}];constresult=cities.reduce((accumulator,item)=>{return{...accumulator,[item.name]:item.visited}},{});console.log(result);/*输出柏林：“否”热那亚：“是”汉堡：“是”里昂：“no"Marseille:"yes"Milan:"no"NewYork:"yes"Palermo:"yes"Paris:"no"Rome:"yes"*/4.arraymap的方法(没有使用Array.Map)another数组map的一种实现方式，不用Array.mapArray.from也可以接受第二个参数，类似于数组的map方法，用于对每个元素进行处理，并将处理后的值放入返回的数组中。如下:constcities=[{name:'Paris',visited:'no'},{name:'Lyon',visited:'no'},{name:'Marseille',visited:'yes'},{名称:'罗马'，访问过：'是'}，{名称：'米兰'，访问过：'否'}，{名称：'巴勒莫'，访问过：'是'}，{名称：'热那亚'，访问过：'是'},{name:'Berlin',visited:'no'},{name:'Hamburg',visited:'yes'},{name:'NewYork',visited:'yes'}];constcityNames=Array.from(cities,({name})=>name);console.log(cityNames);//输出["Paris","Lyon","Marseille","Rome","Milan","Palermo","Genoa","Berlin","Hamburg","NewYork"]5.条件对象属性不再需要根据一个条件创建两个不同的对象，这可以使用展开运算符来处理。nstgetUser=(emailIncluded)=>{return{name:'John',surname:'Doe',...emailIncluded&&{email:'john@doe.com'}}}constuser=getUser(true);控制台.log(用户);//输出{name:"John",surname:"Doe",email:"john@doe.com"}constuserWithoutEmail=getUser(false);console.log(userWithoutEmail);//输出{姓名：“John”，姓氏：“Doe”}6.解构原始数据有时一个对象包含许多属性，而我们只需要其中的几个。这里我们可以通过解构来提取我们需要的属性。例如，一个用户对象的内容如下：constrawUser={name:'John',surname:'Doe',email:'john@doe.com',displayName:'SuperCoolJohn',joined:'2016-05-05',image:'path-to-the-image',followers:45...}我们需要提取两部分，即用户和用户信息。这时候，我们可以这样做：letuser={},userDetails={};({名字:user.name,姓氏:user.surname,...userDetails}=rawUser);console.log(user);//输出{name:"John",surname:"Doe"}console.log(userDetails);//outputs{email:"john@doe.com",displayName:"SuperCoolJohn",joined:"2016-05-05",image:"path-to-the-image",followers:45}7.动态属性名称早期，如果属性名称需要是动态的，我们首先必须声明一个对象，然后分配一个属性。那些日子已经一去不复返了，有了ES6特性，我们可以做到这一点。constdynamic='email';letuser={name:'John',[dynamic]:'john@doe.com'}console.log(user);//outputs{name:"John",email:"john@doe.com"}8.字符串插值在用例中，如果您正在构建基于模板的辅助组件，这就会脱颖而出，它使动态模板连接变得非常重要更轻松。constuser={name:'John',surname:'Doe',details:{email:'john@doe.com',displayName:'SuperCoolJohn',joined:'2016-05-05',image:'path-to-the-image',followers:45}}constprintUserInfo=(user)=>{consttext=`用户是${user.name}${user.surname}。电子邮件：${user.details.email}。显示名称：${user.details.displayName}。${user.name}有${user.details.followers}个关注者。`console.log(text);}
