关于ES6的六个小特性(二)
2019/6/27 21:09:16
本文主要是介绍关于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的六个小特性(二)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist