ES6笔记

175 阅读6分钟

      ES6发布已经有一段时间了,新标准的推出解决了ES2015的大量痛点问题,因此ES6一经推出就受到了热烈的追捧。本着对技术的追求我也学习了ES6中常用的用来解决以往js中痛点的常用部分,学习有一段时间了有点感觉,写此总结以备以后回顾知识。

1.变量

1.变量声明方式以及作用域

在以往变量的声明是var,在ES6中声明的方式为let,const。

作用域:ES6之前的为全局作用域和函数作用域,ES6提出了块级作用域。

块级作用域的范围{}

例如:

在这个例子中

但是如果

所以可以明显的看出在if(){},for(){}...等中的{}如果我们使用let,来定义变量就不会污染全局。

2.ES6之前存在变量提升,ES6之后不存在变量提升

我们知道在ES6之前,我们在一个变量定义的前面使用一个变量并不会报错,只是

这是因为变量提升的作用会使var b;存在console.log(b)之前,赋值在console.log(b)语句之后,所以只会报undefined而不会报错。

但是在使用let定义之后提升取消了所以当我们这时使用变量时会报错,有人认为这是js的特性,但是如果代码量达到一定的量级,我们可能由于变量的使用不当出现一些莫名其妙的问题,所以为了项目的可维护性使用let,是一个必然的选择。

3.ES6之前同一个变量可以重复定义,ES6之后使用let不存在这种现象

这个改变带来的好处是在项目的代码量过大,我们已经记不起来已经定义了哪些变量的情况下可以让让我们知道在同一个作用域中变量是否被定义过。

4.const

const和let的特性一样但是const被定义时必须赋值且不能被修改。

但是有一种用法要注意

有人可能会问不是说不能被修改吗?这是因为这是数组对象的特性所以用的时候要注意。

2.解构赋值

大家别急来个例子先

有人可能会说嗯这个特性还好,减少变量定义时的代码量。

我想说的是解构赋值确实可以减少代码量但是更为重要的一点是当我们和后台交互时往往传递的是json字符串,如果我们能够合理有效的利用解构赋值的话可以大大减少我们解析数据时的工作量,解构赋值的用法比较灵活,如果大家有复杂的数据需要解析时可以尝试尝试用解构赋值的做法来做,说不定你会爱上解构赋值哦!

3.字符串模板

对于字符串模板我要说三遍:字符串模板!字符串模板!字符串模板!

好了,应该记住了。

ES6中字符串模板的出现解决了ES6之前的一大痛点问题,字符串的拼接,字符串和变量的连接,之前的做法是一大堆的''和+的组合不仅让人头大还容易出错,但

是不是要飞了的节奏,ES6的字符串模板真的是巨大的提升,就算只是为了字符串模板投入到ES6也赚了呀!

字符串模板的基础用法就是上面这样,最常用的也是这种形式,如果大家为了日常的使用学会上面的用法即可。

4.函数的变化

来个例子先

箭头函数在代码量上有微量的减少,用法也变得灵活了一点,不过最大的改变是解决了this的指向这一痛!痛!痛!点问题。

ES6之前this的指向大致有以下几类:

1.指向全局对象window

2.指向其它的情况

var btn = document.querySelector("button");btn.onclick = function () {console.log(this) btn}

此时指向绑定的对象btn

关于this的指向问题一直是js开发中的一个痛点,我们经常会因为this的指向出现一些奇怪的bug.

而ES6中函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

同时箭头函数中没有arguments而是...

但是箭头函数并不能作为构造函数。

5.模块化

最先接触js中的模块化是在node中CommonJs,AMD规范等,ES6中的模块化我真正理解和熟练起来是在写react中。其实模块化更多的是概念层的理解实现模块化的代码就非常简单了,import..from.., export..

模块化得概念很早就有了,主要是用来解决耦合性问题的,同时使用模块化可以大大的提高代码的利用率。模块化很重要,理解模块化的概念更重要。如果想要理解和熟练应用ES6中的模块化建议多写写react就行了。

6.promise

提到promise更多的是想聊聊解决异步问题。说实话异步问题很恶心,还不太好解决,经常性遇到的问题就是数据没加载过来就去取值或判断了,在node中异步的问题更加的令人绝望,一层又一层的嵌套想想就令人头大,也因此出现了很多用来解决异步问题的小插件。但是到了ES6出现了解决异步问题的一些方法。

1.promise

2.generator.js

使用生成器函数

3.使用async和await

这些都是ES6中新添的用来解决异步问题的解决方案,上面这些例子很少不过阐明了最基本的解决方案,大家遇到异步问题时可以往这方面考虑一下,看看ES6中新添的内容能不能解决我们的需求。

7.扩展运算符

ES6中添加了一些新的运算符,我这里就不一一介绍了,我就来介绍一种我感觉很方便的运算符吧!

话不多说上面的两个例子就够了,是不是用起来很方便。

8.遍历

说到循环遍历可能又是我们在开发中的一大痛点了,循环遍历写的好坏直接影响到程序的性能。ES6对于循环遍历这一块也有新的改进。

不过由于循环遍历经常用到也提提前面的方法吧!

1.every

2.forEach

3.some

4.for...of

关于循环遍历的话题就先提到这里吧,循环遍历需要大家慢慢的去积累。

9.类

说起类大家可能想起来js的辛酸,为了实现类的功能大家搞出了一大波的问题,构造函数,原型,闭包...

不过福音是ES6来了,ES6中类的写法和特性和PHP,Python等没有太大的区别,话不多说来一波例子先。

1.基本写法

2.

3.继承