为了保证更好的可读性，本文采用意译而非直译。想阅读更多优质文章，请戳GitHub博客，一年百篇优质文章等你来！您可能已经使用了其中的大部分技术。如果你用过，那就算是加深了形象。如果没有遇到过，也算是学了几个技术。为了回馈读者，《大迁世界》将不定期（每月一到三次），抽取现金，保底200，外加用户赞赏，希望你也能成为小锦鲤这个世界，快来试试吧，保证数组的值使用grid时，需要重新创建原始数据，每行的列长可能不匹配。为了确保不匹配行之间的长度相等，可以使用Array.fill方法。让array=Array(5).fill('');console.log(array);//outputs(5)["","","","",""]获取数组的唯一值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","福特”、“雷诺”、“欧宝”]3。使用扩展运算符合并对象和对象数组是很常见的。我们可以使用新的ES6特性来更好、更简洁地处理合并过程。//合并对象constproduct={name:'Milk',packaging:'Plastic',price:'5$'}constmanufacturer={name:'CompanyName',address:'TheCompanyAddress'}constproductManufacturer={...product,...manufacturer};console.log(productManufacturer);//outputs{name:"CompanyName",packaging:"Plastic",price:"5$",address:"TheCompanyAddress"}//将对象数组合并到一个常量cities=[{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:'Genoa',visited:'yes'},{name:'Berlin',visited}:'no'},{name:'Hamburg',visited:'yes'},{name:'NewYork',visited:'yes'}];constresult=cities.reduce((accumulator,item)=>{return{...accumulator,[item.name]:item.visited}},{});console.log(result);/*outputsBerlin：“否”热那亚：“是”汉堡：“是”里昂：“否”马赛：“是”米兰：“否”纽约：“是”巴勒莫：“是”巴黎：“否”罗马：“是”*/Arraymapmethod(withoutusingArray.Map)数组map的另一种实现方式，不用Array.mapArray.from也可以接受第二个参数，作用类似于数组的map方法，用于对每个元素进行处理并将处理后的值放入返回的数组中。如下：constcities=[{name:'Paris',visited:'no'},{name:'Lyon',visited:'no'},{name:'Marseille',visited:'yes'},{名称：'罗马'，访问：'是'}，{名称：'米兰'，访问：'否'}，{名称：'巴勒莫'，访问：'是'}，{名称：'热那亚'，访问：'是'}，{名称：'柏林'，访问：'否'}，{名称：'汉堡'，访问：'是'}，{名称：'纽约'，访问：'是'}];constcityNames=Array.from(城市,({name})=>name);console.log(cityNames);//outputs["Paris","Lyon","Marseille","Rome","Milan","Palermo","Genoa","Berlin","Ham条件对象属性不再需要根据条件创建两个不同的对象，这可以使用扩展运算符来处理。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={};({name:user.name,surname:user.surname,...userDetails}=rawUser);console.log(user);//输出{name:"John",surname:"Doe"}console.日志（用户详细信息）；//outputs{email:"john@doe.com",displayName:"SuperCoolJohn",joined:"2016-05-05",image:"path-to-the-image",followers:45}动态属性名Early上，如果属性名称需要是动态的，我们首先必须声明一个对象，然后分配一个属性。那些日子已经一去不复返了，有了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);}printUserInfo(user);//outputs'TheuserisJohnDoe.电子邮件：john@doe.com。显示名称：SuperCoolJohn。约翰读了三件事！！！如果您觉得这篇内容对您很有启发，请您帮我三个小忙：点“赞”，让更多人看到这篇内容（喜不喜欢，都是耍流氓-_-)点击关注不迷路~让我们成为长期关系关注转发+私信关键词（采访），给你精心准备的前端进阶数据掘金：https://juejin.im/post/5d1a9d。..作者：前端小智
