JavaScript6里出现了哪些新语法、新特征?
ES5是2009年就出来的,目前来说在我写这篇文章的时候基本上ES6在浏览器上面还没有普及,不过Google浏览器是支持ES6语法的,谁让Google是美国生产的呢。。。
ES6现在使用的地方其实还是很多的,前端脚手架工具基本上都是支持ES6语法的,他们内部都有一套解析ES6的引擎。如vue、angular、react等。
想要了解ES6,学习ES6用法,最好还是去看写手册,文章都是根据手册官网来写的。ES6手册是 http://es6.ruanyifeng.com/
下面就看几个简单而实用的小特性。
1、模板文本
需要在字符串中加入变量时,通常做法就是使用字符串拼接,如
var param = 'b';
var str = 'a ' + param + ' c';
ES6中简单了,可以直接在字符串中添加变量
var str = `a ${param} c`;
注意,使用的是反引号 “,而不是 ”
2、多行字符串
例如想定义一个html代码片段,放在一行很难看,想用多行,还得用字符串拼接
var html =
'<div>' +
'<span>test</span>' +
'</div>';
一堆加号和引号,很麻烦
ES6中的反引号就能简单的解决
var html =
`<div>
<span>test</span>
</div>`;
非常清晰,里面还可以直接加变量,很方便
3、参数默认值
想给参数设置默认值时,需要我们手工处理,例如
function (width, height) {
var height = height || 300;
var width = width || 600;
...
}
ES6可以直接指定默认值
function (width=600, height=300) {
...
}
4、解构赋值
例如有一个json对象
var data = {name:'dys', age:1};
想取得name,age属性的话,需要分别获取
var name = data.name;
var age = data.age;
ES6可以自动获取并赋值
var {name, age} = data;
这几个示例只是比较简单的语法方面的便利特性,ES6还有一些比较深入的改进,例如
箭头函数、Promises、Classes ……
如何使用ES6
ES6是个新东西,兼容性还是个大问题,直接使用肯定是不可行了
还好,已经有了ES6的代码转换器,可以把ES6的代码转为ES5的代码(例如 babel),可以让我们使用ES6,又不担心兼容问题
我还没实际应用,不知道实际兼容效果是否有那么好
babel的官网 https://babeljs.io/
babel 示例
babel有gulp插件,下面是个简单的ES6代码转换示例
(1)安装环境
需要你的机器上已经装了nodejs、gulp
然后安装babel客户端
$ npm install -g babel-cli
在项目目录下安装相关插件
$ npm install gulp
$ npm install --save-dev gulp-babel
$ npm install --save-dev babel-preset-es2015
(2)测试脚本
用ES6方式写一个测试 a.js
var str = `hi ${name}`;
编写 gulpfile.js
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("a.js")
.pipe(babel({presets: ['es2015']}))
.pipe(gulp.dest("dist"));
});
这个脚本的意思是使用babel把a.js编译并输出到dist目录下
(3)执行编译
在项目目录中执行
$ gulp
执行结束后,到dist目录下查看编译后的a.js
原文为 http://www.techug.com/post/javascript6-new-features.html
JavaScript6里出现了哪些新语法、新特征?的更多相关文章
- ES6、7、8、9新语法新特性
前言 如果你擅长这种扩散式学习方式,不妨再进一步温习一下整个 ES6 引入的新特性,笔者强烈推荐阮一峰老师的 ECMAScript 6 入门 一书. ES2018 引入的特性还太新,单在对 ES6 特 ...
- Qt 5.0+ 中 connect 新语法与重载函数不兼容问题的解决方法,以及个人看法
Qt 5.0+ 版本提供了 connect 的新语法,相比之前的语法新语法可以提供编译期检查,使用也更方便.可是使用过程中发现一个小问题——当某个 signal 和成员函数是重载关系的时候,qmake ...
- .NET中那些所谓的新语法之二:匿名类、匿名方法与扩展方法
开篇:在上一篇中,我们了解了自动属性.隐式类型.自动初始化器等所谓的新语法,这一篇我们继续征程,看看匿名类.匿名方法以及常用的扩展方法.虽然,都是很常见的东西,但是未必我们都明白其中蕴含的奥妙.所以, ...
- .NET中那些所谓的新语法之四:标准查询运算符与LINQ
开篇:在上一篇中,我们了解了预定义委托与Lambda表达式等所谓的新语法,这一篇我们继续征程,看看标准查询运算符和LINQ.标准查询运算符是定义在System.Linq.Enumerable类中的50 ...
- 1、ASP.NET MVC入门到精通——新语法
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 在学习ASP.NET MVC之前,有必要先了解一下C#3.0所带来的新的语法特性,这一点尤为重要,因为在MVC项目中我们利用C#3.0的新特 ...
- 总结常见的ES6新语法特性
前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...
- 总结常见的ES6新语法特性。
前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...
- 第十六节:语法总结(3)(C#6.0和C#7.0新语法)
一. C# 6.0 新语法 1. 自动属性初始化可以赋值 /// <summary> /// 自动属性初始化 /// </summary> public class UserI ...
- ES6新语法之let关键字;有别于传统关键字var的使用
ES6新语法于2015年发布:而我这个前端小白在17年才接触到.惭愧惭愧!!不过到目前为止,似乎只有FireFox和Chrome对ES6的支持相对良好.不过既然人家ES6已经出来了,还是要跟上技术的潮 ...
- Node.js 全栈开发(二)——ES 201x 新语法的使用之基础篇
在讲 ES 2015 新语法之前,先来说一下为什么叫 ES.JavaScript 是这门语言的名称,它有一个为它制定标准化的组织 European Computer Manufacturers Ass ...
随机推荐
- Dubbo框架介绍与安装 Dubbo 注册中心(Zookeeper-3.4.6)
背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. • 单一应用架构 • 当网站流量很小时, ...
- Linux下分布式项目部署环境搭建与使用(druid-1.0.25.jar)数据库连接加密
一.JDK安装 1.执行命令:cd Downloads/ 2.上 传:jdk-8u111-linux-x64.tar.gz 到Downloads 3.执行命令:tar -zxvf jdk-8u111- ...
- Microsoft.Exchange 发邮件
//Microsoft.Exchange.WebServices.dll ExchangeService service = new ExchangeService(); // 获取身份验证, 能够尝 ...
- 证书制作 z
一.WCF中的安全方式 说到安全就会涉及到认证,消息一致性和机密性,WCF的安全方式分为两种,即传输安全和消息安全. 传输安全和消息安全的区别:传输安全提供点对点的安全: 比如 A 提供服务,B和C直 ...
- Markdown学习使用
本文记录Markdown的基础应用. 一.基础知识 Markdown 是一种标记语言 文件后缀名:.md 编辑工具:VSCode(visual studio code) VSCode中预览模式快捷键: ...
- shell逻辑运算符 1
逻辑卷标 表示意思 1. 关于档案与目录的侦测逻辑卷标! -f 常用!侦测『档案』是否存在 eg: if [ -f filename ] -d 常用!侦测『目录』是否存在 -b 侦测是否为一个『 bl ...
- python 中的list&tuple
list Python内置的一种数据类型是列表:list>>> classmates = ['Michael', 'Bob', 'Tracy']>>> classm ...
- 七.部署war包到Tomcat(基于Centos安装)
1.把war包上传至tomcat的webapps目录下面 2.启动Tomcat,在Tomcat的bin目录下面,运行startup.sh 3.访问项目,如下成功打开项目
- PHP------XML
XML XML的含义:可扩展标记语言,设计出来的目的是:传输数据 HTML的含义:超文本标记语言,设计出来的目的是:显示数据 它们两个设计出来的目的是不一样的. 它们两个都是标记语言,相似性比较高. ...
- MyBatis框架(4)全局文件
本次全部学习内容:MyBatisLearning 全局配置文件(本次案例中):