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结合css实现网页换肤功能
Nov 02 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
用js实现放大镜效果
Oct 28 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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
django 创建过滤器的实例详解
2017/08/14 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
python实现126邮箱发送邮件
2020/05/20 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
护士的岗位职责
2013/12/04 职场文书
岗位职责的构建方法
2014/02/01 职场文书
大学生暑期实践感言
2014/02/26 职场文书
安全月活动总结
2014/05/05 职场文书
承诺书格式
2014/06/03 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
Python集合set()使用的方法详解
2022/03/18 Python