关于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 相关文章推荐
Jquery插件编写简明教程
Mar 25 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
Ajax基础知识详解
Feb 17 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
在webstorm中配置less的方法详解
Sep 25 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python实现截屏的函数
2015/07/25 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
如何用PHP实现邮件发送
2012/12/26 面试题
纪念建党演讲稿范文
2014/01/13 职场文书
高二数学教学反思
2016/02/18 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers