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

JavaScript ES6 ——写的更少,做的更多,一文了解ES6近年来Javascript得到了飞速的发展,越来越多的新特性、新语法和新功能的出现,它能够让你的代码更现代化,更易读,它允许我们以更少的代码来完

欢迎大家来到IT世界,在知识的湖畔探索吧!

近年来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有个简单的了解,如果想要学习的话,推荐大家阅读阮一峰大神的免费电子教程,网上搜索即可。这里祝大家早日脱坑,学什么会什么,早日实现自己的目标,如果觉得此文对你有帮助,麻烦点一下关注,谢谢!

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/50119.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信