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使用include/require
Nov 13 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
js模拟实现百度搜索
Jun 28 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
jQuery实现本地存储
Dec 22 jQuery
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
一个好用的分页函数
2006/11/16 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
Python中splitlines()方法的使用简介
2015/05/20 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Python常见数字运算操作实例小结
2019/03/22 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
技校个人求职信范文
2014/01/25 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
单位作风建设自查报告
2014/10/23 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang