关于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 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
交互式可视化js库gojs使用介绍及技巧
Feb 18 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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
又一个php 分页类实现代码
2009/12/03 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
axios学习教程全攻略
2017/03/26 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
对python中的装包与解包实例详解
2019/08/24 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
工业自动化毕业生自荐信范文
2014/01/04 职场文书
女方回门宴答谢词
2014/01/14 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
租车协议书范本2014
2014/11/17 职场文书
技术负责人岗位职责
2015/02/10 职场文书
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers