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

 更新时间:2017年02月20日 09:57:21   作者:Zhuxy  
ES6提供了大量新的好的东西,在过去的一年内,浏览器提供商做了大量的辛勤工作将新的语言特性更新到他们的浏览器中。尽管有重大的更新,很多小的语言更新另我眼前一亮,下面这篇文章主要介绍了关于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

总结

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

相关文章

  • Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

    Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

    最近在做项目时用到了定时执行的js方法,setInterval与setTimeout时间长了不用有些生疏了,所以自己总结了一下,记下来,以便以后使用。
    2010-06-06
  • JavaScript表单验证的两种实现方法

    JavaScript表单验证的两种实现方法

    这篇文章主要为大家详细介绍了JavaScript表单验证的两种实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 微信小程序保持session会话的方法

    微信小程序保持session会话的方法

    这篇文章主要介绍了微信小程序保持session会话的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • JS给swf传参数的实现方法

    JS给swf传参数的实现方法

    下面小编就为大家带来一篇JS给swf传参数的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JavaScript字符串转换数字的方法

    JavaScript字符串转换数字的方法

    这篇文章主要介绍了JavaScript字符串转换数字的方法,文章围绕JavaScript字符串转换数字的相关资料展开全文内容,需要的小伙伴可以参考一下
    2021-12-12
  • apicloud拉起小程序并传递参数的方法示例

    apicloud拉起小程序并传递参数的方法示例

    这篇文章主要介绍了apicloud拉起小程序并传递参数的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Js自定义多选框效果的实例代码

    Js自定义多选框效果的实例代码

    本篇文章主要介绍了Js自定义多选效果的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • layui实现checkbox的目录树tree的例子

    layui实现checkbox的目录树tree的例子

    今天小编就为大家分享一篇layui实现checkbox的目录树tree的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序学习总结(二)样式、属性、模板操作分析

    微信小程序学习总结(二)样式、属性、模板操作分析

    这篇文章主要介绍了微信小程序样式、属性、模板操作,结合实例形式分析了微信小程序尺寸单位、样式、数据初始化、属性、模板调用相关操作技巧,需要的朋友可以参考下
    2020-06-06
  • js星星评分效果

    js星星评分效果

    在这里和广大脚本之家站的朋友们分享一个使用js实现商城星星评分的效果,希望能给大家点帮助
    2014-07-07

最新评论