ES6基础教程

2019年12月06日 阅读数:326
这篇文章主要向大家介绍ES6基础教程,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

学习ES6的前置知识:html

  1. 熟练掌握ES5的知识:由于ES6只是ES5的升级,因此你必须对ES5的基本语法达到熟练的程度,若是你还不了解ES5的基本语法,仍是脚踏实地从头开始。
  2. 了解ES6:据说并在工做学习中见过ES6,并了解ES6的用途。

第1节:ES6的开发环境搭建

工欲善其事,必先利其器。因此咱们第1节就是搭建一个基本的ES6开发环境。如今的Chrome浏览器已经支持ES6了,可是有些低版本的浏览器仍是不支持ES6的语法,这就须要咱们把ES6的语法自动的转变成ES5的语法。若是你听过我Vue课程的话,应该知道Webpack是有自动编译转换能力的,除了Webpack自动编译,咱们还能够用Babel来完成。这节课咱们就使用Babel把ES6编译成ES5。前端

创建工程目录:

先创建一个项目的工程目录,并在目录下边创建两个文件夹:srcdistvue

  • src:书写ES6代码的文件夹,写的js程序都放在这里。
  • dist:利用Babel编译成的ES5代码的文件夹,在HTML页面须要引入的时这里的js文件。

编写index.html:

文件夹创建好后,咱们新建一个index.html文件。java

须要注意的是在引入js文件时,引入的是dist目录下的文件。webpack

编写index.js

在src目录下,新建index.js文件。这个文件很简单,咱们只做一个a变量的声明,并用console.log()打印出来。git

咱们用了let声明,这里let是ES6的一种声明方式,接下来咱们须要把这个ES6的语法文件自动编程成ES5的语法文件。程序员

初始化项目

在安装Babel以前,须要用npm init先初始化咱们的项目。打开终端或者经过cmd打开命令行工具,进入项目目录,输入下边的命令:es6

-y表明所有默认赞成,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件。github

能够根据本身的须要进行修改,好比咱们修改name的值。web

全局安装Babel-cli

在终端中输入如下命令,若是你安装很慢的话,可使用淘宝镜像的cnpm来进行安装。安装cnpm的方法,你们本身百度吧。

虽然已经安装了babel-cli,只是这样还不能成功进行转换,若是你不相信能够输入下边的命令试一下。

你会发现,在dist目录下确实生产了index.js文件,可是文件并无变化,仍是使用了ES6的语法。由于咱们还须要安装转换包才能成功转换,继续往下看吧。

本地安装babel-preset-es2015 和 babel-cli

安装完成后,咱们能够看一下咱们的package.json文件,已经多了devDependencies选项。

新建.babelrc

在根目录下新建.babelrc文件,并打开录入下面的代码

这个文件咱们创建完成后,如今能够在终端输入的转换命令了,此次ES6成功转化为ES5的语法。

简化转化命令:

在学习vue 的时候,可使用npm run build 直接利用webpack进行打包,在这里也但愿利用这种方式完成转换。打开package.json文件,把文件修改为下面的样子。

修改好后,之后咱们就可使用 npm run build 来进行转换了。

第2节:新的声明方式

经过上节课的学习咱们已经能够愉快的写代码了。在文章开始以前,我仍是要强调一件事情:你们必定要亲自动手敲代码,学习编程这个事儿,不本身动手练习是学不会的。若是你上节课尚未搭建好,你仍是先把环境搭建好,再学习这节课。

之前咱们在声明时只有一种方法,就是使用var来进行声明,ES6对声明的进行了扩展,如今能够有三种声明方式了。

字面理解ES6的三种声明方式:

  1. var:它是variable的简写,能够理解成变量的意思。
  2. let:它在英文中是“让”的意思,也能够理解为一种声明的意思。
  3. const:它在英文中也是常量的意思,在ES6也是用来声明常量的,常量你能够简单理解为不变的量。

var声明:

var在ES6里是用来升级全局变量的,咱们能够先做一个最简单的实例,用var声明一个变量a,而后用console.log进行输出。

咱们能够看到JSPang在控制台已经被打印出来了。那如何理解它的做用是声明全局变量那?咱们用匿名函数给他进行一个包裹,而后在匿名函数中调用这个a变量,看看能不能调用到。

能够看到控制台输出了JSPang,这证实var确实是全局的。若是你觉的这个不够直观说明var是全局声明,还能够用区块的方式进行调用测试,先看下面的代码。

这时打印出来的值是多少呢?对,应该是3,由于var是全局声明的,会覆盖上面声明的a变量。

let局部声明

经过两个简单的例子,咱们对var的全局声明有了必定了解。那跟var向对应的是let,它是局部变量声明。仍是上面的例子,咱们试着在区块里用let声明。

这时候控制台打印出来的值就是2了。若是咱们只在区块里声明,再也不外部声明,咱们打印a时就会报错,显示找不到变量。

上面两个例子说明了let是局部变量声明,let声明只在区块内起做用,外部是不能够调用的。

有些刚接触JavaScript的小伙伴会疑惑了,我感受let尚未var好用,其实let是防止你的数据污染的,在大型项目中是很是有用处的。如今看一个循环的例子,咱们来看一下let的好处。

用var声明的循环

你会发现循环体外的i变量被污染了,若是在外部再使用i时就会出现问题,这是开发者不想看到的。咱们再利用let声明,就能够解决这个问题。

用let声明的循环

你执行时会发现控制台报错了,找不到循环体外的i变量。经过两种声明的比较,能够明白let在防止程序数据污染上仍是颇有用处的。咱们要努力去习惯用let声明,减小var声明去污染全局空间,在vue的使用中也要注意这点。

const声明常量

在程序开发中,有些变量是但愿声明后在业务层就再也不发生变化了,简单来讲就是从声明开始,这个变量始终不变,就须要用const进行声明。

咱们来一段用const声明错误的代码,在错误中学习const的特性也是很是好的。

在编译这段代码的过程当中,你就会发现已经报错,没法编译了,缘由就是咱们const声明的变量是不能够改变的。const是很好理解的,我就不做过多的解释说明了。

这节课咱们学了ES6的3种声明方式,var、let、const,这三种方式各有所长,既然已经学习了新技术,咱们就要拥抱它,试着在你的项目中根据状况用let和const进行声明吧,不要再只使用var了。

下节课咱们将讲解数据的解构,很高兴你能和我一块儿学习,成长为更好的本身。

第3节:变量的解构赋值

ES6容许按照必定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在实际开发中能够大量减小咱们的代码量,而且让咱们的程序结构更清晰。也许你仍是不太明白,那先来一个最简单的数组解构赋值来进行赋值。

数组的解构赋值:

简单的数组解构:

之前,为变量赋值,咱们只能直接指定值。好比下面的代码:

而如今咱们能够用数组解构的方式来进行赋值。

上面的代码表示,能够从数组中提取值,按照位置的对象关系对变量赋值。

数组模式和赋值模式统一:

能够简单的理解为等号左边和等号右边的形式要统一,若是不统一解构将失败。

若是等号两边形式不同,极可能得到undefined或者直接报错。

解构的默认值

解构赋值是容许你使用默认值的,先看一个最简单的默认是的例子。

上边的例子数组中只有一个值,可能你会多少有些疑惑,咱们就来个多个值的数组,并给他一些默认值。

如今咱们对默认值有所了解,须要注意的是undefinednull的区别。

undefined至关于什么都没有,b是默认值。

null至关于有值,但值为null。因此b并无取默认值,而是解构成了null。

对象的解构赋值

解构不只能够用于数组,还能够用于对象。

注意:对象的解构与数组有一个重要的不一样。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

圆括号的使用

若是在解构以前就定义了变量,这时候你再解构会出现问题。下面是错误的代码,编译会报错。

要解决报错,使程序正常,咱们这时候只要在解构的语句外边加一个圆括号就能够了。

字符串解构

字符串也能够解构,这是由于,此时字符串被转换成了一个相似数组的对象。

 

总结:这节课的内容很简单,可是也有一些细节须要注意,但愿你能动手把解构练习一遍,在实战项目中解构Json数据格式仍是很广泛的,有了ES6得帮助,提升了很多工做效率。

第4节:扩展运算符和rest运算符

上节课学的解构已经能够大大增长咱们的开发效率,这节课咱们学习扩展运算符和rest运算符,它们都是…(三个点)。它们能够很好的为咱们解决参数和对象数组未知状况下的编程,让咱们的代码更健壮和简洁。

对象扩展运算符(…):

当编写一个方法时,咱们容许它传入的参数是不肯定的。这时候可使用对象扩展运算符来做参数,看一个简单的列子:

这时咱们看到控制台输出了 1,2,3,undefined,这说明是能够传入多个值,而且就算方法中引用多了也不会报错。

扩展运算符的用处:

咱们先用一个例子说明,咱们声明两个数组arr1和arr2,而后咱们把arr1赋值给arr2,而后咱们改变arr2的值,你会发现arr1的值也改变了,由于咱们这是对内存堆栈的引用,而不是真正的赋值。

控制台输出:

这是咱们不想看到的,能够利用对象扩展运算符简单的解决这个问题,如今咱们对代码进行改造。

如今控制台预览时,你能够看到咱们的arr1并无改变,简单的扩展运算符就解决了这个问题。

rest运算符

若是你已经很好的掌握了对象扩展运算符,那么理解rest运算符并不困难,它们有不少类似之处,甚至不少时候你不用特地去区分。它也用…(三个点)来表示,咱们先来看一个例子。

这时候控制台打印出了7,说明咱们arg里有7个数组元素,这就是rest运算符的最简单用法。

如何循环输出rest运算符

这里咱们用for…of循环来进行打印出arg的值,咱们这里只是简单使用一下,之后咱们会专门讲解for…of循环。

for…of的循环能够避免咱们开拓内存空间,增长代码运行效率,因此建议你们在之后的工做中使用for…of循环。有的小伙伴会说了,反正最后要转换成ES5,没有什么差异,可是至少从代码量上咱们少打了一些单词,这就是开发效率的提升。

总结:咱们这节课学习了对象扩展运算符和reet运算符,它们两个仍是很是相似的,可是你要本身区分,这样才能在工做中运用自如。在之后的课程中还会有不少关于扩展运算符和rset运算符的妙用,让咱们一块儿期待吧。

第5节:字符串模版

这节咱们主要学习ES6对字符串新增的操做,最重要的就是字符串模版,字符串模版的出现让咱们不再用拼接变量了,并且支持在模板里有简单计算操做。小伙伴们是否是已经摩拳擦掌等不急了那?那咱们就开始吧。

字符串模版

先来看一个在ES5下咱们的字符串拼接案例:

ES5下必须用+jspang+这样的形式进行拼接,这样很麻烦并且很容易出错。ES6新增了字符串模版,能够很好的解决这个问题。字符串模版再也不使用‘xxx’这样的单引号,而是换成了xxx这种形式,也叫链接号。这时咱们再引用jspang变量就须要用${jspang}这种形式了,咱们对上边的代码进行改造。

能够看到浏览器出现了和上边代码同样的结果。并且这里边支持html标签,能够试着输入一些。

对运算的支持:

强大的字符串模版,在实际开发中,咱们可让后台写一个活动页面,而后轻松的输出给用户。

字符串查找

ES6还增长了字符串的查找功能,并且支持中文哦,小伙伴是否是很兴奋。仍是拿上边的文字做例子,进行操做。

查找是否存在:

先来看一下ES5的写法,其实这种方法并不实用,给咱们的索引位置,咱们本身还要肯定位置。

这是网页中输出了20,咱们还要本身判断。

ES6直接用includes就能够判断,再也不返回索引值,这样的结果咱们更喜欢,更直接。

判断开头是否存在:

判断结尾是否存在:

须要注意的是:starts和ends 后边都要加s,我开始时常常写错,但愿小伙伴们不要采坑。

复制字符串

咱们有时候是须要字符串重复的,好比分隔符和特殊符号,这时候复制字符串就派上用场了,语法很简单。

固然ES6对字符串还有一些其它操做,由于实际工做中不太使用,这里就不做太多的介绍了。但愿你能动手练习一下,并把这些新特性应用到工做中,不然可能很快就忘记了。

 

第6节:ES6数字操做

前端编程工做中对数字的操做是很是多的,若是你对数字操做的很差,就很难写出使人惊奇的程序,因此咱们这节课重点学习一下ES6新增的一些数字操做方法。

二进制和八进制

二进制和八进制数字的声明并非ES6的特性,咱们只是作一个常识性的回顾,由于不少新人小伙伴会把他们当成字符串或者不知道是什么,因此这算是赠送的知识点。

二进制声明:

二进制的英文单词是Binary,二进制的开始是0(零),而后第二个位置是b(注意这里大小写均可以实现),而后跟上二进制的值就能够了。

这时候浏览器的控制台显示出了21。

八进制声明:

八进制的英文单词是Octal,也是以0(零)开始的,而后第二个位置是O(欧),而后跟上八进制的值就能够了。

这时候浏览器的控制台显示出了438。

数字判断和转换

数字验证Number.isFinite( xx )

可使用Number.isFinite( )来进行数字验证,只要是数字,不管是浮点型仍是整形都会返回true,其余时候会返回false。

NaN验证

NaN是特殊的非数字,可使用Number.isNaN()来进行验证。下边的代码控制台返回了true。

判断是否为整数Number.isInteger(xx)

整数转换Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx)

整数取值范围操做

整数的操做是有一个取值范围的,它的取值范围就是2的53次方。咱们先用程序来看一下这个数字是什么.

在咱们计算时会常常超出这个值,因此咱们要进行判断,ES6提供了一个常数,叫作最大安全整数,之后就不须要咱们计算了。

最大安全整数

最小安全整数

安全整数判断isSafeInteger( )

 

总结:这节课咱们学习了ES6数字的操做,方法不少,很零散,须要常常复习或者实战中慢慢熟悉。

第7节:ES6中新增的数组知识(1)

JSON数组格式转换

JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式,咱们先来看一下JSON的数组格式怎么写。

这就是一个标准的JSON数组格式,跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式均可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的Array操做都存在于Array对象里。咱们就用Array.from(xxx)来进行转换。咱们把上边的JSON代码转换成数组,并打印在控制台。

实际开发中这种方法仍是比较经常使用的,毕竟节省了咱们代码行数,也让咱们的程序更清晰。

Array.of()方法:

它负责把一堆文本或者变量转换成数组。在开发中咱们常常拿到了一个相似数组的字符串,须要使用eval来进行转换,若是你一个老手程序员都知道eval的效率是很低的,它会拖慢咱们的程序。这时候咱们就可使用Array.of方法。咱们看下边的代码把一堆数字转换成数组并打印在控制台上:

固然它不只能够转换数字,字符串也是能够转换的,看下边的代码:

find( )实例方法:

所谓的实例方法就是并非以Array对象开始的,而是必须有一个已经存在的数组,而后使用的方法,这就是实例方法(不理解请看下边的代码,再和上边的代码进行比对,你会有所顿悟)。这里的find方法是从数组中查找。在find方法中咱们须要传入一个匿名函数,函数须要传入三个参数:

  • value:表示当前查找的值。
  • index:表示当前查找的数组索引。
  • arr:表示当前数组。

在函数中若是找到符合条件的数组元素就进行return,并中止查找。你能够拷贝下边的代码进行测试,就会知道find做用。

控制台输出了6,说明找到了符合条件的值,并进行返回了,若是找不到会显示undefined。

第8节:ES6中新增的数组知识(2)

fill( )实例方法:

fill()也是一个实例方法,它的做用是把数组进行填充,它接收三个参数,第一个参数是填充的变量,第二个是开始填充的位置,第三个是填充到的位置。

上边的代码是把数组从第二位到第五位用jspang进行填充。

数组的遍历

for…of循环:

这种形式比ES5的for循环要简单并且高效。先来看一个最简单的for…of循环。

for…of数组索引:有时候开发中是须要数组的索引的,那咱们可使用下面的代码输出数组索引。

能够看到这时的控制台就输出了0,1,2,也就是数组的索引。

同时输出数组的内容和索引:咱们用entries()这个实例方法,配合咱们的for…of循环就能够同时输出内容和索引了。

entries( )实例方法:

entries()实例方式生成的是Iterator形式的数组,那这种形式的好处就是可让咱们在须要时用next()手动跳转到下一个值。咱们来看下面的代码:

总结:咱们经过两节课讲了ES6对数组的扩展,数组在咱们的实际开发中是特别重要的,几乎我天天都要编写数组的操做代码,因此这节课必定要在听完以后本身敲一遍代码。

第9节:ES6中的箭头函数和扩展

这节课开始,先不着急看ES6中的函数,而是回顾一下ES5中的函数写法。写一个函数,进行一个加法计算。

咱们声明了一个add函数,而后传入a和b两个值,返回a+b的值。 而后咱们在控制台打印了这个函数的返回结果,这里是3.

默认值

在ES6中给咱们增长了默认值的操做,咱们修改上边的代码,能够看到如今只须要传递一个参数也是能够正常运行的。

主动抛出错误

在使用Vue的框架中,能够常常看到框架主动抛出一些错误,好比v-for必须有:key值。那尤大神是如何作到的那?其实很简单,ES6中咱们直接用throw new Error( xxxx ),就能够抛出错误。

函数中的严谨模式

咱们在ES中就常用严谨模式来进行编程,可是必须写在代码最上边,至关于全局使用。在ES6中咱们能够写在函数体中,至关于针对函数来使用。

上边的代码若是运行的话,你会发现浏览器控制台报错,这是ES6中的一个坑,若是没人指导的话,可能你会陷进去一会。这个错误的缘由就是若是你使用了默认值,再使用严谨模式的话,就会有冲突,因此咱们要取消默认值的操做,这时候你在运行就正常了。

得到须要传递的参数个数

若是你在使用别人的框架时,不知作别人的函数须要传递几个参数怎么办?ES6为咱们提供了获得参数的方法(xxx.length).咱们用上边的代码看一下须要传递的参数个数。

这时控制台打印出了2,可是若是咱们去掉严谨模式,并给第二个参数加上默认值的话,这时候add.length的值就变成了1, 也就是说它获得的是必须传入的参数。

箭头函数

在学习Vue的时候,我已经大量的使用了箭头函数,由于箭头函数真的很好用,咱们来看一个最简单的箭头函数。也就是上边咱们写的add函数,进行一个改变,写成箭头函数。