九个前端开发必学超级实用的es6特性

JackieDYH JackieDYH     2023-01-11     355

关键词:

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特性(代码片段)

1、展开操作符顾名思义,用于对象或数组之前的展开操作符(…),将一个结构展开为列表。演示一下:letfirstHalf=[one,two];letsecondHalf=[three,four,...firstHalf]; 这种写法够优雅,够简洁吧?如果不用展开操作符我们得这么写:... 查看详情

es6前端必学es6,看完掌握新特性(代码片段)

文章目录1.ES6rest参数2.ES6扩展运算符2.1ES6简介2.2应用3.ES6Symbol数据类型3.1Symbol两种创建方式3.2Symbol注意事项7个数据类型3.3给对象,添加Symbol的两种属性4.Symbol内置属性4.1hasInstance与instanceof4.2isConcatSpreadable与concat4.3其他Symbol的内... 查看详情

前端开发者不得不知的es6十大特性

前端开发者不得不知的ES6十大特性转载作者:AlloyTeam链接:http://www.alloyteam.com/2016/03/es6-front-end-developers-will-have-to-know-the-top-ten-properties/ ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新... 查看详情

适合前端开发者的一些超级实用小工具及网站合集

本篇文章用于像大家分享一些前端开发者必备的一些工具和网站,目前推荐的较少,但会持续更新~也欢迎各位大佬在评论区下留下你觉得前端人员必备的一些工具或网站等。一、工具1.SnipasteSnipaste是一个简单但强大的截... 查看详情

es6实用新特性(代码片段)

兼容性http://kangax.github.io/compat-table/es5/http://kangax.github.io/compat-table/es6/ES6(ES2015)兼容环境:IE10以上,Chrome、FireFox、移动端、NodeJS在低版本环境中使用的解决方案:1在线转换brower.js2提前编译ES6新特性变量函数数组字符串面向对象Prom... 查看详情

前端开发必学的技术都有哪些?

前端开发必学的技术有哪些这里给大家整理了一份系统全面的前端学习路线,主要掌握以下技术:第一阶段:专业核心基础阶段目标:1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布... 查看详情

前端知识总结--es6新特性(代码片段)

 ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。整理下ES6的新特性,具体用... 查看详情

web前端技巧-es6新特性与重点知识汇总

前端开发使用ES6框架已经不是什么新鲜的事情了,现如今也有越来越多的同学选择使用它,但随着ES6的更新迭代,一些新的特性很多同学并不了解,今天小千就来给大家介绍一下,记得收藏一下啦。一、ES6变... 查看详情

atititjses5es6新特性attilax总结

...hromeff360se8全面支持了22.ECMAScript2015(ES6)的十大特征–WEB前端开发-专注前端开发,关注用户体验.html2 1.1. J 查看详情

前端知识|简析es6

CMAScript6简介:CMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。刚开始使用vue或者react,很多时候我们... 查看详情

apicloud开发者进阶之路|超级实用技巧

...惯例,柚子君还是要督促大家充充电的!本周《30天,App开发从0到1》将要给大家分享第十章超级实用技巧,我们精选了其中的一个章节--地图模块的实用扩展:在地图上添加自定义按钮,一起来学习吧。主要内容本章将向读者介... 查看详情

web前端技巧-es6新特性与重点知识汇总

ES6的新特性到这里就是第三期了也是最后一期,今天我们将把剩余的几个ES6特性介绍完毕,希望能够给同学带来帮助,还是带好小本本我们开始了。十三、PromisePromise是异步编程的一种解决方案,比传统的解决方... 查看详情

前端开发-html

前端必学的:html文本css装饰js<javascript>动态效果http协议:超文本传输协议用来规定服务端和浏览器之间数据交互的格式**四大特性:**1.基于请求响应2.基于tcp/ip作用于应用层之上的协议3.无状态不保存用户的信息4.无/短连接... 查看详情

前端开发-html

前端必学的:html文本css装饰js<javascript>动态效果http协议:超文本传输协议用来规定服务端和浏览器之间数据交互的格式**四大特性:**1.基于请求响应2.基于tcp/ip作用于应用层之上的协议3.无状态不保存用户的信息4.无/短连接... 查看详情

34.js开发者必须知道的十个es6新特性

JS开发者必须知道的十个ES6新特性这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序):默认参数模版表达式多行字符串拆包表达式改进的对象表达式箭头函数 =&>Promise块级作用域的let和const类模块化注意:这... 查看详情

web前端技巧-es6新特性与重点知识汇总

ES6框架的新特性我们今天再来介绍其他的一些,还是带好写本本做好笔记,我们马上开始。七、扩展运算符扩展运算符(spread)是三个点(…)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的... 查看详情

es6丨前端进阶基础es6的关键字,新特性以及解构赋值(代码片段)

💂个人主页:Aic山鱼  个人社区:山鱼社区💬如果文章对你有所帮助请点个👍吧!欢迎关注、点赞、收藏(一键三连)和订阅专目录前言什么是ecmascrpit一,let关键字的特点1.不能重复声明变量 2.块级作用域3... 查看详情

时隔许久,精心整理的超级实用的web前端面试题总结后续来啦(代码片段)

文章目录Web前端面试题总结(二)JavaScript篇1、JavaScript是一门什么样的语言,它有哪些特点?2、javascript的本地对象,内置对象和宿主对象?3、js的内置对象有哪些?列举一下arry和string的常用方法?... 查看详情