关于ES6的六个小特性(二)


Posted in Javascript onFebruary 20, 2017

前言

Javascript 团体的每个人都喜欢新的API,语法更新以及特性,它们提供了更好的,更智能,更有效的方式以完成重要的任务。

继上一篇的 《简单谈谈ES6的六个小特性》,这次我再分享6个可以减少代码和最大化效率的方法。

1.Object Shorthand

新的对象声明方法允许我们可以不声明对象的 key :

var x = 12;
var y = yes;
var z = {one:'1',two:'2'};

// The old way
var obj = {
 x:x,
 y:y,
 z:z
}
// The new way
var obj = {x,y,z};

2.Method Properties

避免 function 关键字声明函数:

var davidwalsh = {
 makeItHappen(param){
 // do stuff
 }
}

必须承认去除掉 function 关键字确实使代码简洁、更好维护。

3.Blocks vs Immediately Executed Functions

下面创建立即执行方法的模式有点难看:

(function(){
 // do stuff
})();

通过ES6我们可以通过 {} 和 let 来创建块级作用于,完成立即执行函数的作用:

{
 let j = 12;
 let divs = document.querySelectorAll('div');

 // do stuff
}

j; // ReferenceError: j is not defined...

如果在 Block 内部声明函数,它将会被外部访问到。但你如果使用 let 关键字声明函数自变量,将不使用括号的情况下实现 IEF 的功能。

4. for loops and let

因为在JS里面会存在变量提升,我们经常会在作用域前面声明一些”无用”的迭代变量,例如(for var x = …)。ES6 使用 let 解决了此恼人的问题:

for(let x = 0; x < len; i++){
 //do stuff
}

x; // ReferenceError: x is not defined

不久以后 let 会被应用的更多。

5.get and set for Classes

class Cart{
 constructor(total){
 this._total = total;
 }
 get total(){return this._total;}
 set total(v){this._total = Number(v);}
}

var cart = new Cart(100);

cart.total // 100

能为属性设置 get、set 是这部分最棒的。不需要使用函数来进行特殊的设定?当执行 obj.prop = {value} 时,一切都会自动执行。

6.startsWith,endsWith and includes

"MooTools".startsWith("Moo"); // true;
"MooTools".startsWith("moo"); // false;

"MooTools".endsWith("Tools"); // true;

"MooTools".includes("oo"); // true;

注:includes 方法兼容性还是很多,曾有一个线上bug,就是因为不支持此方法导致的。

原文:https://davidwalsh.name/es6-features-ii/amp

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
详解JavaScript 的变量
Mar 08 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 #Javascript
JS批量替换内容中关键词为超链接
Feb 20 #Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 #Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 #Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 #Javascript
Bootstrap table右键功能实现方法
Feb 20 #Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 #Javascript
You might like
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
php json转换相关知识(小结)
2018/12/21 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
大学生最常用的自我评价
2013/12/07 职场文书
市场部规章制度
2014/01/24 职场文书
日语系毕业求职信
2014/07/27 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
简易离婚协议书范本
2014/10/24 职场文书
合作协议书范本
2014/10/25 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
2014年设计师工作总结
2014/11/25 职场文书
关于颐和园的导游词
2015/01/30 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS