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

作者:Zhuxy 时间:2024-04-10 10:59:24 

前言

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

来源:http://zhuxinyong.com/2016/11/26/ES6的6个小特性&#-248;二&#-247;/

标签:es6,新特性
0
投稿

猜你喜欢

  • python django 原生sql 获取数据的例子

    2023-02-16 18:35:02
  • SQL Server数据库入门学习总结

    2012-08-21 11:01:33
  • 使用SQL语句 INNER JOIN 联接表

    2008-04-27 20:31:00
  • Python模块的制作方法实例分析

    2021-09-06 05:57:26
  • Mootools 1.2教程(2)——DOM选择器

    2008-11-13 12:46:00
  • wap开发中如何有效的利用缓存减少消息的传送量

    2022-12-16 04:23:17
  • JS获得选取checkbox整行数据的方法

    2024-02-26 21:10:33
  • 基于Python实现扑克牌面试题

    2023-11-21 18:05:21
  • 深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非

    2023-11-20 22:41:16
  • python中open函数的基本用法示例

    2021-08-03 20:42:31
  • 详解基于webpack&gettext的前端多语言方案

    2024-04-16 09:52:34
  • 详解python中的线程与线程池

    2022-02-02 18:27:19
  • python 实现数据库中数据添加、查询与更新的示例代码

    2023-10-08 04:09:51
  • Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】

    2022-07-06 16:40:59
  • 关于go语言编码需要放到src 文件夹下的问题

    2023-07-03 07:34:00
  • JS中call/apply、arguments、undefined/null方法详解

    2024-04-19 11:01:31
  • 详解用Node.js实现Restful风格webservice

    2024-05-13 09:35:20
  • python装饰器与递归算法详解

    2022-11-03 17:05:09
  • 避坑:Sql中 in 和not in中有null值的情况说明

    2024-01-22 17:01:33
  • Java面试题冲刺第十二天--数据库(2)

    2024-01-21 18:34:27
  • asp之家 网络编程 m.aspxhome.com