1、展开操作符

顾名思义,用于对象或数组之前的展开操作符(…),将一个结构展开为列表。

这种写法够优雅,够简洁吧?如果不用展开操作符

我们得这么写:

展开操作符也适用于合并对象的属性:

不用展开操作符的话,需要遍历对象的属性:

2、剩余参数

剩余参数将剩余的参数收入数列。JavaScript 的特性是参数数目很灵活。通常会有一个 arguments 变量收集参数。

让我们看一个例子:

上面的一段代码仅仅将 first 和 second 加起来,也就是说,调用 add(1, 2) 和 add(1, 2, 3, 4) 会得到相同的结果。

下面我们修正一下:

如前所述,…remaining 收集了剩余的参数,为我们提供了这些参数的命名,清楚地表明我们打算处理剩余的参数。我记得至迟 ES5 已经有 arguments 了,不过少有人知。

3、字符串插值

见过这样的语句吗?

当然,我指的是 getDescription() 方法中那个可读性不佳的多行长语句。大多数编程语言中都存在类似现象。一些语言提供了字符串插值,幸运的是,JavaScript 正是其中之一。

我们改写一下 getDescription() 方法:

一对 包起来的字符串中可以使用 ${} 插值。现在看起来舒服多了。

4、简写属性

在 ES5 中必须这么写:

ES6 以后可以使用简写属性:

看起来更清爽了吧?

5、方法属性

方法属性是在对象中定义指向方法的属性。

考虑下面一段 ES5 代码作为例子:

ES6 以后只需这么写:

6、解构赋值

解构赋值有利于开发者本人的心理健康。

考虑下面的代码:

不管从什么角度来看,上面的代码都不完美,但它确实体现了一种应用场景,我们想要从对象的不同层次获取数据。你也许会问,这里有什么问题?好吧,我可以不用声明这么多变量,省下一些敲击键盘的次数。

看,我们上面的代码将三行压缩成了一行。

解构赋值并不仅仅局限于对象。它同样适用于数组。

考虑下面的代码:

上面的代码可以用更优雅的方式改写:

我们可以使用上面的模式匹配分解数组的值。我们使用 , , 跳过某些值。上面提到过的剩余参数这里也能用,在这里我们通过剩余参数捕获了剩余的数组成员。

解构赋值还可以用于函数和参数。函数有不止 2-3 个参数时,使用一个对象收集所有参数是 JavaScript 的事实标准。

例如,下面一个函数:

有更好的写法:

7、数组方法

ES6 引入了许多有用的数组方法,例如:

find(),查找列表中的成员,返回 null 表示没找到

findIndex(),查找列表成员的索引

some(),检查某个断言是否至少在列表的一个成员上为真

includes,列表是否包含某项

下面的代码有助于你理解它们的用法:

8、异步方案

如果你在这个圈子里呆了些年头,也许会记得曾经有一个时期我们只有回调

就像这样:

我们使用回调是因为有些操作是异步的,需要时间来完成。后来我们有了 promise 库,人们开始使用它。然后 JavaScript 逐渐加入了对 promise 的原生支持。

我们甚至可以这样调用,将 promise 串起来:

后来生活更加美好,我们有了 async/await

上面一段代码可以这样写:

9、模块

差不多任何编程语言都支持模块这一概念,也就是将代码分为多个文件,每个文件是一个自我包含的单元(模块)。

考虑下面的代码:

我们在上面用 export 关键字注明了 add 和 sub 这两个结构对任何引入该模块的模块都公开可见。export default 关键字则注明仅仅 import 模块时得到的结构。在 main.js 中,我们将导入的 default 命名为 mult,同时指明我们引入 add() 和 sub() 这两个方法。箭头函数和字典作用域 this。

es6 数组合并_九个前端开发必学超级实用的 ES6 特性相关推荐

  1. es6 数组合并_那些会用到的 ES6 精粹(包邮送书)

    前言 最新的 ECMAScript 都已经到发布到 2019 版了. 我们应该有的态度是:Stay hungry ! Stay young ! 从接触 vue 到工作中用到 vue 将近 2 年了,在 ...

  2. Web前端开发必学15大技术

    快进到现在,我发现现代web开发再一次将发生压倒性的改变.信息资讯的铺天盖地令人迷惑,尤其对于初学者而言.首要原因是新的框架,例如 Angular 2和ReactJs出现了,使用了尚未完全定型的ECM ...

  3. 五种网站前端开发必学的网页布局方式?

    作为前端开发工程师,布局方式有多种,针对不同的情况有不一样的处理,但是很多初学的同学都不知道这些情况,那么我们今天就来说说,那些网站前端开发工程师不可不知的5种布局方式! 一.静态布局(static ...

  4. es6 数组合并_对比 ES5,学习 ES6(一)

    一.let.const 之前声明变量都是用的 var,可是 var 有很多问题,比如可以重复声明.没有块级作用域等. ES6 引入了 let 和 const,它们的区别在于: var 可以重复声明,l ...

  5. 前端开发需要学python吗_在选择学习Python开发还是前端开发时需要考虑哪些因素...

    首先,从技术体系结构来看,Python开发与前端开发是两个不同的学习方向,未来所从事的岗位和面对的任务场景也有较为明显的不同,但是Python开发与前端开发本身的发展前景都是比较不错的,未来的就业空间 ...

  6. web前端开发需要学什么(包含前端学习路线)

    前端开发,做到后面,是可以走很多方向的: 但是要保证后期的平滑过度,前期还是要把一些必须的知识搞扎实的: web前端开发需要学什么 环境搭建 前端环境很好搭建,编辑器+浏览器即可. 浏览器推荐使用 C ...

  7. 网站前端开发必会基础知识有哪些?

    自己工作做得好好的,怎么非要去搞前端?" 很多人离职的时候,可能印象最深的就是爸妈每天说的这句话.起因很简单,就是自己辞了爸妈眼中的"铁饭碗". 他也是如此,毅然辞去了一 ...

  8. 前端开发需要学什么(数据可视化)

    前端开发需要学什么?在大数据的带领下,数据可视化的使用越来越广泛.那么实现HTML5的数据可视化技术有哪些? 数据可视化就是采用计算机图形处理技术将数据转换成图形或图像显示出来.图像是最直观的东西,人 ...

  9. Web前端开发要学多久?需要学些什么?

    对于很多没有接触过web前端的小白来说,只知道前端就是网页,前端就是大家看到的页面,可对于想要转行或者进入前端的同学,他们更关心web前端学什么,要学多久,下面和千锋广州小编一起来看看吧! 1.前端开 ...

最新文章

  1. android路由器 设备数,手机查看wifi连接人数_手机查看wifi连接设备数量-192路由网...
  2. spss数据分析可以被人工智能替换吗
  3. 随机森林之oob error 估计
  4. Cisco设备做流量监控的方法
  5. 【Python】Paramiko模块在Windows10中import ssl报错的处理方法
  6. java 1.8 121,CentOS6.8(64位)安装JDK1.8.0_121
  7. python Supervisor
  8. springboot定时删除log4j_SpringBoot整合log4j2进行日志配置及防坑指南
  9. BZOJ1114 : [POI2008]鲁滨逊逃生Rob
  10. OD点击寄存器变色OD
  11. 神通数据库常见问题解决方案
  12. dnf最新地图编号2020_《DNF》2020搬砖地图有哪些
  13. 中国教育和科研计算机网 吉林省,吉林大学—41核心节点—热烈庆祝中国教育和科研计算机网CERNET建设20周年—中国教育和科研计算机网CERNET...
  14. 针孔相机模型,鱼眼相机模型,单目标定
  15. 【5G核心网】5GC核心网之网元UDM
  16. OpenERP-指定动作视图
  17. 程序员菜谱3中粥做法
  18. JDK内置命令行工具
  19. 名片识别信息分类python_基于Python的智能名片识别接口调用代码实例
  20. Android, 省市县三级联动

热门文章

  1. PHP之Session与Cookie:存放 安全 应用场景 过期设定 依赖关系
  2. MySQL主从复制的原理:IO用于交互 SQL用于解析执行;主bin-log 从relay-log;
  3. Ajax同步调用 异步排序
  4. fortify安装_Rjava的安装
  5. 与孩子一起学编程python_与的解释|与的意思|汉典“与”字的基本解释
  6. 蓝牙驱动卸载后自动安装_智能产品 | 安装水循环系统后,全自动洗车机洗车会更节水吗?...
  7. mysql set schema_Mysql数据库优化学习之一 Schema优化
  8. 八代i7装服务器系统2012,八代I7能装win7系统吗,会影响性能吗-8代win7,8代cpu完美装win7...
  9. python 会计专用格式_python-2.7 – 如何使用xlsxwriter将格式应用为“文本”和“会计”...
  10. android usb host hid,Android USB Host与HID通讯