ES6简介

97 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第10天juejin.cn/post/712312…

ES6新特性

1. 箭头操作符(箭头函数)

它简化了函数的书写,操作符左边为输入的参数,而右边是进行的操作以及返回值,一般回调以匿名函数的形式出现,每次都需要写一个function,甚是频繁。当引入箭头操作符后可以方便的写回调了。

2. 类的支持

Es6中添加了对类的支持,引入了class关键字(其实javaScript中一直是保留字,目的就是考虑到可能在以后的新版本中会用到,现在终于派上用场了)。Js本身就是面向对象的,es6中提供的类实际上只是js原型模式的保障,现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念更加形象化。

3. 参数默认值,不定参数,拓展参数

定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。

不定义参数在函数中命名参数,同时接收不定数量的未命名参数。

拓展参数则是另一种形式的语法糖,它允许传递数组或者类数组直接作为函数的参数而不用通过applay。

4. Let和const关键字

可以把let看出var,只是它定义的变量被限定在了特定范围内才能使用,而离开这个范围则无效,const则很直观,用来定义常量,即无法改变值的变量

5. 模块

在ES6标准中,JavaScript原生支持了module了。这种将js代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的,比如commonJS和AMD模式。

将不同功能的代码分别写在不同文件中,各模块只需到处公共接口部分,然后通过模块的导入方式可以在其他地方使用。

新增的接口Math,Number,String,Object的新API

ES6兼容性

目前各大浏览器对ES6的支持都在不断的完善当中,目前大多数浏览器对于ES6的功能都能提供支持,但是还在不断完善中,通过http://ruanyf.github.io/es-checkout查看浏览器对es6的支持情况。

IE11   14%

Edge  95%

Chrome  90%

Firfox    90%

如果浏览器不支持es6,就把es6代码转化成es5,也是解决es6兼容性问题

Node是js的服务器运行环境(runtime)。它对ES6的支持度更高,除了那些默认打开的功能,还有一些语法功能已经实现了,但是默认没有打开。使用下面的命令,可以查看Node已经实现的ES6特性。

Node –8-options | grep harmony

Babel转换器

Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行,这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。(http://babeljs.cn)

Babel也可以用于浏览器环境。但是,从Babel6.0开始,不再直接提供浏览器版本,而是要用构建工具构造出来。如果你没有或不想使用构建工具,可以使用babel-standalone模块提供的浏览器版本,将其插入网页。

<script src=”https://unpkg.com/@babel/standalone/babel.min.js.js”></script>

<script type=”text/babel”>

//Your ES6 code

</script>

注意:网页是将ES6代码转为ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本

使用babel转换器。Babel有两种用法:

1、比如写了es6的代码,把babel.js也引入html,当在浏览器打开页面的时候,babel先在浏览器里运行,再把es6代码转换成es5,对于用户来说比较慢。把babel.js文件放到es6代码前面。引入es6代码要把type设置成type=”text/bablal”

2、在代码(开发过程中)里直接把es6转换成es5,在提交到服务器。