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 相关文章推荐
JavaScript的面向对象(二)
Nov 09 Javascript
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
JavaScript作用域链示例分享
May 27 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
vue判断按钮是否可以点击
Apr 09 Vue.js
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
PHP 处理图片的类实现代码
2009/10/23 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
python基础教程之常用运算符
2014/08/29 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python自动扫雷实现方法
2015/07/25 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python中Threading用法详解
2017/12/27 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
python3.4爬虫demo
2019/01/22 Python
flask应用部署到服务器的方法
2019/07/12 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
4s店市场专员岗位职责
2014/04/09 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
生产车间标语
2014/06/11 职场文书
机关工会工作总结2015
2015/05/26 职场文书
母亲节感言
2015/08/03 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python