当前位置:首页 > 技术分析 > 正文内容

JavaScript6里出现了哪些新语法、新特征?

ruisui882个月前 (03-17)技术分析13

新版本
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

作者:程序员视野

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2814.html

分享给朋友:

“JavaScript6里出现了哪些新语法、新特征?” 的相关文章

几个linux发行版使用感受

linux发行版有哪些linux发行版有上千种,但每一种发行版并不是与其它的发行版没任何关系,有些发行版是基于其他发行版制作的。如果乐意,你自己也可以动手制作属于自己的发行版,然后分发给其他人使用,所以非常自由,可选择的非常多。常见的发行版有:RedHat、Ubuntu、OpenSUSE、Gento...

2021最全VUE面试题,奥利给

1. vue-router用过没,哪些常用的钩子函数路由钩子的执行流程,钩子函数种类有:全局守卫、路由守卫、组件守卫。首页可以控制导航跳转, beforeEach , afterEach 等,?般?于页? title 的修改。?些需要登录才能调整??的重定向功能。beforeEach 主要有3个参数...

10分钟搞定gitlab-ci自动化部署

gitlab-ci 是持续集成工具/自动化部署工具,类似 jenkins。持续集成 是将代码集成到共享存储库并尽可能早地自动构建/测试每个更改的实践 - 通常一天几次。概述在编码完成时都会进行打包发布过程,如果每次都手动操作这一步骤就会浪费时间,效率低下。所以就有了持续集成。准备事项请提前安装以下软...

面试被逼疯:聊聊Python Import System?

面试官一个小时逼疯面试者:聊聊Python Import System?对于每一位Python开发者来说,import这个关键字是再熟悉不过了,无论是我们引用官方库还是三方库,都可以通过import xxx的形式来导入。可能很多人认为这只是Python的一个最基础的常识之一,似乎没有可以扩展的点了,...

身体越柔软越好?刻苦拉伸可能反而不健康 | 果断练

坐下伸直膝盖,双手用力向前伸,再用力……比昨天前进了一厘米,又进步了! 这么努力地拉伸,每个人都有自己的目标,也许是身体健康、线条柔美、放松肌肉、体测满分,也可能为了随时劈个叉,享受一片惊呼。 不过,身体柔软,可以享受到灵活的福利,也可能付出不稳定的代价,并不是越刻苦拉伸越好。太硬或者太软,都不安全...

HTML5学习笔记三:HTML5语法规则

1.标签要小写2.属性值可加可不加””或”3.可以省略某些标签 html body head tbody4.可以省略某些结束标签 tr td li例:显示效果:5.单标签不用加结束标签img input6.废除的标签font center big7.新添加的标签将在下一HTML5学习笔记中重点阐述。...