欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

直击JavaScript ES6里最重要的5个特性

时间:2020-06-23|栏目:JavaScript|点击:

直击JavaScript ES6里最重要的5个特性

JavaScript ES6 添加了一系列新的语言特性,其中一些特性比其它更具有开创性以及更广的可用性。比如像 ES6 类 这样的特性,虽然新奇,但其实仅仅是在 JavaScript 中创建类的已有方法之上的一种语法糖。而像生成器(generator)这样的功能,虽然非常强大,但却是为了针对性的任务所保留的。

从在过去的12个月里所从事的不同 JavaScript 相关项目中,我发现有 5 个 ES6 特性是不可或缺的,因为它们真正简化了 JavaScript 普通任务的完成方式。你心中的前 5 名可能和我的不一样,如果是的话,我希望你能在结尾的评论区分享它们。

让我们正式开始!

箭头函数(Arrow Functions)

Promises

异步函数(Async Functions)

解构(Destructuring)

默认和剩余参数(Default and Rest Parameters)

1) JavaScript 箭头函数

在 ES6 JavaScript 中,我最喜欢的新增特性之一并不是一个全新特性,而是一个我每次使用都能让我微笑的新语法。我说的就是箭头函数,它提供了一种极致优雅和简洁的方式来定义匿名函数。

简而言之,箭头函数就是丢掉了关键字 function,然后用一个箭头 => 来分离一个匿名函数的参数部分和函数体:

(x, y) => x * y;

这相当于:

function(x, y){ return x * y; }

或者:

(x, y) => { var factor = 5; var growth = (x-y) * factor; }

完全等价于:

function(x, y){ var factor = 5; var growth = (x-y) * factor; }

在使用传统的匿名函数时,箭头函数还消除了一个关键的错误源,即函数内的 this 对象的值。使用箭头函数,this 是基于词法绑定,这仅仅是意味着它的值被绑定到父级作用域的一种奇特的方式,并且永远不会改变。如果一个箭头函数定义在一个自定义对象 countup 中,this 值毫无疑问地指向 countup。比如:

var countup = { counter: 15, start:function(){ window.addEventListener('click', () => { alert(this.counter) // correctly alerts 15 due to lexical binding of this }) } }; countup.start();

对比传统匿名函数,this 的值在哪变化取决于它被定义的上下文环境。当在上面的例子中尝试引用 this.counter,结果将返回 undefined,这种行为可能会把很多不熟悉动态绑定的复杂性的人搞糊涂。使用箭头函数,this 的值总是可预测并且容易推断的。

对于箭头函数的详细讲解, 请看 “Overview of JavaScript Arrow Functions“.

2) JavaScript Promises

JavaScript ES6 Promises 使异步任务的处理方式变成线性, 这是大多数现代Web应用程序中的一项任务。 而不是依靠回调函数 —— 通过JavaScript框架(如jQuery)普及。JavaScript Promises 使用一个中心直观的机制来跟踪和响应异步事件。它不仅使调试异步代码变得更容易,而且使得编写它也是一种乐趣。

所有 JavaScript Promise 都是通过 Promise() 构造函数开始和结束:

const mypromise = new Promise(function(resolve, reject){ // 在这编写异步代码 // 调用 resolve() 来表示任务成功完成 // 调用 reject() 来表示任务失败 })

在内部使用 resolve() 和 reject() 方法,当一个 Promise 被完成或拒绝时,我们可以分别向一个 Promise 对象发出信号。 then() 与 catch() 方法随后可以被调用,用以处理完成或拒绝 Promise 后的工作。

我用下面一个被注入 XMLHttpRequest 函数的 Promise 的变种,来一个接一个的检索外部文件内容:

function getasync(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open("GET", url) xhr.onload = () => resolve(xhr.responseText) xhr.onerror = () => reject(xhr.statusText) xhr.send() }) } getasync('test.txt').then((msg) => { console.log(msg) // echos contents of text.txt return getasync('test2.txt') }).then((msg) => { console.log(msg) // echos contents of text2.txt return getasync('test3.txt') }).then((msg) => { console.log(msg) // echos contents of text3.txt })

要掌握 JavaScript Promises 的关键点,例如 Promise 链和并行执行 Promise,请阅读 “Beginner’s Guide to Promises“.

3) JavaScript 异步函数

除了 JavaScript Promise,异步函数进一步重写了传统的异步代码结构,使其更具可读性。每当我向客户展示带有async 编程功能的代码时,第一个反应总是令人惊讶,随之而来的是了解它是如何工作的好奇心。

一个异步函数由两部分构成:

1) 一个以 async 为前缀的常规函数

async function fetchdata(url){ // Do something // Always returns a promise }

2) 在异步函数(Async function)内,使用 await 关键字调用异步操作函数

一个例子胜过千言万语。下面是基于上面示例重写的 Promise,以便使用 Async functions代替:

function getasync(url) { // same as original function return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open("GET", url) xhr.onload = () => resolve(xhr.responseText) xhr.onerror = () => reject(xhr.statusText) xhr.send() }) } async function fetchdata(){ // main Async function var text1 = await getasync('test.txt') console.log(text1) var text2 = await getasync('test2.txt') console.log(text2) var text3 = await getasync('test3.txt') console.log(text3) return "Finished" } fetchdata().then((msg) =>{ console.log(msg) // logs "finished" })

上面的例子运行时会输出“test.txt”,“test2.txt”,“test3.txt”,最后是“Finished”。

上一篇:三分钟了解Vue框架

栏    目:JavaScript

下一篇:检测JavaScript里最有效率的功能特征的方法解析

本文标题:直击JavaScript ES6里最重要的5个特性

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/2073.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7