(ES6)有用的提示与技巧
EcmaScript 2015(ES6)已经出来好几年了,可以巧妙地使用各种新功能。列出并讨论其中一些,你会发现它们很有用。如果你知道其他好方法,请在评论中回复。
1.必传参数
ES6提供了默认参数值,没有该参数的情况下调用函数时使用的默认值。
在以下示例中,将required()函数设置为 a 和 b 参数的默认值。 这意味着如果未传递a或b,则调用required()函数,将收到错误。
2.强大的“reduce”
Array的reduce方法非常通用。它通常用于将项目数组转换为单个值,但是你可以用它做更多的事情。
大多数这些技巧都依赖于初始值是数组或对象而不是像字符串或变量这样的简单值。
2.1 使用reduce同时进行 map 和 filter 操作
假设有一个项目列表的情况,并且想要更新每个项目(即 Array.map 操作),然后只过滤几个项目(即 Array.filter ),这意味着需要两次循环遍历列表!
在下面的示例中,我们希望将数组中的项的值加倍,然后选择大于50的项。我们使用强大的 reduce 方法高效的同时做到:
2.2 使用 “reduce” 代替是 “map” 或 “filter”
如果仔细查看上面的示例(2.1),就会知道 reduce 可以代替 map 或 filter !
2.3 使用 reduce 来判断括号是否对称
2.4 计算重复的数组项(转换数组→对象)
有时你希望复制数组项或将数组转换为对象。 你可以使用 reduce。
在下面的例子中,计算cars 中每个值重复数量,并将这组对应的数据放到一个对象中:
reduce 还可以做更多的事情,建阅读 MDN上列出的示例。
3. 对象解构
3.1 属性挑拣
有时候你想挑拣需要的属性排除一些平需要的属性(可能是因为它们包含敏感信息或者太大了)。我们不需要遍历整个对象来挑拣它们,只需将这些不需要的数据提取到对应变量中,并将有用的保存在rest参数中。
在下面的示例中,我们不需要的属性如_internal和tooBig属性,我们可以将它们分配给_internal和tooBig变量(名字要一样),并将剩余的保存到在restparametercleanObject 参数中:
3.2 在函数参数中分解嵌套对象
在下面的示例中,engine 属性是 car 对象的一个内嵌对象。如果我们想获取 engine 中的 vin 值,可以使用以下解构方式:
3.3 合并对象
ES6附带了一个扩展操作符(由三个点表示)。它通常用于解构数组值,但也可以在对象上使用它。
在下面的示例中,我们使用扩展操作符(...)在新对象中进行扩展。第二个对象中的属性键将覆盖第一个对象中的属性键:
4.Sets
4.1 使用 set 时行数组去重
在ES6中,可以使用 set 轻松时行数组去重,因为 set 只允许存储惟一的值:
4.2 使用数组的方法
使用扩展运算符(...) 将 set 转换为数组很简单且在集合上使用所有数组方法!
5. 数组解构
5.1 交换值
5.2 从一个函数接收和分配多个值
在下面的例子中,我们在/post获取一个post,并在/comments 获取相关 comments 。由于使用 async/wait,该函数以数组的形式返回结果。使用数组析构,我们可以直接将结果赋值到相应的变量中。
最后:“相信有很多想学前端的小伙伴,今年年初我花了一个月整理了一份最适合2018年学习的web前端干货,从最基础的HTML+CSS+JS到移动端HTML5等都有整理,送给每一位前端小伙伴,53763,1707这里是小白聚集地,欢迎初学和进阶中的小伙伴。”
祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。