16.SetSet可以理解成一个“不允许重复值”的集合。最常见用途就是数组去重。16.1 基本使用constsetnewSet()set.add(1)set.add(2)set.add(2)set.add(3)console.log(set)结果Set(3){1,2,3}虽然set.add(2)执行了两次但只保留一个。16.2 数组去重这是最经典的写法constarr[1,2,2,3,3,4]constresult[...newSet(arr)]console.log(result)结果[1,2,3,4]这里其实组合了前面学过的new Set(arr) ↓ 先去重 ... ↓ 展开 [] ↓ 重新变成数组所以以后看到[...newSet(arr)]直接理解成数组去重。16.3 字符串去重也可以constarr[Java,Vue,Java,MySQL,Vue]constresult[...newSet(arr)]console.log(result)结果[Java,Vue,MySQL]16.4has()判断是否存在constsetnewSet([WAIT_REPAIR,REPAIRING,COMPLETED])console.log(set.has(REPAIRING))结果true所以一些状态判断可以这样写consteditableStatusnewSet([WAIT_DIAGNOSIS,DIAGNOSING,WAIT_CUSTOMER_CONFIRM])if(editableStatus.has(order.status)){console.log(允许编辑)}相比if(order.statusWAIT_DIAGNOSIS||order.statusDIAGNOSING||order.statusWAIT_CUSTOMER_CONFIRM){}有时候清晰很多。16.5delete()和clear()删除一个constsetnewSet([1,2,3])set.delete(2)console.log(set)结果Set(2){1,3}清空set.clear()16.6 一个需要注意的地方Set对对象去重不是按“内容”判断。例如constarr[{id:1},{id:1}]constresult[...newSet(arr)]console.log(result.length)结果还是2因为{id:1}和{id:1}虽然内容一样但它们是两个不同对象。所以Set特别适合数字去重 字符串去重 状态集合 ID集合对象数组去重通常要按id自己处理。例如constusers[{id:1,name:张三},{id:1,name:张三},{id:2,name:李四}]constmapnewMap()users.forEach(item{map.set(item.id,item)})constresult[...map.values()]这个就涉及下一节。17.MapMap也是键值结构。你可以把它和普通 JS 对象对比理解。普通对象constuserMap{1:张三,2:李四}MapconstuserMapnewMap()userMap.set(1,张三)userMap.set(2,李四)取值console.log(userMap.get(1))结果张三17.1 基本 API设置map.set(key,value)获取map.get(key)判断map.has(key)删除map.delete(key)清空map.clear()数量map.size17.2 实战ID 快速查对象假设后端返回constusers[{id:1,name:张三},{id:2,name:李四},{id:3,name:王五}]如果经常需要根据 id 找用户可以先建立 MapconstuserMapnewMap()users.forEach(user{userMap.set(user.id,user)})之后constuseruserMap.get(2)console.log(user)结果{id:2,name:李四}和find有什么区别你也可以users.find(itemitem.id2)数据量不大、只查一次find完全够用。但如果你要根据 ID 查几百次、几千次那么可以先Map建立索引。然后userMap.get(id)会更合适。17.3 实战字典映射比如后端状态WAIT_REPAIRREPAIRINGCOMPLETED前端要显示待维修 维修中 已完成可以conststatusMapnewMap([[WAIT_REPAIR,待维修],[REPAIRING,维修中],[COMPLETED,已完成]])conststatusNamestatusMap.get(REPAIRING)console.log(statusName)结果维修中不过这种简单字典实际项目中普通对象也很常见conststatusMap{WAIT_REPAIR:待维修,REPAIRING:维修中,COMPLETED:已完成}然后statusMap[order.status]所以不用认为有映射就必须 Map。17.4 Map 的 key 不只是字符串普通对象的 key 主要是字符串 Symbol而Map可以直接用数字 对象 函数当 key。例如constuser1{id:1}constmapnewMap()map.set(user1,这是用户1)console.log(map.get(user1))结果这是用户1这是 Map 比普通对象灵活的地方。17.5 Map 做对象数组去重刚才那个案例constusers[{id:1,name:张三},{id:1,name:张三新版},{id:2,name:李四}]按照id去重。可以constmapnewMap()users.forEach(item{map.set(item.id,item)})constresult[...map.values()]结果[{id:1,name:张三新版},{id:2,name:李四}]为什么保留张三新版因为map.set(1,...)后面的覆盖前面的。这个思路很实用。18.for...offor...of用来遍历数组 Set Map 字符串等可迭代数据。18.1 遍历数组constusers[张三,李四,王五]for(constuserofusers){console.log(user)}输出张三 李四 王五可以理解每次从数组里拿一个值出来18.2 和传统 for 对比传统for(leti0;iusers.length;i){console.log(users[i])}for...offor(constuserofusers){console.log(user)}如果你不需要下标i那么for...of通常更加清晰。18.3 遍历对象数组constusers[{id:1,name:张三},{id:2,name:李四}]for(constuserofusers){console.log(user.id)console.log(user.name)}18.4for...of一个非常重要的优势它支持break和continue例如constusers[{id:1,enabled:true},{id:2,enabled:false},{id:3,enabled:true}]for(constuserofusers){if(!user.enabled){break}console.log(user.id)}遇到id2直接结束循环。而forEach()不能正常用break。所以如果业务是找到某种情况就停止循环for...of经常比forEach更合适。18.5continue例如for(constuserofusers){if(!user.enabled){continue}console.log(user.name)}表示禁用用户跳过继续处理下一个。18.6for...ofawait这是非常实用的一种场景。例如你需要按照顺序处理订单for(constorderoforders){awaitprocessOrder(order)}执行订单1处理完成 ↓ 订单2处理完成 ↓ 订单3处理完成属于串行。有时候业务就是要求严格按顺序执行这时候很好用。18.7forEach await的坑很多人会这样写orders.forEach(asyncorder{awaitprocessOrder(order)})然后误以为会一条一条等待。实际上不会按照你直觉中的方式控制外层等待。例如asyncfunctiontest(){orders.forEach(asyncorder{awaitprocessOrder(order)})console.log(全部完成)}很可能“全部完成”先打印了。所以如果你需要严格串行for(constorderoforders){awaitprocessOrder(order)}更加稳妥。18.8for...in和for...of不要混这两个特别容易混。例如constarr[Java,Vue,MySQL]for...offor(constitemofarr){console.log(item)}得到Java Vue MySQL也就是值。而for(constindexinarr){console.log(index)}得到0 1 2也就是key / 索引。所以可以先记for...of ↓ value for...in ↓ key对于数组遍历我通常建议优先for...of而不是for...in1618 总结你可以这样记16. Set ↓ 不重复集合 常见 数组去重 判断某值是否存在 17. Map ↓ key → value 映射 常见 ID快速查对象 字典映射 数据建立索引 18. for...of ↓ 遍历数组/集合 优势 可以 break 可以 continue 可以配合 await实战重要程度我会排Set ★★★★☆ Map ★★★☆☆ for...of ★★★★☆其中你最值得先记住的三个写法是constuniqueIds[...newSet(ids)]数组去重。constuseruserMap.get(userId)根据 key 快速拿数据。for(constitemoflist){// 处理 item}正常遍历。到这里ES6 主体其实已经差不多讲完整了。