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

网友投稿 194 2023-06-10


关于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");zupQDnVqiX // true;

"MooTools".includes("oo"); // tzupQDnVqiXrue;

注:includes 方法兼容性还是很多,曾有一个线上bug,就是因为不支持此方法导致的。

总结

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:java实现合并图片的方法示例
下一篇:网页中右键功能的实现方法之contextMenu的使用
相关文章

 发表评论

暂时没有评论,来抢沙发吧~