关于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 图像裁剪插件Jcrop的简单使用
May 22 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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
基于initPHP的框架介绍
2013/04/18 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
做网页的一些技巧(续)
2007/02/01 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
javascript中undefined的本质解析
2019/07/31 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python中的hypot()方法使用简介
2015/05/18 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
python从子线程中获得返回值的方法
2019/01/30 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
培训讲师开场白
2015/06/01 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python