JavaScript6里出现了哪些新语法、新特征?
新版本
javascript6/ECMAScript2015 在去年出来了,我们现在普遍使用的javascript 5是在2009年出来的,相隔这么多年,变化比较大,添加了一些很好用的特性。
下面就看几个简单而实用的小特性
1、模板文本
需要在字符串中加入变量时,通常做法就是使用字符串拼接,如:
ES6中简单了,可以直接在字符串中添加变量:
注意,使用的是反引号 “,而不是 ”
2、多行字符串
例如想定义一个html代码片段,放在一行很难看,想用多行,还得用字符串拼接:
一堆加号和引号,很麻烦
ES6中的反引号就能简单的解决
非常清晰,里面还可以直接加变量,很方便
3、参数默认值
想给参数设置默认值时,需要我们手工处理,例如:
ES6可以直接指定默认值:
4、解构赋值
例如有一个json对象:
想取得name,age属性的话,需要分别获取:
ES6可以自动获取并赋值:
这几个示例只是比较简单的语法方面的便利特性,ES6还有一些比较深入的改进,例如:
如何使用ES6?
ES6是个新东西,兼容性还是个大问题,直接使用肯定是不可行了
还好,已经有了ES6的代码转换器,可以把ES6的代码转为ES5的代码(例如 babel),可以让我们使用ES6,又不担心兼容问题
我还没实际应用,不知道实际兼容效果是否有那么好
babel的官网: https://babeljs.io/
babel 示例
babel有gulp插件,下面是个简单的ES6代码转换示例
(1)安装环境
需要你的机器上已经装了nodejs、gulp
然后安装babel客户端
在项目目录下安装相关插件:
(2)测试脚本
用ES6方式写一个测试 a.js
编写 gulpfile.js:
这个脚本的意思是使用babel把a.js编译并输出到dist目录下
(3)执行编译
在项目目录中执行
执行结束后,到dist目录下查看编译后的a.js
作者:程序员视野