• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 关于ES6的六个小特性(二)

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

作者:Zhuxy 字体:[增加 减小] 来源:互联网 时间:2017-05-11

Zhuxy通过本文主要向大家介绍了es6新特性,es6特性,es6有哪些新特性,es6新增了哪些特性,深入理解es6等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

前言

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};
</div>

2.Method Properties

避免 function 关键字声明函数:

var davidwalsh = {
 makeItHappen(param){
 // do stuff
 }
}
</div>

必须承认去除掉 function 关键字确实使代码简洁、更好维护。

3.Blocks vs Immediately Executed Functions

下面创建立即执行方法的模式有点难看:

(function(){
 // do stuff
})();
</div>

通过ES6我们可以通过 {} 和 let 来创建块级作用于,完成立即执行函数的作用:

{
 let j = 12;
 let divs = document.querySelectorAll('div');

 // do stuff
}

j; // ReferenceError: j is not defined...
</div>

如果在 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
</div>

不久以后 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
</div>

能为属性设置 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;
</div>

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

原文:https://davidwalsh.name/es6-features-ii/amp

总结

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • ES6新特性八:async函数用法实例详解
  • ES6新特性七:数组的扩充详解
  • ES6新特性六:promise对象实例详解
  • ES6新特性四:变量的解构赋值实例
  • ES6新特性三: Generator(生成器)函数详解
  • ES6新特性二:Iterator(遍历器)和for-of循环详解
  • ES6新特性一: let和const命令详解
  • 关于ES6的六个小特性(二)

相关文章

  • 2017-05-11详解Vue 动态添加模板的几种方法
  • 2017-05-11js输入框使用正则表达式校验输入内容的实例
  • 2017-05-11javascript 中关于array的常用方法详解
  • 2017-05-11Vue如何引入远程JS文件
  • 2017-05-11js cookie实现记住密码功能
  • 2017-05-11JS简单获取日期相差天数的方法
  • 2017-05-11Javascript 两种刷新方法以及区别和适用范围
  • 2017-05-11移动端点击态处理的三种实现方式
  • 2017-05-11微信小程序 向左滑动删除功能的实现
  • 2017-05-11详解JavaScript树结构

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery实现的浮动层div浏览器居中显示效果
    • bootstrap警告框使用方法解析
    • 微信小程序 开发之全局配置
    • 详解JavaScript树结构
    • Bootstrap表单控件学习使用
    • 基于canvas的二维码邀请函生成插件
    • 使用jQuery的ajax方法向服务器发出get和post请求的方法
    • 详解node.js搭建代理服务器请求数据
    • jQuery实现在新增加的元素上添加事件方法案例分析
    • 重新理解JavaScript的六种继承方式

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有