ES8已经与17年6月底发布,而很多的前端开发者还没有开始用上ES6。本文聊一聊怎么快速入门ES6,并将ES6的语法应用到实战项目中。
阅读全文大约需要15分钟。
文中以 ES 表示 ECMAScript。
今年六月底,TC39发布新一版的ES 8(ES 2017),自从ES6在15年发布之后,每一年TC39都会发布新一版的ES语言标准。
我了解的前端开发者中,还有很多人没有用上ES6,有的人是觉得ES5用的挺好的,懒得去学ES6,有的人是有想学ES6的决心,但是苦于没有合适的机会(项目)去实战练习。
如果你用过React,Vue或Nodejs等,那你多多少少都会使用到一些ES6语法的。
ES8中的新特性,浏览器厂商和语法转换器还需要一段来实现,不如我们还是先聊聊怎么在你的项目中用上ES6吧。
什么是ES6?它和ES5有什么区别?
我们常说的JavaScript是指ES3和ES5,ES6是ECMAScript 6 的缩写。
对于经常写原生JavaScript的前端开发者来说,对ES5中的语法肯定比较熟悉,比如数组中的一些方法forEach,map,filter,some,every,indexOf,lastIndexOf,reduce,reduceRight ……,以及对象(Object)和函数(Function)都拓展了很多方法,这里不多赘叙。
ES6给前端开发者带来了很多的新的特性,可以更简单的实现更复杂的操作,很大的提高开发效率,提高代码的整洁性。
ES6中的新特性有很多,列一些比较常用的特性:
Block-Scoped Constructs Let and Const(块作用域构造Let and Const)
Default Parameters(默认参数)
Template Literals (模板字符串)
Multi-line Strings (多行字符串)
Arrow Functions (箭头函数)
Enhanced Object Literals (增强的对象文本)
Promises
Classes(类)
Modules(模块)
Destructuring Assignment (解构赋值)
下面介绍下这些常用的ES6特性。
Block-Scoped Constructs Let and Const(块作用域构造Let and Const)
ES6提供了两个新的声明变量的关键字:let和const。而let和const要和块级作用域结合才能发挥其优势。
什么是块级作用域?
块级作用域的表示一对大括号{}包围的区域是一个独立的作用域,在这个作用域内用let声明的变量a,只能在这个作用域内被访问到,在这对大括号外面是访问不到a的。
当然,在块级作用域中还可以声明函数,该函数也是只能作用域内部才能被访问到。所以,在if、else、for甚至是一对单独的{},都是一个块级作用域。
在ES6之前,是没有块级作用域的概念的,只有全局作用域和函数作用域两种,并且,用var声明的变量和用function声明的函数会被提前到作用域的顶部,这也就是我们常说的声明提前。
用let声明的变量是存在于距离声明语句最近的一个作用域(全局作用域、函数作用域或块级作用域)内的,在声明的时候,可选的将其初始化成一个值。