ES6这些技巧你真的知道吗?

·  阅读 6761
ES6这些技巧你真的知道吗?

ES6实战技巧你真的都了解了吗。推荐新手阅读,大佬请跳过。
说到ES6,其实我还是比较推荐大家去看看阮一峰老师的ES6教程ECMAScript 6 入门,跟着一起动手就感觉确实是不错很多用法你以前不知道的不了解的在里面都有说到。

1.互换两个对象的值( 数组解构快速实现值的交换)

   阮老师的教程中有更详细的介绍,有没有感觉这么写是不是更加的简单方便了

image.png

2.对象的展开( 数组解构快速展开对象 )

我们都知道接口大多数传递的参数都是key:value形式的对象,现在我们刚好有一个对象,接口里面的参数也正好相等,我们可以下面这种写法没问题,但是我们有更加简单的用法\

image.png

image.png

这样看起来是不是更加的简洁,传递过去的还是像上面那种展开传递的。

image.png

3.数组拼接

以前我们都是通过concat来进行数据拼接的

image.png

这种方法假如我们有很多种数组就要拼接很多次,要多写很多次代码,极大的减少了我们摸鱼的时间,现在可以通过扩展运算符来进行数组合并拼接。

image.png

这样是不是方便了很多,妈妈再也不用担心我没时间摸鱼了。例子不多,还是建议详细阅读 阮老师的教程数组篇。悄悄告诉你使用这种方式拼接出来的数组相当于克隆了一份,而且指针指向的不是原来的内存地址了,当你修改拼接后的数据是不会影响前面的数据的

4.数组去重

我们可以通过ES6 Set数组方法去重

image.png

image.png

5.对象取值

假设有个对象是下面这种结构要求算出a+b,用ES6数组解构快速实现怎么写?

image.png

那其实我们就可以这么写

image.png

6.可选链操作符

直接放截图,这里面的问号是干嘛的哪?答案是:当ev.feature下没有了,表示当前条件语句终止并返回false,有就继续执行,非常适合用来判断当前对象下是否有某个数据,是不是比一个一个if好看一点。

image.png

7.空值合并运算符

又是减少劳动力的一天

image.png

以上这些也是我经历过的一些,还有一些忘记了,想起的话我会再来补上,大家有什么好的意见欢迎指导。
读完有帮助,不妨关注一下,点个赞支持一下。比心

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改