前端基础进阶(14):es6常用基础合集

 

ES6基础智商划重点

尽管我们在实际开发中,想要使用ES6还是必须使用babel编译之后才能使用,但是ES6仍然已经非常普及了,可以说是大多数听说过前端的朋友都已经知道ES6,并且大多数人已经开始在使用ES6来进行学习和工作。

ES6彻底改变了前端的编码风格,可是说对于前端的影响非常巨大。但是值得高兴的是,如果你熟悉ES5,学习ES6并不需要花费太多的时间就可以掌握,因为常用的基础语法并不多,我们花少量的时间,就可以开始自己的ES6之旅了。

这篇文章不会详细的告诉你ES6的每一个细节知识,只会根据我自己的开发经验,将我在实际开发中常常用到的知识点分享给大家,给大家学习ES6一个方向的指引。否则很多同学也不知道自己需要掌握那些ES6的知识,也不知道这些知识需要掌握到什么程度,ES6大家都在说还算简单,这也造成了许多人的更加迷茫,因此这篇文章就算是一个划重点吧,掌握这些,就可以轻轻松松的去学习react/vue了。

在学习之前,推荐大家使用babel官方提供的在线编译工具,编写自己的demo,会在右侧实时显示出编译之后的代码,以供参考学习 http://babeljs.io/repl/

一、新的变量声明方式 let/const

与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升。

通过2个简单的例子来说明这两点。

而这个简单的例子,会被编译为:

变量提升demo示例

当然,如果你的代码编译成为了ES5之后,仍然会存在变量提升,因此这一点只需要我们记住即可。我们在实际使用中,也需要尽量避免使用变量提升的特性带来的负面影响。对于变量提升的滥用,只存在与面试题中。

使用ES6,我们需要全面使用let/const替换var,那么什么时候用let,什么时候用const就成为了一个大家要熟练区分的一个知识点。

我们常常使用let来声明一个值会被改变的变量,而使用const来声明一个值不会被改变的变量

当值为基础数据类型时,那么这里的值,就是指值本身。
而当值对应的为引用数据类型时,那么我这里说的值,则表示指向该对象的引用。这里需要注意,正因为该值为一个引用,重要保证引用不变就可以,我们仍然可以改变该引用所指向的对象。

当我们试图改变const声明的变量时,则会报错。

写几个例子,大家可以仔细揣摩一下:

只要抓住上面我说的特性,那么在使用let/const时就会显得游刃有余。
根据我自己的经验,使用const的场景要比使用let的场景多很多。

二、 箭头函数的使用

之前我说ES6颠覆了js的编码习惯,箭头函数的使用占了很大一部分。

首先是写法上的不同:

箭头函数可以替换函数表达式,但是不能替换函数声明

其次还有一个至关重要的一点,那就是箭头函数中,没有this。如果你在箭头函数中使用了this,那么该this一定就是外层的this。

也正是因为箭头函数中没有this,因此我们也就无从谈起用call/apply/bind来改变this指向。记住这个特性,能让你在react组件之间传值时少走无数弯路。

在ES6中,会默认采用严格模式,因此this也不会自动指向window对象了,而箭头函数本身并没有this,因此this就只能是undefined,这一点,在使用的时候,一定要慎重慎重再慎重,不然踩了坑你都不知道自己错在哪!这种情况,如果你还想用this,就不用使用箭头函数的写法。

先记住箭头函数的写法,并留意箭头函数中关于this的特殊性,更过实践与注意事项我们在封装react组件时再慢慢来感受。

三、模板字符串

模板字符串是为了解决使用+号拼接字符串的不便利而出现的。它的功能非常强大,但是我们大多数时候使用它则非常简单。看一个例子大家就明白怎么使用了。

使用 整个字符串包裹起来,而在其中使用 ${} 来包裹一个变量或者一个表达式。

当然模板字符串还支持换行等强大的功能,更多的大家可通过参考资料进一步学习。

四、 解析结构

解析结构是一种全新的写法,我们只需要使用一个例子,大家就能够明白解析结构到底是怎么一回事儿。

当我们想要取得其中的2个值:loading与clicked时:

是不是简单了许多?正是由于解析结构大大减少了代码量,因此它大受欢迎,在很多代码中它的影子随处可见。

另外,数组也有属于自己的解析结构。

数组以序列号一一对应,这是一个有序的对应关系。
而对象根据属性名一一对应,这是一个无序的对应关系。
根据这个特性,使用解析结构从对象中获取属性值更加具有可用性。

五、 函数默认参数

之前我们不能直接为函数指定默认参数,因此很多时候为了保证传入的参数具备一个默认值,我们常常使用如下的方法:

这种方式并不是没有缺点,比如当我传入一个x值为false,这个时候任然会取到默认值,就不是我们的本意了。

来看看ES6的默认值写法:

在实际开发中给参数添加适当的默认值,可以让我们堆函数的参数类型有一个直观的认知。

六、 展开运算符

在ES6中用...来表示展开运算符,它可以将数组方法或者对象进行展开。先来看一个例子它是如何使用的。

当然,展开对象数据也是可以得到类似的结果

展开运算符还常常运用在解析结构之中,例如我们在Raect封装组件的时候常常不确定props到底还有多少数据会传进来,就会利用展开运算符来处理剩余的数据。

展开运算符还用在函数的参数中,来表示函数的不定参。只有放在最后才能作为函数的不定参,否则会报错。

展开运算符的运用可以大大提高我们的代码效率,但是在刚开始使用的时候比较绕脑,掌握好了用起来还是非常爽的,记住这些使用场景,平时在用的时候可以刻意多运用就行了。

七、 类 Class
八、 模块 Modules

深入学习ES6推荐 http://es6.ruanyifeng.com/

暂时先写到这里,太困了 ~ ~,更多的明天下班继续补充

1 3 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部