写的更少,做的更多的JavaScript ES6 

近年来Javascript得到了飞速的发展,越来越多的新特性、新语法和新功能的出现,它能够让你的代码更现代化,更易读,它允许我们以更少的代码来完成更多的功能。ES6向我们介绍了许多强大的功能,如箭头函数、模板字符串、Class和模块……等等,虽然功能很强大,但是也需要学习成本,如果从头开始学无疑会浪费很多时间,本篇介绍了在开发中常用的新特性,一起看看吧

JavaScript ES6 ——写的更少,做的更多,一文了解ES6


const和let

const是ES6中用于声明变量的新关键字,声明后无法在重新分配变量。换句话说,它是一个不可变的变量,除非是和对象一起使用,如下代码,当试图更改const声明的变量b则会报错

JavaScript ES6 ——写的更少,做的更多,一文了解ES6

const和var

let声明的变量是可变变量,如下图,const的作用域与let命令相同,都是只在声明所在的块级作用域内有效

JavaScript ES6 ——写的更少,做的更多,一文了解ES6


箭头函数

箭头函数是我用上之后感觉就是更具结构性、更现代化,对比ES5和ES6,如下图

JavaScript ES6 ——写的更少,做的更多,一文了解ES6


此外还可以使用内置的箭头函数map、filter、reduce,如下map对比

JavaScript ES6 ——写的更少,做的更多,一文了解ES6


模板字符串

模板字符串是我现在用到最多的功能,上图中的箭头函数已经用到了模板字符串的功能,有了它你在也不用写一堆‘+’号了,以下是ES5和ES6的对比

JavaScript ES6 ——写的更少,做的更多,一文了解ES6


我通常最多是在写拼接html的时候使用,给我的感觉是更有条理,结构更清晰;

默认参数(参数默认值)

我们先来看一个例子,下面的age没有传,是undefined

JavaScript ES6 ——写的更少,做的更多,一文了解ES6


我们来设置一个默认值,现在就能返回正确结果了

JavaScript ES6 ——写的更少,做的更多,一文了解ES6


数组和对象解构赋值

  • 对象解构
JavaScript ES6 ——写的更少,做的更多,一文了解ES6


你还可以重命名对象名称

JavaScript ES6 ——写的更少,做的更多,一文了解ES6


  • 数组解构
JavaScript ES6 ——写的更少,做的更多,一文了解ES6


Promises

Promise是ES6的新特性,目的就是为了更好的异步编程,一般用在请求api的时候,比如axios就是基于Promises的强大的一款http请求库,下面我们自己来创建一个Promise对象

JavaScript ES6 ——写的更少,做的更多,一文了解ES6


下图展示了在请求api时的用法

JavaScript ES6 ——写的更少,做的更多,一文了解ES6


Rest参数和Spread运算符

rest参数用于获取数组的参数,并返回一个新数组,举例说明rest和spread:

JavaScript ES6 ——写的更少,做的更多,一文了解ES6


Class类

类是面向对象编程的核心,看代码(constructor是构造函数)

JavaScript ES6 ——写的更少,做的更多,一文了解ES6


继承

继承父类的方法和属性,使用extends关键字

JavaScript ES6 ——写的更少,做的更多,一文了解ES6


总结

希望能够通过本文来让大家对ES6有个简单的了解,如果想要学习的话,推荐大家阅读阮一峰大神的免费电子教程,网上搜索即可。这里祝大家早日脱坑,学什么会什么,早日实现自己的目标,如果觉得此文对你有帮助,麻烦点一下关注,谢谢!

声明:本站发布的内容以原创、转载、分享网络内容为主,如有侵权,请联系电话:021-51697771-8029,邮箱:mj@cndns.com ,我们将会在第一时间删除。文章观点不代表本站立场,如需处理请联系我们。

热门TAG

热门视频