全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

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

前言

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

总结

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


# es6的新特性  # es6新特性  # es6特性  # ES6新特性之模块Module用法详解  # ES6新特性之解构、参数、模块和记号用法示例  # ES6中非常实用的新特性介绍  # 简单谈谈ES6的六个小特性  # ES6的新特性概览  # ES6新特性之字符串的扩展实例分析  # ES6新特性之函数的扩展实例详解  # ES6新特性之Symbol类型用法分析  # ES6(ECMAScript 6)新特性之模板字符串用法分析  # ES6新特性之变量和字符串用法示例  # ES6中module模块化开发实例浅析  # 我们可以  # 将会  # 不需要  # 每个人  # 不久以后  # 一切都  # 会在  # 这部  # 线上  # 我再  # 不支持  # 这篇文章  # 上一篇  # 但你  # 能为  # 将不  # 曾有  # 最棒  # 可以减少  # 更有效 


相关文章: 高防网站服务器:DDoS防御与BGP线路的AI智能防护方案  网站制作的软件有哪些,制作微信公众号除了秀米还有哪些比较好用的平台?  齐河建站公司:营销型网站建设与SEO优化双核驱动策略  如何安全更换建站之星模板并保留数据?  网站制作公司哪里好做,成都网站制作公司哪家做得比较好,更正规?  小自动建站系统:AI智能生成+拖拽模板,多端适配一键搭建  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买?  建站之星24小时客服电话如何获取?  打鱼网站制作软件,波克捕鱼官方号怎么注册?  h5网站制作工具有哪些,h5页面制作工具有哪些?  企业网站制作费用多少,企业网站空间一般需要多大,费用是多少?  建站之星体验版:智能建站系统+响应式设计,多端适配快速建站  如何高效配置香港服务器实现快速建站?  如何选择靠谱的建站公司加盟品牌?  一键制作网站软件下载安装,一键自动采集网页文档制作步骤?  Python lxml的etree和ElementTree有什么区别  车管所网站制作流程,交警当场开简易程序处罚决定书,在交警网站查询不到怎么办?  安云自助建站系统如何快速提升SEO排名?  c++ stringstream用法详解_c++字符串与数字转换利器  北京建设网站制作公司,北京古代建筑博物馆预约官网?  如何注册花生壳免费域名并搭建个人网站?  深圳防火门网站制作公司,深圳中天明防火门怎么编码?  香港服务器网站生成指南:免费资源整合与高速稳定配置方案  网站建设制作需要多少钱费用,自己做一个网站要多少钱,模板一般多少钱?  浙江网站制作公司有哪些,浙江栢塑信息技术有限公司定制网站做的怎么样?  Python文件管理规范_工程实践说明【指导】  测试制作网站有哪些,测试性取向的权威测试或者网站?  香港服务器网站卡顿?如何解决网络延迟与负载问题?  建站主机与服务器功能差异如何区分?  如何通过虚拟机搭建网站?详细步骤解析  做企业网站制作流程,企业网站制作基本流程有哪些?  如何自定义建站之星模板颜色并下载新样式?  如何解决VPS建站LNMP环境配置常见问题?  深圳网站制作案例,网页的相关名词有哪些?  装修招标网站设计制作流程,装修招标流程?  建站主机选哪家性价比最高?  定制建站流程解析:需求评估与SEO优化功能开发指南  天河区网站制作公司,广州天河区如何办理身份证?需要什么资料有预约的网站吗?  深圳网站制作平台,深圳市做网站好的公司有哪些?  如何确保西部建站助手FTP传输的安全性?  大型企业网站制作流程,做网站需要注册公司吗?  如何彻底删除建站之星生成的Banner?  ,石家庄四十八中学官网?  海南网站制作公司有哪些,海口网是哪家的?  宝塔面板创建网站无法访问?如何快速排查修复?  免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的?  学校建站服务器如何选型才能满足性能需求?  专业网站制作企业网站,如何制作一个企业网站,建设网站的基本步骤有哪些?  网站制作公司排行榜,四大门户网站排名?  制作网站的网址是什么,请问后缀为.com和.com.cn还有.cn的这三种网站是分别是什么类型的网站? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。