ES6中非常实用的新特性介绍


Posted in Javascript onMarch 10, 2016

ECMAScript 6离我们越来越近了,作为它最重要的方言,Javascript也即将迎来语法上的重大变革,InfoQ特开设“深入浅出ES6”专栏,来看一下ES6将给我们带来哪些新内容。

写在前面

ES6 已经提交给 Ecma 大会审查了,也就是说,我们将迎来一大波 javascript 的最新标准,还有一些语法糖。ES6 中有很多值得我们关注的东西,下面是我发现的一些我们最常用的一些新特性,进行记录一下。

1. for-of循环

这个东西用来循环数组很爽,原因呢,是因为它弥补了目前 es5 中循环数组的一切缺陷。

比如 for-in,它会遍历数组对象的附加属性,而不仅仅是遍历数组值。还有一点是,for-in 中的索引是 string 类型的,这一点尤其重要。

var arrObj=['alexchen',1,{}];
arrObj._name='attr-AlexChen';
for(var i in arrObj){
console.log(arrObj[i]) // 会把_name属性也遍历出来 
console.log(typeof(i)) // 全部输出 string
}

当然我们还有 forEach() 函数,它也有问题,比如你不能在里面 break return 之类的:

var arrObj = ['alexchen','boy','great'];
arrObj.forEach(function (v) {
if (v == 'boy') {
return 'can not return';
}
console.log(v) //会输出alexchen great
})

这样看起来要比 for-in 简便很多。但就像上面说的一样,它有也有不足的地方。那么我们来试试 for-of 吧:

var arrObj = ['alexchen',1,{}];
arrObj._name = 'attr-alexchen';
for (var i of arrObj) {
console.log(i);//这里只会输出,alexchen,1,object{},不会输出attr-alexchen
console.log(typeof(i))//这里会输出 string,number,object
if (i == 1) {
break;
}
console.log(i)//只会输出 alexchen,满足条件之后就不在继续循环,提高了效率并且可以自由控制跳出循环或继续循环
}

可以看到:

当使用 for-of 的时候,循环的是数组内部的元素且不会出现 for-in 中将附加属性也遍历的情况,其次,循环变量的类型和其在数组中的类型保持一致,而不是全部是 string 的情况。

就这两点就值得我们选择 for-of 而不是 forEach() 或 for-in 当然,现在还有些浏览器不支持。不过以上代码可以在最新版本的 FireFox 执行成功并得到预期结果。当然 for-of 并不是只在数组上使用,你可以用在任何类数组类型的对象上,比如 DOM NodeList, 字符串 等。

2. 模版字符串

这个东西也非常好玩,用在字符串拼接的地方。从名称上我们就知道是干啥的了。在前端开发过程中难免会遇到要动态拼接字符串的情况(动态dom生成,数据格式化)等:

(function sayHello(name, words) { 
console.log(`hello: ${name},welcome es6,your words is: ${words}`); //
})('alexchen','im admin')//运行之后将会输出:hello: alexchen,welcome es6,your words is: im admin

注意,被当作模版的字符串使用 ` 号包裹的。其中 $(paramenter) 是占位符,而且支持对象,eg:$(obj.name) 这种形式。与普通字符串相比模版字符串可以写成多行而不需要用 + 连接:

hello:$(name),
welcome es6,
your words is $(words)

值得注意的是,模版字符串不会转义特殊字符,因此需要自己处理其中的安全隐患。模版字符串并不能够代替模版框架,原因是模版字符串没有内置的循环语法和条件语句。因此,对于常规的普通的字符串拼接,我们可以使用它来完成,会让你的代码看起来更酷一点。PS(除此之外,我觉得它并没有什么卵用。ψ(?_?))

这里有更详细的介绍来解决上面说道的没有内置循环和判断分支的问题:

es6-模版字符串-mozilla

3. 默认参数(Defaults parameters)

这个有点意思,是这样的,我们都知道 js 函数是不需要给函数参数设置默认值的,比如如下代码会报错:

(function(a=0,b=0){return a+b;})(1,2)//不支持es6的浏览器下会报错的SyntaxError: Unexpected token =

这也就意味着,我们的参数不能给默认值,如果需要给参数默认值就需要在函数内部判断其是否为 undefined 的方式来处理。然而在 ES6 中呢,我们可以给参数设置默认值,而不用在函数内部去判断后赋默认值,不但可以赋值默认值,还可以使用运算表达式,如下:

(function testDefaultsParams(pars1 = "alexchen",
pars2 = (pars1 == "alexchen") ? "admin" : "not admin") {
console.log(`welcome ${pars1} ,u r ${pars2}!!`)//用到了上面说的模版字符串
})();
/**参数为空时输出,welcome alexchen ,u r admin!!,
如果第一个参数不是alexchen则输出,welcome alexchen ,u r not admin!!**/

这种方式在编写代码时非常的简便,和动态语言一样,比如 c# 中。这样既直观,又方便。所以用起来还是很不错的。还一个剩余参数(Rest parameters),笔者没发现有什么特别的用处,因此就不写啦,感兴趣的可以去看看

默认参数和剩余参数-mozilla

ES6 中还有很多新特性和语法。感兴趣的可以看一下 mozilla 团队的博客,里面有很详细的介绍,而且是系列文章。

mozilla-ES6-系列介绍

好了,以上就是我在 ES6 中发现的三个比较实用的新东西,这三个应该是日常开发中用的最多的了,在此做个记录。

关于ES6中非常实用的新特性介绍就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
javascript实现点亮灯泡特效示例
Oct 15 Javascript
ES6的新特性概览
Mar 10 #Javascript
JavaScript字符串常用的方法
Mar 10 #Javascript
javascript中call apply 与 bind方法详解
Mar 10 #Javascript
angularjs表格ng-table使用备忘录
Mar 09 #Javascript
详解AngularJS控制器的使用
Mar 09 #Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 #Javascript
javascript基本算法汇总
Mar 09 #Javascript
You might like
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
用cssText批量修改样式
2009/08/29 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
Python3使用requests发闪存的方法
2016/05/11 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
keras 读取多标签图像数据方式
2020/06/12 Python
python实现移动木板小游戏
2020/10/09 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
最新创业融资计划书
2014/01/19 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
公司酒会主持词
2015/07/02 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
区域销售大会开幕词
2016/03/04 职场文书